CSS belongs to a triplet of core web technologies alongside HTML and JavaScript. With careful planning, CSS contributes to separation of concerns. Independent resources control the structure of content, its presentation and behavior.

Style sheets play an important role in accessibility, scalability, and even web performance. As a content author or web designer, they let you 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 defines 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:

property: value

For example:

color: red

The values ​​of different properties can look very different, even the values ​​of the same property. For example, here are two more ways to write the previous statement:

color: #ff0000
color: rgb(255, 0, 0)

How HTML and Style Sheets Work Together

You can combine HTML and CSS in different ways, each with its advantages.

Writing inline 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 styling online items like this can be practical, it does come with 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. This is CSS, but not “Style Sheets”.

Incorporate styles into the head

You can start to see what a stylesheet looks like with the second mechanism, to incorporate. Using this approach, we put all the style statements together in one style element in the lead of our document. It will look something like this:

...

However, our style instructions 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:

selector {
declaration1;
declaration2;
/* etc. */
}

For example, to style paragraph text in blue, we can specify the following:

p {
color: blue;
}

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

Keywords.

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 incorporating CSS rules into the style item directly in your document, you can move them to a separate file.

Paste this code in the tags in your HTML file to link your external stylesheet.

The power of CSS

With the linked method, we harness a fundamental power of CSS: the separation of concerns. All semantic information – what the content means – is contained in the HTML document. The style – what it looks like – is in a separate file, the stylesheet.

Here are some advantages of this separation:

• You can change a stylesheet just by changing the file reference. It can even happen dynamically. In just one step, you can change the look and feel of a page.

• Many pages can share the same style sheets as needed. By modifying a single file, you can update the look and feel 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 its style information once, rather than including it on every page.

• When collaborating, different teams can leverage their strengths, creating and editing 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 any author stylesheets? This is thanks to a set of special rules that make up the user agent stylesheet. 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 “titles are in bold” but the page author says “titles on this page are light,” they will end up being light.

There is another stylesheet source that gives the reader some control. Any web user can, in theory, maintain a user stylesheet with custom rules. These are in the middle: User rules will override the browser’s default settings, but will themselves be overridden by author styles. Unfortunately, support for user style sheets has never been widespread.

You can use stylesheets in different contexts, beyond the screen. the media attribute of connect The element defines the types of media to which the stylesheet applies. For example, you can define a stylesheet for printing using markup as follows:

You can group common styles into a single global stylesheet and media-specific styles into separate files. There are even types of media for audio or Braille presentations of your content. CSS is an essential tool for improving accessibility.

Related: How To Browse The Web If You Are Blind or Visually Impaired

Sites like Wikipedia use CSS to control their print style, hide unwanted material, and simplify page layouts.

CSS makes HTML look good

Cascading stylesheets cover a lot: cascading, inheritance, selectors, sources, media, etc. But their power enables the modern web. It is a medium that offers built-in functionality of reusability, flexibility and accessibility.

To see all the power of CSS and all it has to offer, check out our cheat sheet covering all the essential CSS3 properties.

Read more

About the Author