Log in Sign up
Back to Discover
💻

CSS

technology Maturity 11-13

Web pages can look pretty.

W3C CSS Snapshot.png
W3C CSS Snapshot.png
We use rules to pick colors. We can pick the font too. This helps the page look good. It makes reading fun for you. Do you like bright colors?

37 words

Web pages use special rules to look good.

W3C CSS Snapshot.png
W3C CSS Snapshot.png
These rules pick colors and fonts. They also decide where things go on the screen.

One rule can change many things at once. If you want all titles to be blue, you just say so. This saves a lot of work.

These rules work on many things. They help on phones and computers. They even help tools that read text out loud.

One file can style many web pages. This makes the web fast to load. It also keeps everything looking the same.

Rules help make the web a better place to read.

104 words

Web pages use special code to look good. This code is called CSS. CSS stands for Cascading Style Sheets.

W3C CSS Snapshot.png
W3C CSS Snapshot.png

CSS helps separate content from style. Content is the text and facts. Style is how those things look. CSS picks the colors and fonts. It also decides the layout. This means where parts sit on a screen.

Using CSS makes work much easier. You can put styles in one file. This file is called a style sheet. One style sheet can change many pages at once. If you want all titles to be blue, you change one rule. This is faster than changing every page. It also helps web pages load quickly.

CSS uses rules to work. A rule has two main parts. First is a selector. This tells the computer which part to change. It might pick all headers or one specific box. Next is a declaration block. This part gives the new style. It says things like "color: red."

Håkon Wium Lie.jpg
Håkon Wium Lie.jpg
CSS works on many devices. It helps phones and big computers. It even helps tools that read text out loud for people.

190 words

CSS is a special language used to style web pages. It stands for Cascading Style Sheets. It works alongside HTML and JavaScript to build the internet. While HTML provides the basic content, CSS handles the presentation. This means it controls how things look on your screen.

W3C CSS Snapshot.png
W3C CSS Snapshot.png
CSS is a cornerstone of the World Wide Web. It allows for a separation of content and style. This separation makes web pages much easier to use. Content can be written without worrying about colors or fonts. It also helps people use different devices to read the web. Styles can change for screens, printed paper, or even voice readers.

How does CSS work step by step? It uses a list of rules called a style sheet. Each rule starts with a selector. A selector tells the computer which part of the page to change. It might pick all headers or one specific box. Next comes the declaration block, which is held inside curly braces. Inside this block, you find declarations. A declaration has a property and a value. For example, you might say the color is red.

Håkon Wium Lie.jpg
Håkon Wium Lie.jpg
You can use many different units for size. Some are absolute, like centimeters or inches. Others are relative, like pixels or percentages.

Before CSS, making a page look good was very hard. Authors had to put all the style code inside the HTML. They had to repeat the same code for every single heading. This made the files very large and hard to fix. If you wanted to change a color, you had to change it everywhere. CSS changed this by letting people use separate files. One small .css file can style many different pages at once. This makes the web faster and more consistent.

There are many ways to select parts of a page. You can use a class to style many items at once. You use a dot before the name to show a class. You can also use an ID for just one single item. An ID uses a hash prefix like a hashtag. Some selectors are even smart. A pseudo-class can change a style when you point a mouse at something. This is very useful for making buttons react to you.

W3C CSS Snapshot.png
W3C CSS Snapshot.png

The name "cascading" comes from how the computer picks styles. If there is more than one rule for one item, the computer follows a priority scheme. This scheme is predictable so designers can control the look. The rules for CSS are kept by the World Wide Web Consortium, or W3C. They even offer a free service to check if CSS code is correct. CSS is used in many places, including the GTK widget toolkit. It helps keep the digital world looking beautiful and organized.

463 words

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.png
W3C CSS Snapshot.png
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.jpg
Håkon Wium Lie.jpg

643 words
🖼️ 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
Up Next
💻
HTML
Technology
More to explore

🔬 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.