CSS Guide for Beginners to Learn

Table of Contents

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.

 

website design agency

Inline

html sample 7 in web development  

Internal

html sample 2 in web development

External

html sample 11 in web development  

Inline CSS:

Before typing out the inline CSS coding: html sample 5 in web developmentweb design sample 1 After typing out the inline CSS coding: html sample 7 in web developmenthtml sample 8 in web development  

Internal CSS:

Before typing out the internal CSS coding: html sample 1 in web developmentweb 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 developmentweb design sample 1 After typing out the external CSS coding: html sample 11 in web development

In the .css file web developmenthtml sample 12 in web development  

Pros & Cons

 ProsCons
InlineAbility to edit a specific element.Fills up the HTML space, not reusable across pages. Apply only for one element.
InternalAble 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.
ExternalEasier 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.   

"*" indicates required fields