Cascading Style Sheets (CSS) is a pro­gram­ming language that’s useful to determine the design of elec­tron­ic documents. With the help of simple in­struc­tions – presented as clear source code – website elements such as layout, colour, and ty­po­graphy can be adapted as is desired. Thanks to the Cascading Style Sheets, the semantic structure and the content of the document remain un­af­fected. CSS emerged in the mid-1990s and is now con­sidered the standard stylesheet language across the World Wide Web.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

What is CSS?

CSS, just like HTML, is one of the core languages of the World Wide Web. While you add text to a website using HTML and structure it se­mantic­ally, you define the design of its content using CSS. Although HTML and CSS are used in com­bin­a­tion, the CSS design in­struc­tions and the HTML elements exist sep­ar­ately from one another. This means that a machine can read an elec­tron­ic document even without CSS. With the help of CSS, browser content is visually prepared and presented in an appealing way.

CSS is a ‘living standard’ that continues to be developed by the World Wide Web Con­sor­ti­um. For this reason, there are always new functions and practical ap­plic­a­tions to discover. The wide­spread stylesheet language emerged in the 1990s. The idea of using stylesheets to display web content was no longer entirely new at that time. But CSS differed in one important aspect from other display-oriented elements that already existed in HTML: users now had the option to define design rules for groups of elements across multiple documents and in a single stylesheet.

Defin­i­tion: CSS (Cascading Style Sheets)

A pro­gram­ming language for the visual design of websites. With Cascading Style Sheets you can determine, for example, the font, size, or colour in which to display HTML elements.

Ad­vant­ages and areas of ap­plic­a­tion of CSS

A suc­cess­ful website doesn’t just depend on content, but also on a good design. Users quickly lose interest in websites that aren’t user-friendly or well-struc­tured. Here, CSS offers a range of design options that are not available in pure HTML.

For example, CSS lets you control some spe­cific­a­tions centrally. This means that similar elements (such as all hy­per­links or images) within a single document can be re­cog­nised and formatted using a single command. The design in­struc­tions do not have to be in the form of an internal style sheet in the HTML document itself. If you save the CSS in­struc­tions in an external stylesheet, i.e., a separate file, this can also be used for other documents.

In addition to basic display in­struc­tions relating to the colours, shapes, and ty­po­graphy of the HTML elements, there are now more soph­ist­ic­ated modules in CSS. With these you can, for example, define an­im­a­tions or different rep­res­ent­a­tions depending on the output medium. In this way, the same HTML document can be prepared identic­ally for all possible media. Since the content and design are separate in this document, the code of the website is clearer. The related style language SASS offers even more pos­sib­il­it­ies, but it doesn’t entirely replace CSS.

Tip

You can create an appealing website design with the MyWebsite Website Builder, thanks to pro­fes­sion­al design templates. Choose from a wide range of templates and find a style that works for you in just a few clicks. Prefer to hand your website design to the pro­fes­sion­als? In that case, the IONOS Website Design Service is a great al­tern­at­ive.

The structure of a CSS statement

A CSS statement de­term­ines the values or prop­er­ties that elements in your elec­tron­ic document should have. In its basic structure, the in­struc­tion consists of a selector and curly brackets. De­clar­a­tions are listed within the brackets, separated by semi­colons. Each de­clar­a­tion consists of the name, a colon, and a specific value. After the final de­clar­a­tion and before the closing bracket, another semicolon can be added, but isn’t mandatory. For example, the CSS in­struc­tion in the example below calls for the heading h1 to be displayed in blue and in font size 12:

Image: CSS statement: Representation of basic structure
A CSS statement consists of a Selector and a De­clar­a­tion with prop­er­ties and cor­res­pond­ing values.
Note

Further in­form­a­tion on the different selector types and on the CSS syntax can be found in our detailed CSS tutorial.

How to integrate CSS in your website?

It’s possible to in­cor­por­ate CSS into an elec­tron­ic document using internal and external style sheets. In addition, prop­er­ties can be placed directly in the HTML source code of an element using the inline style. In the following, we provide an overview of the three methods to integrate CSS in HTML.

External style sheets

In external style sheets, the CSS in­struc­tions are defined in external files via the ending ‘.css’ and in­teg­rated into the HTML file via a ‘link’ tag. This is the most common method because the content and design are neatly separated and changes can easily be made. The link is made in the ‘head’ area of the HTML document as follows:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>

Internal style sheets

This is where you add all CSS in­struc­tions into the HTML file. Please note that these only apply to the relevant document. For internal style sheets, insert the ‘style’ element in the ‘head’ area of the HTML document as follows:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>

Inline style

As with the internal stylesheet, the CSS in­struc­tions are contained in the HTML file. However, there is one important dif­fer­ence: The cor­res­pond­ing at­trib­utes are located directly in the start tag of the element and do not apply to any other element. This method is par­tic­u­larly useful if you do not want to make general design in­struc­tions.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>

The in­ter­ac­tion of CSS and HTML

The examples above show that CSS can only be used in con­junc­tion with a classic HTML structure. Since HTML struc­tures content through para­graphs, lists and tables and CSS takes care of the visual design, the two web languages com­ple­ment each other and are closely in­ter­linked this way. Writing cascading style sheets often revolves around designing ‘boxes’. The structure of an HTML document is based on the nesting principle, in which the in­di­vidu­al elements sit on top of one another like boxes. Every ‘box’ that takes up space on a website has the following prop­er­ties:

  • padding: The space sur­round­ing the content of an element
  • border: The line that sits just outside of the padding
  • margin: The space outside of the border
Image: CSS box model: Basic structure with ‘padding’, ‘border’ and ‘margin’
Website structure in HTML document with padding, border and margin that can be visually modified using CSS.

These ‘boxes’ are then formatted by spe­cify­ing the size, shape, and colour. In addition to these simple at­trib­utes, there are more soph­ist­ic­ated CSS in­struc­tions for inserting shadows in text, adding filter functions for images and high­light­ing forms and other elements.

Note

Once you un­der­stand the basic prin­ciples of stylesheet language, their ap­plic­a­tion is simple enough. Learn more about the top CSS tricks that will make your website look even more pro­fes­sion­al.

Go to Main Menu