There are several ways to integrate the CSS statements in an HTML page.
You should take a look at the 3 variants (to be able to analyze foreign HTML CSS pages).
The 3 variants to integrate CSS
The following three options to combine HTML and CSS:
1 directly in the source code
2 at the beginning of the HTML file,
3 excluded to external CSS file
With the second variant you will learn the most skill. There, the CSS instructions are included directly in the HTML file, and can be tested quickly.
For developing websites the third variant should be used. There, the CSS statements in an external file are stored and this file is then integrated into any HTML page.
Option 1: command directly in the source code
Right in the source code of the command acts only at this particular location on the page, so you can use different designs.
Example: <h1 style="color : red ;"> heading </ h1>
The title is shown in red.
Of course, the commands can also be combined.
In addition to Foreground color we will add the background color:
<h1 style="color : red; background-color : black;"> heading </ h1>
Here of course it is legitimate to ask, why use the (deprecated) attributes of the HTML commands to create the design? The logic of the matter is clear, if you outsource these style definitions (see Option 3 below). This can then, for example, be an instruction which apply to all <h1>of your website.
Version 2: At the beginning of the HTML file
In the head section of the HTML file, the CSS properties are defined. These then act on the whole HTML document.
<! DOCTYPE html> <html lang="en"> <head> <style type="text/css"> h1 {color: red; background-color: black; } </ Style> </ head>
Variant 3: outsourcing of CSS commands
For exporting two things are needed. First, a new file, I call this design.css (can also be any different name) and second, a reference to it in the HTML file to use this outsourced file.
Reference in the HTML file:
This reference should be entered in the head section.
<link href="design.css" type="text/css" REL="stylesheet">
So, now we create a new file with the name "design.css" which must be in the same directory as the HTML file!
Reply
