How can I convert this to CSS

Embed CSS (Cascading Style Sheets) in HTML pages

There are several ways of integrating CSS instructions into an HTML page.

We want to include the following CSS statements in different ways. In anticipation of what these two CSS statements “do”. The following CSS statements cause heading h1 to be displayed with the font color red and the background color black.

You should definitely know all 3 variants, also in order to be able to analyze foreign HTML-CSS pages.

3 ways to integrate CSS

There are 3 ways to combine HTML and CSS:

  1. directly in the source code
  2. at the beginning of the HTML file
  3. outsourced in an extra CSS file (this is the best way to do it!)

The second variant is practical for learning. The CSS instructions are integrated directly into the HTML file and it can be tested quickly. But the third variant is better.

For website development the third variant is recommended. There the CSS instructions are stored in an external file and only a link to this CSS file is then included in each HTML page.

Variant 1: Command directly in the source code

Directly in the source code, the command only works at this specific point on the page so that you can use different designs.


The heading is shown in red.

Of course, the commands can also be combined.

In addition to the foreground color, there is now the background color:

Here, of course, the question is justified, why not create the design with the (outdated) attributes of the HTML commands? The logic of the matter becomes clear when you outsource these format definitions (see variant 3 below). In this way, for example, an instruction can be created that then applies to everyone without having to specifically intervene in the HTML TAG. As a result, the design is placed over the entire website, regardless of how many individual pages there are.

Variant 2: at the beginning of the HTML file

The CSS properties are defined in the header of the HTML file. These then affect the entire HTML document.

Variant 3: Outsourcing CSS commands

2 things are required for outsourcing. First a new file, I call it design.css (but can also be called anything else) and second, a reference to it in the HTML file that is to use this swapped-out file.

Reference in the HTML file:

This reference should be entered in the section of the HTML file.

Now we create a new file with the name "design.css", which has to be in the same directory as the HTML file!

Content of the "design.css" file:

It is essential to pay attention to spaces, and the curly brackets are used here as brackets! So, save the CSS file and call up the preview for the HTML file in the HTML editor.

The headline should now be displayed in red on a black background.

It's that easy to incorporate design into HTML files using CSS.

Recommend • Social Bookmarks • Thank you

If you find a bug, please let us know (regardless of whether spelling mistakes or errors in content).

With a mouse Mark the faulty point and take over with the following button:

After submitting it comes here feedback! Please do not send twice. Thanks.