How to save a CSS file

CSS as a file, style tag, import, inline

The CSS cascade

Because CSS properties can overwrite each other, the CSS cascade is created - hence the term »cascading stylesheets«.

1. 2. 3. 4.

Inline CSS

CSS is not limited to an external CSS file. Any number of external CSS files can be integrated with HTML link tags and the import rule.

Basically, it is better not to create too many CSS files. Each CSS file is loaded with an HTTP request - this costs additional loading time for the CSS files, especially with mobile devices.

A CSS reset, strict organization and a clean structure help to keep a large CSS file clear.

Link tag for external CSS files

An external CSS file using a link tag in the head element of the page is the first choice if more than one HTML document is to be formatted with the same CSS rules. link tags are declared in the HEAD of the HTML file, but may also appear at the end of the HTML file (in order not to slow down the initial loading of the page if it is not required for displaying the website in the browser: print.css).

<head> <link href="style.css" type="text/css" media="screen" /> … </head> <body> <link href="theme/print.css" type="text/css" media="print" /> </body>

The HTML attribute type instructs the browser to ignore unsupported media types. A web browser should be on the monitor media = "screen" read, but media = "print" to use for printing.

  • The browser should always include everyone rel = "stylesheet" apply the named CSS file as the primary style sheet files.
  • CSS files ending with rel = "alternate stylesheet" are bound in the HTML document, the browser should ignore it until the user or an application activates the style sheet.

The external stylesheet file may only contain CSS instructions.

Import of CSS files in the style tag

Within a style tag, CSS properties are usually noted that apply individually to the current document - i.e. deviations from the general style sheet rules that were integrated for all documents on a website using a link tag.

Using the style tag, for example, stylesheet properties that are only required in some documents on the website can be integrated into the respective pages.

The style tag is in the HEAD of the HTML file and can contain instructions for loading external CSS files as well as direct declarations of CSS properties. An external CSS file is included in the style tag using the @import instruction (the @import instruction may not only appear in the style tag, but also in a CSS file).

The @import rule must always be set at the beginning of the style tag.

<style type="text/css" title="text/css" media="screen"> @import url(/style.css); @import url(/theme/style.css); pre { background-color: silver; border: 1px solid silver; } code { color: blue; } </style>

In the past, @import was not a recommended method for integrating a CSS file, because imported CSS files blocked parallel downloads with the old HTTP / 1.1 protocol. The browser had to wait for the imported files to load before downloading more files.

Today most modern servers use the HTTP / 2 protocol. HTTP / 2 makes things a little easier, and we can bury a lot of the old tricks we used to squeeze the last ounce of load time out of pages.

Under the HTTP / 1.1 protocol, the number of external files loaded in parallel was strictly limited. HTTP / 2, on the other hand, allows multiple requests over a single connection. With regard to the CSS in particular, we can load manageable CSS modules instead of a mighty, unmanageable monster CSS file.

style tag

The style tag is usually set in the HEAD of the HTML page. CSS rules noted here override properties from global CSS files for the individual page.

<style media="projection"> body { font-size: 1.1em; } </style>

With HTML5, the style tag with the attribute scoped be placed in the body element. Then only the rules below the element in which the style tag is noted should apply. However, only Firefox follows this rule. All other browsers apply the rules to all elements of the document.

In the meantime, the scoped attribute has been abolished. With HTML 5.2, a style element is allowed in the body of the page again, but it should not create a disruptive rebuilding of the page.

That CSS styles don't scoped - limited to one area - can be used, makes larger CSS files confusing and is the most insidious of all sources of error in CSS.

A CSS property comes into a bar in Berlin.
A bar stool falls over in a pub in Düsseldorf-Kaarst.

Source: Somewhere on Twitter, but unfortunately forgot the author ...

Inline CSS: style attribute

The HTML attribute style brings CSS properties directly into an HTML tag. This technique is inflexible and is only used in individual cases.

<p style="color: red">Hier darf nicht geflüstert werden!</p>

Changing inline CSS via the style attribute is also part of the basic equipment of Javascript.