Introduction to CSS3
CSS (Cascading Style Sheets) was created by W3C to separate presentation from HTML structure. Key milestones:
- 1996: CSS Level 1 released
- 1998: CSS Level 2 introduced
- CSS3: Modular approach (50+ modules) with backward compatibility
CSS Syntax Fundamentals
selector {
property: value;
/* More declarations */
}
property: value;
/* More declarations */
}
Selector Types:
- Element:
p { color: red; } - ID:
#para1 { text-align: center; } - Class:
.center { margin: auto; }
Three Ways to Apply CSS
- External:
<link rel="stylesheet" href="styles.css"> - Internal: Styles within
<style>tags in head - Inline:
<h1 style="color:blue;">
Cascading Order: Inline > Internal > External > Browser defaults
CSS Colors & Backgrounds
Color Formats:
- Named:
DodgerBlue - HEX:
#ff0000 - RGB/RGBA:
rgba(255, 0, 0, 0.5) - HSL/HSLA:
hsl(120, 100%, 50%)
Background Properties:
body {
background: #fff url("img.png") no-repeat right top;
}
background: #fff url("img.png") no-repeat right top;
}
CSS Borders
Border Styles: dotted, dashed, solid, double, groove, etc.
p {
border: 2px solid red;
border-radius: 5px; /* Rounded corners */
}
border: 2px solid red;
border-radius: 5px; /* Rounded corners */
}
Key Concept:
CSS solves the problem of style/content mixing in HTML, enabling consistent designs across entire websites with single file changes.