When it comes to websites, it’s not just the content that counts, but also its presentation. The style sheet language CSS is commonly used to format HTML appropriately. In this way, attributes such as layout, colour, and shape of the individual HTML elements are defined. The CSS design instructions exist independently of HTML and must also be integrated into an electronic document.
Web hosting with a personal consultant!
The host with the most: fast and scalable, including a free domain for one year and an email address. Trust web hosting from IONOS!
DomainSSL24/7 supportLinking CSS to HTML is possible with internal or external style sheets. With internal style sheets, the CSS instructions are located inside the HTML document. You can then integrate CSS at the beginning of the HTML file or place it in the source code. With this method, a good basic understanding of HTML and its syntax is an advantage. The most common and cleanest way to develop websites is to use external CSS style sheets. The CSS is integrated by linking the HTML document with an external CSS file. The following is an overview of the three methods:
The IONOS MyWebsite Website Builder includes a wide range of design templates so you can create a professional-looking website.
With this method, the design instructions are integrated directly into the source code using a style tag. The desired properties are only assigned to one element, so that deviating designs are possible throughout the HTML document. In the example below, the heading h1 is to be displayed in blue and font size 14:
<h1 style="color:blue; font-size:14px;">This is a headline</h1>With this type of integration, many of the advantages of CSS are lost. This includes the option to define a single command that then applies, for example, to all h1 elements in the HTML document. In some circumstances, there’s also a greater maintenance effort, because direct intervention in the HTML code is required.
Here, you include CSS in the header of your HTML document. The style tag thus becomes part of the head element and applies to the entire file. The design instructions are contained in the document but are separated from the HTML code. In the example below, the same command applies as in the previous example. This time, however, all h1 headings in the file should be formatted according to the information.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph</p>
</body>
</html>This is possibly the best method to link CSS to HTML. A website often consists of many pages, so it makes sense to save design instructions in a separate file. This enables a clean separation between content and design and eases maintenance. The exported file is simply linked to the HTML document. You save the external stylesheet with the extension .css and then use a link tag to include it in your HTML file. In the following example, the CSS file is named stylesheet.css.
<!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>The rel attribute defines the logical relationship type; and href refers to the CSS file to be embedded. Note that the link element can take on other attributes. With media = "print" you specify, for example, that the stylesheet is only used in the print view. The external stylesheet does not contain any HTML tags, just the respective selector and curly brackets with the declarations as in the following example:
h1 {
color: blue;
font-size:14px;
}Discover the best CSS tricks to optimise the design of your web project or trust our MyWebsite Design Service for professional results.
It’s rare to see creative information directly placed into HTML code. Colours, 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.
Responsive typography is a much-neglected aspect of responsive web design, but it’s actually surprisingly easy to create a responsive design for both headlines and main text. So what’s the secret? Find out in part three of our series, as we give you a run-down of the implementation of a responsive font and share tips on how to embed CSS commands into your web presence.
How can you create a nice-looking layout if you don’t know the size of the display area? With CSS Grid, it’s no problem at all! The technology allows web designers to define their own grid and then place all elements within it. Thanks to automatisms and smart functions, the CSS Grid Layout adapts dynamically to different displays.
Provide powerful and reliable service to your clients with a web hosting package from IONOS
