CSS, which stands for Cascading Style Sheets, is a language used to control the presentation and styling of web pages written in HTML. While HTML defines the structure of a page, CSS defines how that structure looks: the colours, fonts, spacing, borders, and layout. By separating content from presentation, CSS allows a web designer to update the look of an entire website by changing a single style sheet, instead of editing every page individually. This separation is one of the most important principles of modern web design.
CSS was introduced to overcome the limitations of HTML, which had only limited styling options such as the BGCOLOR and FONT tags. With CSS, designers can apply consistent styles across hundreds of pages, create responsive layouts that adapt to different screen sizes, and make websites faster to load because the styling information is downloaded only once. The word "cascading" refers to the way CSS rules combine: when multiple style rules apply to the same element, the most specific rule wins according to a well-defined priority order.
In this chapter we will study the three ways of adding CSS to a web page, the syntax and structure of CSS rules, selectors, the box model, and the most commonly used styling properties. We will also learn about the important properties for text, font, background, border, margin, and padding. At the end, students will be able to take a plain HTML page and make it attractive and professional with the power of CSS.
CSS can be added to a web page in three different ways, depending on the scope of styling required.
Inline styles are written directly inside an HTML tag using the style attribute. For example, <P style="color:red;">Welcome</P> colours that single paragraph red. Inline CSS affects only the element in which it is written, making it the least reusable method.
Internal styles are written inside the head section of the page within the <STYLE> tag. For example, <STYLE> P { color: blue; } </STYLE> styles all paragraphs of that page. Internal CSS affects the entire current page but cannot be shared across pages.
External styles are written in a separate file with a .css extension, such as style.css. This file is linked to the HTML page using the <LINK> tag: <LINK REL="stylesheet" HREF="style.css">. External CSS can be shared by many pages, making it the most efficient and recommended method for large websites.
Among the three methods, the priority of application is inline first, then internal, then external, provided the rules have the same specificity. This order is part of the cascade concept of CSS.
A CSS rule consists of a selector and a declaration block. The selector identifies the HTML element to which the style applies, and the declaration block contains one or more declarations separated by semicolons. Each declaration has a property and a value separated by a colon.
selector {
property: value;
property: value;
}
For example, the rule H1 { color: green; font-size: 24px; } makes all level-one headings green and 24 pixels in size. The block is enclosed in curly braces, and each declaration ends with a semicolon. CSS is case-insensitive for property names but values are case-sensitive in some situations.
Selectors are used to target specific elements for styling. The most common types of selectors are given below.
P { color: navy; } styles all paragraphs..highlight { background-color: yellow; }, and used in HTML as <P CLASS="highlight">.#header { text-align: center; }, and used as <DIV ID="header">.H1, H2, H3 { color: blue; }.*, it applies the style to all elements of the page.An ID selector is used only once per page, whereas a class selector can be reused many times. This distinction is important for writing correct CSS.
The box model is a fundamental concept that describes how every HTML element is displayed as a rectangular box. Every box consists of four layers, from the inside out:
padding property.border property.margin property.The total width of an element is calculated as content width plus padding plus border plus margin. Understanding the box model helps designers control the exact spacing of elements. Properties like padding-top, padding-right, and margin-left allow the spacing to be set for individual sides.
CSS provides hundreds of properties, but a handful cover most styling needs.
color: sets the colour of the text.font-family: specifies the typeface, for example Arial or Verdana.font-size: sets the size of the font in pixels (px) or points (pt).font-style: makes text italic or normal.font-weight: makes text bold or normal.text-align: aligns text to left, right, centre, or justify.text-decoration: adds underline, overline, or line-through.background-color: sets the background colour of an element.background-image: sets an image as the background using url("image.jpg").background-repeat: controls whether the background image repeats.background-position: positions the background image.border: sets the style, width, and colour of the border, for example border: 2px solid red;.border-radius: makes the corners of a border rounded.margin: sets the space outside the border.padding: sets the space inside the border around the content.The width and height properties set the dimensions of an element. The max-width and min-height properties place limits on those dimensions and are useful in responsive design.
The following internal CSS demonstrates styling of text in a web page:
<STYLE>
BODY {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
H1 {
color: #1a56db;
text-align: center;
text-decoration: underline;
}
.important {
background-color: yellow;
font-weight: bold;
}
#footer {
text-align: center;
font-size: 12px;
}
</STYLE>
In this example, the element selector BODY styles the whole page, the class selector .important styles selected elements, and the ID selector #footer styles the footer paragraph. This combination of selectors is a standard practice in real websites.
| Method | Where Written | Scope | Priority |
|---|---|---|---|
| Inline CSS | In the style attribute of a tag | Only that element | Highest |
| Internal CSS | Inside the |