CSS (Cascading Style Sheets) controls how a web page looks — separate from the HTML, which controls the content. Instead of the old <font> tag and body attributes, modern pages use CSS for all styling. The CBSE 165 syllabus covers the core CSS properties.
1What CSS is and how to apply it
A CSS rule has a selector (what to style) and a declaration block of property: value; pairs:
p {
color: navy;
font-size: 18px;
}There are three ways to attach CSS:
| Way | Where |
|---|---|
| Inline | A style attribute on one tag: <p style="color:red"> |
| Internal | A <style> block in the page's <head> |
| External | A separate .css file linked into the page |
"Cascading" means rules can combine and override each other by priority. Keeping style in CSS (not in HTML) lets you restyle a whole site by editing one place.
index.html
Preview
Key points
- A CSS rule = selector { property: value; ... } — selector picks elements, declarations style them.
- Three ways to apply CSS: inline (style attribute), internal (<style> in <head>), external (.css file).
- CSS separates how a page LOOKS from the HTML that holds the CONTENT.
2Colours, backgrounds and borders
Core appearance properties (CBSE 165):
| Property | Sets |
|---|---|
color | Text colour |
background-color | Background colour of the element |
border-style | Border line style: solid, dashed, dotted, double… |
outline | A line drawn outside the border (doesn't take up space) |
div {
color: white;
background-color: #e67009;
border-style: solid;
}A full border usually needs three things:
border-style, a width and a colour (e.g. border: 2px solid navy;). Colours can be names or hex codes.index.html
Preview
Key points
- color sets text colour; background-color sets the element's background.
- border-style sets the border's line (solid, dashed, dotted, double).
- outline draws a line outside the border and does not take up layout space.
3Spacing and size
Every element is a box you can size and space out:
| Property | Controls |
|---|---|
width | How wide the box is |
height | How tall the box is |
margin | Space outside the box (pushes other elements away) |
.box {
width: 200px;
height: 100px;
margin: 20px;
}Sizes are usually in pixels (px) or percent (%).
margin is space outside the element — it separates it from its neighbours.Key points
- width and height set the size of an element's box (in px or %).
- margin is the space OUTSIDE the box, separating it from neighbours.
- outline (from the previous topic) sits outside the border without taking space.
4Typography and layout
CSS replaces the old <font> tag with cleaner properties, and adds layout control:
| Property | Sets |
|---|---|
font-family | The typeface (Arial, Verdana, serif…) |
font-size | Text size (e.g. 16px) |
font-style | normal or italic |
text-align | left, center, right, justify |
float | Floats an element left/right so text wraps around it |
h1 {
font-family: Arial;
font-size: 28px;
text-align: center;
}
img { float: left; }
index.html
Preview
Key points
- font-family sets the typeface, font-size the size, font-style normal/italic.
- text-align positions text: left, center, right or justify.
- float moves an element left/right so other content wraps around it.
★ Practical: style a page with CSS
Using an internal <style> block, create one page that:
- Sets the page text colour and a background colour.
- Has a box with a width, height, margin and a solid border.
- Centres a heading with text-align and changes its font-family and font-size.
- Uses one class selector applied to two different elements.
Ready for the chapter test?
Answer 5 questions. Score 60% or more to mark this chapter complete.
Start the test →💡 Log in to save your progress and earn the certificate.