CSS Introduction

CSS is the language used to control how a web page looks. HTML creates the structure of a page, while CSS adds colours, spacing, fonts, borders, layouts, and other visual styles.

For example, HTML can create a heading, but CSS can change its colour, size, alignment, and font. CSS helps turn a basic HTML document into an attractive and user-friendly website.

The full form of CSS is Cascading Style Sheets.

History of CSS

In the early days of the web, HTML was used for both content and design. Developers used HTML elements and attributes to change colours, fonts, spacing, and page layouts. As websites became more complex, this approach made the code difficult to manage.

In 1994, Norwegian web developer Håkon Wium Lie proposed CSS. His goal was to create a separate language for controlling the appearance of HTML documents. Bert Bos later worked with him to develop the CSS standard.

The World Wide Web Consortium, commonly known as the W3C, published the first official CSS standard, CSS Level 1, in 1996. It introduced basic features such as colours, fonts, margins, borders, and text alignment.

CSS continued to develop through several important stages:

• CSS1 (1996): Introduced basic text, colour, font, margin, and spacing properties.
• CSS2 (1998): Added positioning, media types, z-index, and improved layout controls.
• CSS2.1: Fixed problems in CSS2 and became a more stable standard for browsers.
• CSS3: Divided CSS into separate modules and introduced features such as animations, transitions, gradients, media queries, Flexbox, and Grid.
• Modern CSS: Includes custom properties, container queries, logical properties, advanced selectors, and responsive sizing functions.

Today, CSS does not develop as one large version called “CSS4.” Instead, individual CSS modules are updated separately. For example, selectors, colours, backgrounds, Grid, and Flexbox each have their own development levels.

Modern CSS is much more powerful than its early versions. Developers can now create responsive layouts, animations, themes, and interactive visual effects without depending heavily on JavaScript.

Why Do We Need CSS?

Without CSS, web pages would look very plain. Most content would appear using the browser's default font, colour, spacing, and layout.

CSS allows developers to control the design of a website. You can use it to:

• Change text colours and font sizes.
• Add backgrounds, borders, and shadows.
• Control spacing between elements.
• Arrange content in rows and columns.
• Create responsive layouts for different screen sizes.
• Add transitions and animations.
• Maintain a consistent design across multiple pages.

CSS also separates content from design. HTML manages the content, while CSS manages its appearance. This makes the website easier to build, update, and maintain.

A Simple CSS Example

Consider the following HTML heading:

<h1>Welcome to Dev Brain Box</h1>

By default, the browser decides how this heading should look. We can use CSS to customise it:

h1 {
  color: blue;
  font-size: 36px;
  text-align: center;
}

In this example:

• color changes the text colour.
• font-size controls the size of the text.
• text-align places the heading in the centre.

The heading will now appear blue, larger, and centred on the page.

What Does “Cascading” Mean?

The word cascading describes how the browser decides which style to apply when multiple CSS rules target the same element.

The browser considers factors such as:

• Where the CSS rule is written.
• How specific the selector is.
• Whether a rule is inherited from a parent element.
• Which rule appears later in the stylesheet.

p {
  color: blue;
}

p {
  color: orange;
}

Both rules select paragraphs, but the second rule appears later. Therefore, the paragraph text will be orange. You will learn more about the cascade and specificity in later topics.