How do I write perfect CSS

CSS for Beginners - Creating a Style Sheet

With a stylesheet you separate CSS and HTML without losing the logical connection. The advantages: less writing effort, more clarity and faster loading times.

Note: In preparation for everything that comes next, create a new, empty text file and save it as "stylesheet.css" in the same directory as your HTML file.

Combine HTML and CSS

In part 1 of this series of articles, you wrote CSS in the style attribute within an HTML tag. This made the connection between CSS and HTML clear: “This CSS instruction applies to this HTML tag”.

However, this becomes inconvenient at the latest if you need the same instruction more than once. Consider this example:

<html>

<body>

<h1 style=“font-family: Arial; font-size: 30px; color: red;“>Überschrift</h1>

<p style=“font-family:Arial; font-size: 16px; color: black;“>Erster Absatz</p>

<h2 style=“font-family: Arial; font-size: 24px; color: orange;“>Zweite Überschrift</h2>

<p style=“font-family: Arial; font-size: 16px; color: black;“>Zweiter Absatz</p>

</body>

</html>

Avoid repetitions

This code contains a lot of redundant repetitions; in addition, it has become very confusing. The code for the two headings has the same "font-family" setting and the CSS code for both

tags is completely identical. This knowledge can also be formulated in CSS with so-called CSS rules.

A CSS rule always looks like this:

Selector {property: value; }

A selector selects HTML elements for which the following properties should apply. The simplest form of selectors is the name of the HTML tag, in this case for example “p”, “h1” and “h2”.

The part inside the curly brackets is exactly what you have written in the style attribute so far. You can just put anything inside the quotation marks after style = copy and paste in the curly brackets.

You can now insert the CSS rule for the two

tags into the empty "stylesheet.css" file:

p {font-family: Arial; font-size: 16px; color: black; }

This CSS rule says that the properties in the brackets apply to all

tags.

You will have advantages later if you format it a little more neatly:

p {

font-family: Arial;

font-size: 16px;

color: black;

}

The browser doesn't really care whether you write CSS in a way that is easy for people to read or not. However, for later changes or troubleshooting, it is better to pay a little attention to the shape.

Clean up HTML

Now you don't need the CSS in the style attributes for the

tags. If you repeat the same steps for the two headings, the HTML code will now look very clean again:

<html>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

The "stylesheet.css" file contains this code:

p {

font-family: Arial;

font-size: 16px;

color: black;

}

 

h1 {

font-family: Arial;

font-size: 30px;

color: red;

}

 

h2 {

font-family: Arial;

font-size: 24px;

color: orange;

}

Load external stylesheet

In order for this to work at all and for everything to look the same as before, you have to carry out one decisive last step: the stylesheet has to be loaded. This happens with a tag (not to be confused with the anchor !).

belongs in the header of the HTML document, i.e. between and .

<html>

<head>

stylesheet href =stylesheet.css>

</head>

<body>

<h1>Überschrift</h1>

<p>Erster Absatz</p>

<h2>Zweite Überschrift</h2>

<p>Zweiter Absatz</p>

</body>

</html>

In addition to the order, there is another big advantage for this separation of CSS and HTML: You can build additional HTML pages and load the same stylesheet there. Since the browser has the first loading of the stylesheet in the cache, you even save loading time.

CSS selectors are the most complex part of CSS, and go way beyond what you've read in this tutorial. If you want to know more, we recommend the CSS section of SELFHTML: https://wiki.selfhtml.org/wiki/CSS

Would you like to use CSS for your own website?

To the STRATO hosting packages

Summer promotion at STRATO

Our summer promotion brings you a wave every two weeks with a new offer for the basic hosting package. You are currently getting the package at a discounted rate with an additional SSL flat rate - until the next wave on June 16.

To the summer campaign