CSS logo banner in web development

Hello and welcome! Are you a beginner in CSS and need some guide so that you can learn and understand better? Well then you have come to right place! Today, we will teach you the basics of CSS.

Firstly, you need to understand what CSS is. Well, CSS stands for Cascading Style Sheets. It allows web developers to create rules that specify how content of an element should appear. In layman term means to edit your website design style, such as colors, font-size, alignment etc.

How it works?

CSS works by associating rules with HTML elements and these rules govern how the content of specified elements should be displayed. So whatever you type in CSS, it will changed the entire design of the website. For instance, if you changed the background color to green, it will changed to green. Unless you specify otherwise.

CSS contains 2 parts:

1. Selector – which element the rule applies to.

2. Declaration – how the element referred to in the selector should be styled.

Example:

css selector declaration in web development

Declaration contains 2 parts:

  1. Property – the style type
  2. Value – the value of the style

Example:

css property and value in web development

There are 3 type of CSS:

  1. Inline – directly next to your HTML code, which will apply only to the specific element/selector.
  2. Internal – at the head section of your HTML file, which will only apply to that specific one page.
  3. External – a stand alone CSS file with an extension (.css), which will apply to across the whole pages.

Inline

html sample 7 in web development

Internal

html sample 2 in web development

External

html sample 11 in web developmentIn the .css file web development

Inline CSS:

Before typing out the inline CSS coding:

html sample 5 in web development
web design sample 1

After typing out the inline CSS coding:

html sample 7 in web development
html sample 8 in web development

Internal CSS:

Before typing out the internal CSS coding:

html sample 1 in web development
web design sample 1

After typing out the internal CSS coding:

html sample 2 in web development
html sample 4 in web development

External CSS:

Before typing out the external CSS coding:

html sample 9 in web development
web design sample 1

After entering the coding:

html sample 11 in web development
In the .css file web development
html sample 12 in web development

Pros & Cons

ProsCons
InlineAbility to edit specific elementFills up the HTML space, not reusable across pages. Apply only for one element.
InternalAble to edit one whole page and no other files is requiredHTML file will be long winded and always need to refer back and forth to check, and only can edit to one specific page.
ExternalEasier to maintain and can apply to across all pages in the entire website.When too many codes, the HTML may not work properly. Some codes may be override due to the position of the codes.

Takeaways

Alright! Now you know the difference and the basics of CSS. As mention in the introduction, you may want to get worked out with CSS and HTML. You can go to Brackets.io to download the HTML and CSS file. To get more practice, you can visit to W3school to learn the various codings that can be applied. We hope this article help you in understanding and learning CSS better. Stay tune to our next article.