SafekipediaCSS
Adapted from Wikipedia · Adventurer experience
Cascading Style Sheets, or CSS, is a special language used to make web pages look nice and organized. It works together with HTML and JavaScript to build the websites we see every day. HTML gives the content of a page, like text and pictures. CSS decides how that content looks — like colors, fonts, and how the page is laid out.
CSS is important because it helps separate the content from its style. This means you can write your content once and change how it looks without touching the original text. It also makes websites easier to use for everyone, including people who need special ways to see the web, like using a screen reader or a Braille-based device.
CSS can make a website look good on many different devices, like phones, tablets, or printers. The "cascading" part of its name means that if there are multiple rules about how something should look, CSS has a way to decide which rule to use. The rules for CSS are kept up to date by the World Wide Web Consortium.
Besides HTML, CSS can also be used with other types of web languages, such as SVG, XHTML, and even in programs that use the GTK widget toolkit. This makes CSS a flexible tool for anyone who wants to design and build web pages.
Syntax
CSS has a simple syntax and uses English words to set styles for web pages.
A style sheet is a list of rules. Each rule has parts called selectors and a declaration block. Selectors decide which parts of a webpage to style.
Selectors can choose items in many ways. Declaration blocks contain the actual styles, like colors and sizes, that tell the browser how those parts should look.
CSS helps separate the design of a webpage from its content. This makes webpages easier to update and manage. This way, changing a style only needs to be done in one place, not everywhere on the page.
| Pattern | Matches | First defined in CSS level |
|---|---|---|
| E | an element of type E | 1 |
| E:link | an E element that is the source anchor of a hyperlink whose target is either not yet visited (:link) or already visited (:visited) | 1 |
| E:visited | ||
| E:active | an E element during certain user actions | 1 |
| E:hover | 2 | |
| E:focus | ||
| E::first-line | the first formatted line of an E element | 1 |
| E::first-letter | the first formatted letter of an E element | 1 |
| .c | all elements with class="c" | 1 |
| #myid | the element with id="myid" | 1 |
| E.warning | an E element whose class is "warning" (the document language specifies how class is determined) | 1 |
| E#myid | an E element with ID equal to "myid" | 1 |
| .c#myid | the element with class="c" and ID equal to "myid" | 1 |
| E F | an F element descendant of an E element | 1 |
| * | any element | 2 |
| E[foo] | an E element with a "foo" attribute | 2 |
| E[foo="bar"] | an E element whose "foo" attribute value is exactly equal to "bar" | 2 |
| E[foo~="bar"] | an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" | 2 |
| E[foo|="en"] | an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" | 2 |
| E:first-child | an E element, first child of its parent | 2 |
| E:lang(fr) | an element of type E in language "fr" (the document language specifies how language is determined) | 2 |
| E::before | generated content before an E element's content | 2 |
| E::after | generated content after an E element's content | 2 |
| E > F | an F element child of an E element | 2 |
| E + F | an F element immediately preceded by an E element | 2 |
| E[foo^="bar"] | an E element whose "foo" attribute value begins exactly with the string "bar" | 3 |
| E[foo$="bar"] | an E element whose "foo" attribute value ends exactly with the string "bar" | 3 |
| E[foo*="bar"] | an E element whose "foo" attribute value contains the substring "bar" | 3 |
| E:root | an E element, root of the document | 3 |
| E:nth-child(n) | an E element, the n-th child of its parent | 3 |
| E:nth-last-child(n) | an E element, the n-th child of its parent, counting from the last one | 3 |
| E:nth-of-type(n) | an E element, the n-th sibling of its type | 3 |
| E:nth-last-of-type(n) | an E element, the n-th sibling of its type, counting from the last one | 3 |
| E:last-child | an E element, last child of its parent | 3 |
| E:first-of-type | an E element, first sibling of its type | 3 |
| E:last-of-type | an E element, last sibling of its type | 3 |
| E:only-child | an E element, only child of its parent | 3 |
| E:only-of-type | an E element, only sibling of its type | 3 |
| E:empty | an E element that has no children (including text nodes) | 3 |
| E:target | an E element being the target of the referring URI | 3 |
| E:enabled | a user interface element E that is enabled | 3 |
| E:disabled | a user interface element E that is disabled | 3 |
| E:checked | a user interface element E that is checked (for instance a radio button or checkbox) | 3 |
| E:not(s) | an E element that does not match simple selector s | 3 |
| E ~ F | an F element preceded by an E element | 3 |
| E:has(s) | an E element that contains an element matching simple selector s | 4 |
Images
Related articles
This article is a child-friendly adaptation of the Wikipedia article on CSS, available under CC BY-SA 4.0.
Images from Wikimedia Commons. Tap any image to view credits and license.