Login With Github

How To Create CSS

The browser formats the HTML document according to the loaded style sheet.Browsers parse style sheets very quickly.

How to insert a style sheet in the HTML document

There are 3 ways to insert a style sheet in an HTML document:

  • External style sheet
  • Internal style sheet
  • Inline style sheet

External style sheet

When styles need to be applied to many pages, external style sheets will be the best choice.In the case of using an external style sheet, you can change the appearance of the entire site by changing one file.

External style sheet is defined by <link> tag, and the <link> tag is defined in the <head> tag. For example:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

The browser loads the style rules from the style.css file and formats the HTML document according to it.

External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheet files should be saved with a .css extension. Here is an example of a style sheet file:

hr {
    color:sienna;
}

p {
    margin-left:20px;
}

body {
    background-image:url("/images/back40.gif");
}

Internal style sheet

If you need to define a special style for a single HTML document, you should use an internal style sheet.The internal style sheet is defined by the <style> tag in the <head> tag.For example:

<head>
<style>
hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}
</style>
</head>

Inline style sheet

You can define the inline style directly in the style attribute of the HTML element.For example:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Mixing styles and HTML documents will not only greatly reduce the readability of the code, but also lose some of the advanced features of the style sheet.

Multiple styles

If some style attributes are defined in the same selector in different style sheets, the attribute values will be taken from the last read style sheet.

For example, the h3 selector in style.css file defines the red font:

h3 {
    color: red;
}

At the same time we define the blue font for the h3 selector in the internal style sheet:

h3 {
    color: blue;
}

If the internal style sheet is defined after the external style sheet, the final color of <h3> element will be blue:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h3 {
    color: blue;
}
</style>
</head>

If the external style sheet is defined after the internal style sheet, the final color of <h3> element will be red:

<head>
<style>
h3 {
    color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

0 Comment

temp