CSS3 is the latest version of CSS used to style and design web pages. It controls the layout, colors, fonts, spacing, and responsiveness of HTML elements.
selector {
property: value;
}
p {
color: blue;
font-size: 16px;
}
👉 Applies blue color and font size to all <p> elements.
<p style="color:red;">Hello</p>
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="style.css">
Selectors are used to target HTML elements.
p { color: red; }
.myclass { color: blue; }
#myid { color: green; }
h1, p { color: black; }
👉 Every element is a box:
+----------------------+
| Margin |
| +---------------+ |
| | Border | |
| | +---------+ | |
| | | Padding | | |
| | | Content | | |
| | +---------+ | |
| +---------------+ |
+----------------------+
margin → outer spaceborder → edgepadding → inner spacecontent → actual databody {
background-color: lightblue;
color: black;
}
body {
background-image: url("img.jpg");
}
p {
font-family: Arial;
font-size: 18px;
font-weight: bold;
text-align: center;
}
div {
display: block;
}
staticrelativeabsolutefixeddiv {
position: absolute;
top: 50px;
}
@media (max-width: 600px) {
body {
background-color: yellow;
}
}
👉 Changes style for small screens (mobile).
.container {
display: flex;
justify-content: center;
}
.container {
display: grid;
grid-template-columns: auto auto;
}
@keyframes example {
from {background-color: red;}
to {background-color: blue;}
}
div {
transition: width 2s;
}
div {
border-radius: 10px;
}
✔ CSS follows cascading order (priority rules) ✔ Priority: Inline > Internal > External ✔ Use classes for reuse ✔ Avoid too many inline styles ✔ Use responsive design for mobile
CSS3 = Styling language
Controls layout, colors, fonts
Key concepts:
Works with HTML + JavaScript
Open this section to load past papers