Day 2 - CSS Syntax
CSS (Cascading Style Sheets) is used to style and layout web pages. It tells the browser how to display HTML elements.
1. The CSS Syntax
A CSS rule consists of a Selector and a Declaration Block.
-
Selector: Points to the HTML element you want to style
(e.g.,
h1,.class). -
Property: The style attribute you want to change (e.g.,
color,font-size). -
Value: The setting for the property (e.g.,
blue,16px).
selector {
property: value;
another-property: value;
}
property: value;
another-property: value;
}
2. Basic Example
Let's style a paragraph clearly using a class selector
.styled-text.
Code:
/* CSS */
.styled-text {
color: blue;
font-size: 20px;
font-weight: bold;
}
/* HTML */
<p class="styled-text">This text is styled with CSS!</p>
.styled-text {
color: blue;
font-size: 20px;
font-weight: bold;
}
/* HTML */
<p class="styled-text">This text is styled with CSS!</p>
Output:
This text is styled with CSS!
3. Multiple Properties
You can apply as many properties as you need to a single element.
Code:
/* CSS */
.multi-property-box {
width: 200px;
height: 100px;
background-color: purple;
color: white;
text-align: center;
border-radius: 10px;
}
/* HTML */
<div class="multi-property-box">I am a Box!</div>
.multi-property-box {
width: 200px;
height: 100px;
background-color: purple;
color: white;
text-align: center;
border-radius: 10px;
}
/* HTML */
<div class="multi-property-box">I am a Box!</div>
Output:
I am a Box!
4. CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.
Code:
/* This is a single-line comment */
p { color: red; }
/* This is a multi-line comment */
p { color: red; }
/* This is a multi-line comment */