1. What is CSS?
CSS (Cascading Style Sheets) is a language that styles HTML elements. It controls the following components;
-
Colors 🎨
-
Fonts ✍️
-
Layouts 📐
-
Spacing ↔️
-
Animations 🎬
An analogy to understand what CSS is in relation to human beings
If HTML is the skeleton of a webpage, CSS is the skin and clothes that make it look attractive.
2. How CSS Works with HTML
-
HTML = Structure & Content
-
<h1>Welcome</h1>
<p>This is a paragraph.</p> -
CSS = Presentation
-
h1 {
color: blue;
} p {
font-size: 16px;
}
Basic CSS syntax.
3. Three Ways to Add CSS
A. Inline CSS (Directly in HTML)
<p style=”color: red; font-size: 20px;“>This is red text.</p>
-
👍 Pros: It is quick for testing
-
👎 Cons: Hard to maintain. Avoid this style when handling large projects)
B. Internal CSS (In <style> Tag)
syntax;
<head> <style> p { color: green; font-family: Arial; } </style> </head>
-
👍 Pros: Good for single-page styling
-
👎 Cons: Not reusable across pages
C. External CSS
Here we use a separate CSS file.
syntax looks as follows:
<head> <link rel=”stylesheet” href=”styles.css”> </head>
Code which is inside the file named styles.css:
p { color: purple; text-align: center; }
-
👍 Pros: Best practice because it is reusable and it is organized.
-
👎 Cons: Requires file linking. Incase you mis spell the file name i.e Styles.css instead of styles.css, the css code will not be applied to the html elements.
5. CSS Selectors Cheat Sheet
|
Selector |
Example |
Targets |
|---|---|---|
|
Element |
|
All |
|
Class |
|
|
|
ID |
|
|
|
Universal |
|
All elements |
Example:
/* Element selector */
here, h1 is the HTML element for rendering headings. h1 { color: navy; } /* Class selector */
Classes are labels given to HTML elements to identify them.
i.e
<h1 class=’school’> Qubit Institute of Technology </h1>
To style the h1 element above, we would use the following CSS to change it’s color from black to yellow.
.school { color: yellow; } /* ID selector */
ids are labels given to HTML elements to identify them. The keyword used is id.
i.e
<h1 id=’school’> Qubit Institute of Technology </h1>
To style the h1 element above, we would use the following CSS to change it’s color from black to yellow.
#school { color: yellow; }