Basics of CSS

In this blog we will be going through the basics of CSS, and by the end of this blog you will be able to stylize and create awesome webpages.
What you'll learn
- What is CSS?
- Why to use CSS?
- Applying CSS to HTML
- Anatomy of CSS code
- Fonts and Text in CSS
- Everything about boxes in CSS
- Positioning and Styling the webpage
Prerequisites
- Basic word processing using any text editor. (VS code recommended)
- Basic knowledge in HTML
Anatomy of CSS Code
Let's dissect the CSS code for blue paragraph text to understand how everything works:
The whole structure is called a ruleset. Note the names of the individual parts:
-
Selector
- This is the HTML element name at the start of the ruleset. It defines the elements to be styled (in this example, <p> element). To style a different element, change the selector.
-
Declaration
- This is a single rule like color: blue; It specifies which of the element's properties you want to style.
-
Properties
- These are ways in which you can style an HTML element. (In this example, color is a property of the <p> element.) In CSS, you choose which properties you want to affect in the rule.
-
Property value
- To the right of the property, after the colon, there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to blue.)
Note the other important parts of the syntax:
- Apart from the selector, each ruleset must be wrapped in curly braces. ({})
- Within each declaration, you must use a colon (:) to separate the property from its value or values.
- Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one
To modify multiple property values in one ruleset, write them separated by semicolons, refer the example below:
p {
color: blue;
width: 200px;
border: 1px solid black;
}