CSS logo banner in web development

What is 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 edit your website design styles, such as colors, font size, and alignment.

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 types 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 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 typing out the external CSS coding:

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

Pros & Cons

Pros Cons
Inline Ability to edit a specific element. Fills up the HTML space, not reusable across pages.
Apply only for one element.
Internal Able to edit one whole page with no other files required. The HTML file will be long-winded and need to be checked frequently.
Can only edit to one specific page.
External Easier to maintain and can apply across all pages in the entire website. When there are too many codes, the HTML may not work properly.
Some codes may be overridden because of the position of the codes.

Head over to Brackets.io to download the HTML and CSS file to experiment with HTML and CSS. To get more practice, you can also visit W3school to learn various codings that can be applied to your website.

About Pixel Mechanics

As a one-stop e-commerce solutions provider in Singapore, Pixel Mechanics is a website design and development company that aims to help businesses transition to the online space seamlessly.