Nepedia
Back to Discover
Advanced Reader
💻

CSS

technology Maturity 11-13 Next article →

Cascading Style Sheets, or CSS, is a powerful style sheet language. It is used to specify the presentation and styling of digital documents. These documents are usually written in markup languages like HTML or XML. CSS is a cornerstone technology of the World Wide Web. It works alongside HTML and JavaScript to create the modern internet.

W3C CSS Snapshot
W3C CSS Snapshot

The main goal of CSS is to separate content from presentation. This means the text and data stay separate from the colors and layouts.

This separation of content and presentation offers many technical advantages. First, it improves content accessibility for all users. Content can be written without worrying about how it looks visually. Second, it provides designers with more flexibility and control over styles. Third, multiple web pages can share the same formatting by using one .css file. This reduces repetition and makes the structural content less complex. Finally, .css files can be cached by a browser. This improves page load speeds when many pages share the same file.

To understand how CSS works, you must look at the style sheet. A style sheet is a list of specific rules. Each rule consists of one or more selectors and a declaration block. The selector tells the computer which part of the markup to change. It matches specific tags or attributes within the document tree. The declaration block is held inside a pair of curly braces {}. Inside these braces, you find declarations that define the style. Each declaration contains a property and a value, separated by a colon. For example, a property might be color and the value might be red.

Selectors are the tools used to target specific elements. You can select all elements of a certain type, such as h2 headers. You can also use an ID to target a single, unique element. An ID is denoted by a hash prefix, like #myid. If you want to style many different elements, you use a class. A class is denoted by a dot prefix, like .myClass. Unlike an ID, a class can be applied to any number of elements. There are also pseudo-classes, which allow for formatting based on user actions. A common example is the :hover pseudo-class, which triggers when a user points a mouse at an element.

CSS also uses combinators to target elements based on their location. The order of these selectors is very important for the result. For instance, "div .myClass" targets elements with a specific class inside a div. However, ".myClass div" targets all div elements that are inside that class. Designers can also use different units to define sizes and measurements. Some units are absolute, such as centimeters (cm) or inches (in). Others are relative, such as pixels (px) or percentages (%). Relative units are useful because they can change based on the parent element's size.

Before CSS was used, web design was a much harder task. Almost all presentational attributes were contained directly within the HTML markup. Authors had to repeat code for font colors, borders, and alignments constantly. If a designer wanted to change a heading color, they had to edit every single instance. This made documents larger, more complex, and very difficult to maintain. CSS changed this by allowing styles to live in separate, external files. Now, a single edit to one .css file can restyle an entire website instantly.

The rules for CSS are maintained by the World Wide Web Consortium, or W3C. This organization ensures the language stays consistent across the web. They even provide a free validation service to check if CSS documents are correct. The term "cascading" refers to the priority scheme the language uses. If more than one rule matches a single element, the computer follows a predictable order to decide which one to apply. This makes the styling process reliable for developers everywhere.

Håkon Wium Lie
Håkon Wium Lie
636 words

Where will your curiosity go next?

Keep exploring at your chosen reading level.

🖼️ Images & Media (3)
File:Håkon Wium Lie.jpg
Håkon Wium Lie.jpg
File:W3C CSS Snapshot.png
W3C CSS Snapshot.png
CSS Standardization - The State of the Web.webm
More to explore

✨ What else?

Related topics you might enjoy

🔬 Go deeper

More advanced topics to explore

🪜 Step back

Simpler topics to build understanding

What is Nepedia?

A free, ad-free encyclopedia for children. Every article is written at five reading levels, so the same page works for a five-year-old and a fifteen-year-old — use the level switcher above to see this one change. No account needed to read.