Cascading Style Sheets facts for kids
Cascading Style Sheets (often called CSS) is a special computer language. It helps describe how a document, like a web page, looks. Think of it as the style guide for websites. While HTML gives a web page its structure (like headings and paragraphs), CSS tells the browser how to display them. It controls things like colors, fonts, and how elements are arranged on the page.
CSS works with HTML and JavaScript to make most websites look good and interactive. It's used for web pages, online tools, and even many mobile apps.
One of the main ideas behind CSS is to keep the content (the words and pictures) separate from its look. This means you can change the design of a website without changing the actual text. This makes websites easier to update and more flexible. For example, you can make a website look different on a phone compared to a computer screen. It also helps people with disabilities, as they can sometimes use their own CSS styles to make a website easier to read.
If you want to change the look of a website, you can do it quickly by editing just a few lines in a CSS file. This is much faster than changing every single page individually. The rules for CSS are managed by the World Wide Web Consortium (W3C), which is like the main group that sets standards for the internet.
Contents
How CSS Works
CSS uses simple rules to tell web browsers how to display things. A CSS file is like a list of instructions. Each instruction tells the browser what to style and how.
Before CSS
Before CSS became popular, web designers had to put all the style information directly into the HTML code. This meant that if you wanted all your headings to be blue and bold, you had to tell every single heading in your HTML to be blue and bold. This made HTML files very long, messy, and hard to change.
For example, if you had many `h2` headings (which are like sub-titles), you had to repeat the font, size, and color settings for each one. If you later decided to change the color, you had to go through every single `h2` heading and change it.
CSS Solves Problems
CSS changed all that! It lets designers put all the style rules in a separate file. This makes the HTML much cleaner and easier to read. Now, you can tell all `h2` headings to be blue and bold just once in the CSS file. If you want to change them later, you only need to edit that one line in the CSS file, and the change will apply everywhere.
CSS can control many things:
- Colors of text and backgrounds.
- Types of fonts and their size.
- How text is lined up (left, center, right).
- Borders around elements.
- Spacing between elements.
- How the whole page is laid out.
It can even define styles for things you can't see, like how fast an audio reader should speak the text.
User Control
One cool thing about CSS is that it can give users more control. If someone finds a website's default colors hard to see, they can sometimes apply their own CSS file. This lets them change the website's look to suit their needs, like making the text bigger or changing the colors.
Example of CSS Code
Let's say you want all the paragraphs on your web page to be blue and a bit bigger than normal text. You would add this simple CSS rule to your style sheet:
p {
color: blue;
font-size: 120%;
}This code tells the browser: "Find all the `p` (paragraph) elements. Make their text `blue` and their `font-size` 120% of the normal size."
Images for kids
-
This image shows different versions of CSS that have been released over time.
See also
In Spanish: CSS para niños
