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:
Declaration contains 2 parts:
- Property – the style type
- Value – the value of the style
Example:
There are 3 types of CSS:
- Inline—Directly next to your HTML code, which will apply only to the specific element/selector.
- Internal—At the head section of your HTML file, which will only apply to that specific one page.
- External—A stand-alone CSS file with an extension (.css), which will apply across the whole pages.
Inline
Internal
External
Inline CSS:
Before typing out the inline CSS coding:
After typing out the inline CSS coding:
Internal CSS:
Before typing out the internal CSS coding:
After typing out the internal CSS coding:
External CSS:
Before typing out the external CSS coding:
After typing out the external CSS coding:
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.Â