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.
Declaration contains 2 parts:
- Property – the style type
- Value – the value of the style
There are 3 type 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 to across the whole pages.
Before typing out the inline CSS coding:
After typing out the inline CSS coding:
Before typing out the internal CSS coding:
After typing out the internal CSS coding:
Before typing out the external CSS coding:
After entering the coding:
Pros & Cons
|Inline||Ability to edit specific element||Fills up the HTML space, not reusable across pages. Apply only for one element.|
|Internal||Able to edit one whole page and no other files is required||HTML file will be long winded and always need to refer back and forth to check, and only can edit to one specific page.|
|External||Easier 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.|
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.