Cascading Style Sheets – An Introduction
Cascading style sheets (CSS for short) are instructions for the design (“style”) of websites. Together with the HTML code, they make up the appearance of a website. Style sheets are like the “clothes” of a website – without them you only see the bare, unformatted content. As with clothing, a website with different stylesheets can look completely different – even if the HTML and content remain the same.
Cascading style sheets give web designers the opportunity to achieve an appealing design – even with animations – while at the same time maintaining the separation of structure and design. This is an important prerequisite for creating websites that are accessible for people with disabilities and that are optimally perceived by search engines.
In addition to simple design options such as setting the font, size and color, cascading style sheets allow you to change the height of the lines, an indentation and other typographical parameters. The size and placement of elements can also be determined in almost any way. With the help of CSS3 properties, elements can be changed (eg distorted or rotated) and even animations can be generated.
How does it look in action?
A very simple website designed with CSS could e.g. B. look like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Minimale CSS-Seite</title>
<style>
h1 {
font-family: “Courier New”, Courier, monospace;
font-size: 200%;
}
p {
font-family: Verdana, Geneva, sans-serif;
color: #666;
line-height: 1.6;
}
.main {
width: 60%;
margin: 5% auto;
padding: 5%;
background-color: #efefef;
}
.hint {
text-transform: uppercase;
font-weight: bold;
}
</style>
</head>
<body>
<div class=”main”>
<h1>Hallo Welt</h1>
<p>Dieses Dokument wird <span class=”hint”>per CSS</span> formatiert.</p>
<p>Hier kommt ein weiterer Absatz mit etwas Text zum Testen …</p>
</div>
</body>
</html>
Style sheets are usually placed in the header of the website (between the <head> and </head> tags ) (individual CSS instructions can also be noted directly in the HTML tag and it is also possible to import an external file as a stylesheet).
In this example there are four CSS statements: The first two relate directly to HTML elements ( h1 and p ) and define properties for them. A CSS statement (“declaration”) consists of three parts: the selector, which shows which element is to be styled (here e.g. h1 ) and the declaration (the part in the curly brackets), which in turn consists of two Split consists of: the property that is to be changed (here e.g. font-family , i.e. the font) and the desired value (which font is to be used).
Since HTML elements such as p can appear several times in an HTML document, there is the class attribute with which you can define a class for an HTML element yourself, which you can then format using CSS. In the example this is class = “hint” for the element span . So that areas of a website can also be formatted that contain multiple HTML elements, two separate HTML elements were created for CSS, which are only intended to serve as selectors for CSS style instructions: div and span . In contrast to h1, which has a meaning (namely to mark the top heading of a document), these elements are semantically neutral. In the example, a div is used to put the “main” class around the elements h1 and p and to define a common formatting (namely a background color gray, a width of 60% of the side and margins margin to the outside and padding to the inside).
What’s next?
Now you have got a first impression of CSS. You can copy the code from the example to a text file, save it as example.html, and open it in a web browser. Then experiment with the values in the example and see how they change the page in the browser.
If you then want to know more, one of the numerous CSS introductions on the web will help you. B. http://www.webmasterpro.de/coding/article/css-einfuehrung.html or http://wiki.selfhtml.org/wiki/CSS.
The book “Little Boxes” by Peter Müller or as a comprehensive reference work “CSS – the comprehensive manual” by Kai Laborenz is well suited for beginners.