When the browser reads the format file (stylesheet), it will format the HTML text according to the information in that format file.

3 ways to add CSS

There are 3 ways to add formatting files to HTML documents.

1. Internal file format
2. External format file
3. In-line

External format file

With an external style sheet, you can change the look of the whole website, just change a single file, Each page will have a reference to this external file in the element. located in the section .

External format files can be written on any editor, contain no HTML elements and must be saved with the .css extension.

Here is an example of a section in the style sheet file.

 body { 
  background-color: lightblue; 
 } 
 
 h1 { 
  color: navy; 
  margin-left: 20px; 
 } 

Note: Do not add spaces between property values ​​and units (like this margin-left: 20 px ;). but must write like this: margin-left: 20px;

Internal file format

This file should be used when each page has a different format, defined by element

Inline format

This format should be used if a specific format is applied to a particular element. To apply, add style attributes to related elements, style attributes can contain CSS properties. The example below shows how to change the color and align the element

.

Title

Many file formats

If multiple properties are defined for the same selector in different format files, the value can be used from the latest style sheet reading. Assume a style sheet in addition to the element format

as follows:

 h1 { 
  color: navy; 
 } 

then an internal style sheet format for the element

like this:

 h1 { 
  color: orange; 
 } 

If the internal format is defined after the path to the external style sheet, the element

will be orange.

But if the internal format is predefined, the element

There will be navy blue.

Order of stratification

What type of format should I use when there is more than one type for an HTML element? Often the order of application of the format follows the hierarchy from high to low as follows:

1. Inline format (inside HTML elements)
2. Internal and external format files (in the head section)
3. Browser default

The inline format (within the HTML element) is of the highest priority, ie it can override the format defined in the tag or external style sheet file or browser default value.

Previous article: Syntax and Selector in CSS

The following article: Colors in CSS