CSS logo banner in web development

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

CSS stands for Cascading Style Sheets which are used to format the layout of web pages. It allows web developers to create rules that specify how the content of an element should appear. In simpler terms, CSS can be used to edit your website design style, such as colors, font-size, alignment and etc.

How does it work?

CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. Whatever typed in CSS will change the entire design of the website. For instance, if you change the background color to green, it will change to green unless specified 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