Cascading Style Sheets (CSS) is a programming language that’s useful to determine the design of electronic documents. With the help of simple instructions – presented as clear source code – website elements such as layout, color, and typography can be adapted as is desired. Thanks to the Cascading Style Sheets, the semantic structure and the content of the document remain unaffected. CSS emerged in the mid-1990s and is now considered the standard stylesheet language across the World Wide Web.
Web hosting with a personal consultant!
Fast and scalable, including a free domain and email address, trust web hosting from IONOS!
Free domainSSL24/7 supportCSS, 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 semantically, you define the design of its content using CSS. Although HTML and CSS are used in combination, the CSS design instructions and the HTML elements exist separately from one another. This means that a machine can read an electronic 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 Consortium. For this reason, there are always new functions and practical applications to discover. The widespread 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.
A programming language for the visual design of websites. With Cascading Style Sheets you can determine, for example, the font, size, or color in which to display HTML elements.
A successful 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-structured. Here, CSS offers a range of design options that are not available in pure HTML.
For example, CSS lets you control some specifications centrally. This means that similar elements (such as all hyperlinks or images) within a single document can be recognized and formatted using a single command. The design instructions do not have to be in the form of an internal style sheet in the HTML document itself. If you save the CSS instructions in an external stylesheet, i.e., a separate file, this can also be used for other documents.
In addition to basic display instructions relating to the colors, shapes, and typography of the HTML elements, there are now more sophisticated modules in CSS. With these you can, for example, define animations or different representations depending on the output medium. In this way, the same HTML document can be prepared identically 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 possibilities, but it doesn’t entirely replace CSS.
You can create an appealing website design with the MyWebsite Website Builder, thanks to professional design templates. Choose from a wide range of templates and find a style that works for you in just a few clicks.
A CSS statement determines the values or properties that elements in your electronic document should have. In its basic structure, the instruction consists of a selector and curly brackets. Declarations are listed within the brackets, separated by semicolons. Each declaration consists of the name, a colon, and a specific value. After the final declaration and before the closing bracket, another semicolon can be added, but isn’t mandatory. For example, the CSS instruction in the example below calls for the heading h1 to be displayed in blue and in font size 12:
Further information on the different selector types and on the CSS syntax can be found in our detailed CSS tutorial.
It’s possible to incorporate CSS into an electronic document using internal and external style sheets. In addition, properties 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.
In external style sheets, the CSS instructions are defined in external files via the ending “.css” and integrated 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>This is where you add all CSS instructions 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>As with the internal stylesheet, the CSS instructions are contained in the HTML file. However, there is one important difference: The corresponding attributes are located directly in the start tag of the element and do not apply to any other element. This method is particularly useful if you do not want to make general design instructions.
<!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 examples above show that CSS can only be used in conjunction with a classic HTML structure. Since HTML structures content through paragraphs, lists and tables and CSS takes care of the visual design, the two web languages complement each other and are closely interlinked 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 individual elements sit on top of one another like boxes. Every “box” that takes up space on a website has the following properties:
These “boxes” are then formatted by specifying the size, shape, and color. In addition to these simple attributes, there are more sophisticated CSS instructions for inserting shadows in text, adding filter functions for images and highlighting forms and other elements.
Once you understand the basic principles of stylesheet language, their application is simple enough. Learn more about the top CSS tricks that will make your website look even more professional.
It’s rare to see creative information directly placed into HTML code. Colors, fonts, and sizes of HTML elements are normally defined in style sheets, such as CSS. The more complex a website becomes, the more the range and amount of required CSS files increase. The extra burden can have a considerable effect on your website’s loading time, but this can be avoided by compressing your CSS.
CSS is one of the most important languages in the World Wide Web. But working with the stylesheet language is often unnecessarily complicated, which is why many developers prefer to use Less instead. The CSS preprocessor not only makes writing stylesheet code easier, it also expands CSS with a range of features including variables, functions, and mixins. Our Less tutorial explains how it works.
Mobile Internet presents a challenge for web designers: How should one sensibly design a layout if they don’t know the size of the screen? With CSS Flexbox, designers can create a flexible layout that dynamically and intelligently adjusts to the available space. Our Flexbox tutorial shows how this works.
What are CSS Media Queries? We explain how media queries and responsive web design are related. From breakpoints and relative CSS units to CSS processors and modern CSS utility frameworks – read on to learn more.
If you’ve already got some experience working with CSS and are looking for a particularly flexible and individual framework Tailwind CSS is a great choice. The solution for professionals simplifies work and offers numerous design options. Read on to find out more about the framework and why beginners may fare better using an alternative to Tailwind CSS.
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages