Style sheets play an important role in accessibility, scalability, and even web performance. As a content author or web designer, they allow you to control how devices display content. From layout to font size and color, CSS turns content into beautiful pages.
What does CSS look like?
CSS is a great language – there are a lot of different things to style! But its syntax is simple, with only a few rules to learn.
HTML elements have various properties that CSS can style. the Color The property sets the foreground color (eg text). The font size depends on the font size property.
Each property can be set to a supported value. Assigning a value to a property is a “statement.” Usually they look like this:
The values of different properties can look very different, even the values of the same property. For example, here are two other ways to write the previous statement:
color: rgb(255, 0, 0)
How HTML and Style Sheets Come Together
You can combine HTML and CSS in different ways, each with its advantages.
Online writing styles
The easiest method is to attach style declarations directly to an element in the HTML file. You can do this by using the style attribute like this:
Most of this text is red …
… but this isn’t!
While online styling elements like this can be handy, they have several drawbacks. For starters, it complicates HTML, making it harder to read at a glance. It’s also awkward to maintain: imagine a long document in which you want to define the color of each paragraph. It’s CSS, but not “Style Sheets”.
Integrate styles in the head
You can start to see what a stylesheet looks like with the second mechanism, embedding. Using this approach, we put all the style declarations together in one style element in the to manage of our document. It will look something like this:
Our style instructions, however, need a little more detail than before. Since we moved them to the head, each rule is no longer associated with an element. We could have declared The Red color, but what should have this color?
This is where CSS selectors come in. They allow us to target specific parts of the page and define their style in one place, using this syntax:
/* etc. */
For example, to style paragraph text in blue, we can specify the following:
In this example, the selector is simply p, which matches all paragraph elements in our document. It will color all the text blue, as long as it is in
Link an external style sheet
The last method to cover is binding. This is, by far, the most useful approach, and the one you should take most of the time. Instead of integrating CSS rules into the style item directly in your document, you can move them to a separate file.
Paste this code in the
The power of CSS
With the linked method, we harness a central power of CSS: the separation of concerns. All semantic information (what the content means) is contained in the HTML document. The style, how it looks, is in a separate file, the stylesheet.
Here are some advantages of this separation:
- You can change a stylesheet simply by changing the file reference. It can even happen dynamically. In one step, you can change the entire look of a page.
- Many pages can share the same style sheets as needed. By editing a single file, you can update the look of an entire website.
- Dividing a page into “content” and “style” has technical advantages. Proxies and browsers can cache individual files separately. This means that a site can submit their style information once, rather than including it on every page.
- When working together, different teams can leverage their strengths, creating and modifying separate files without affecting each other.
Explain the waterfall
You’ve learned a lot about styles and style sheets, but what about the “cascading” part of CSS?
The waterfall is what decides which styles to use when multiple style sheets are present. You have seen how an author can specify styles for their content. But another feature of CSS is that it also gives readers and browser makers a say in the matter.
You may have wondered about the default styles before. For example, how does a H1 does the item look big and bold, even without author stylesheets? This is thanks to a set of special rules that constitute the user agent style sheet. These rules are initially applied by your web browser to every page you visit.
The cascade specifies that an author stylesheet applies after user agent styles. If our browser says “the headers are bold” but the page author says “the headers on this page are lightweight” then they will end up being lightweight.
There is another stylesheet source that gives the reader some control. Any internet user can, in theory, maintain a user style sheet with custom rules. These are in the middle: User rules will override the browser’s default settings, but will themselves be overridden by the author’s styles. Unfortunately, support for user style sheets has never been widespread.
You can use style sheets in different contexts, beyond the screen. the media attribute of the link The element defines the media types to which the stylesheet applies. For example, you can define a stylesheet for printing using markup as follows:
You can collect common styles in a global stylesheet and media-specific styles in separate files. There are even types of media for audio or Braille presentations of your content. CSS is an essential tool for improving accessibility.
Sites like Wikipedia use CSS to control their print style, hide unwanted material, and simplify page layouts.
CSS makes HTML beautiful
Cascading Style Sheets cover a lot of things: Cascading, Inheritance, Selectors, Sources, Media, etc. But their power enables the modern web. It is a medium that offers built-in reuse, flexibility and accessibility features.
To see all the power of CSS and all it has to offer, check out our cheat sheet covering all the essential properties of CSS3.
Master essential CSS syntax with our CSS3 properties cheat sheet.
About the Author