Embed CSS in HTML 5 - that's how it's done
Related Videos: Learn HTML5 and CSS3 From Scratch - Full Course (May 2024).
You can easily integrate CSS in HTML 5. Because if you want to make your HTML and XML documents more graphically appealing, Cascading Style Sheets (CSS) is a good choice. The formatting language offers you numerous options to visually enhance your websites. There are basically three different ways of integrating CSS into HTML 5. We will show you this in this practical tip.
CSS in HTML 5: Option 1 - Outsource CSS file
The first option is to move the CSS to a separate file. This offers numerous advantages: The stylesheets not only affect a single page, but are automatically used in every HTML5 page. The main advantage is the central administration. You can quickly implement changes on all pages. How to embed a CSS file in HTML 5:
- Create a new CSS file.
- In the head area, refer to your CSS file. In this case the file was named style.css - but the naming is of course individual:
- You should save the style.css file in the main directory of the web server.
- You have successfully integrated your CSS file into HTML 5.
CSS at the beginning of your HTML 5 file
If you do not want to create an outsourced CSS file, you can also set the CSS properties in the header of your HTML 5 document. These then only affect this HTML 5 file, not for all HTML 5 pages.
- Open your HTML 5 document
- Insert the following command in the head area:
- Now define the desired properties: This can be, for example, the size of the headings, the color of the text, etc. Use the familiar CSS commands for this.
- Close the command after entering the properties with.
- The specified properties are adopted for this HTML 5 document.
CSS inline style: use commands directly
The last way to integrate CSS in HTML 5 is inline style. This means that you enter your commands directly in the source code.
- Go to the point where you want to change the graphic display.
- Enter the CSS commands directly. For example, this may look like this:
A blue subheading
- The property is only used for this command.