Embedding The CSS Styles

1. Embedding The Styles

We have come through all the essential basic selectors and now we will look into how those styles are embedded in an HTML document.

External Styles

External styles are the styles that are added in a separate file, usually in a .css file which then are linked to the HTML document using the <link> tag to apply those styles.

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

And all the styles declared in the files will behave like what we have mentioned in the Selectors section above, namely it will mainly overwrite the default browser’s style, and overwrite to another style declaration depending on the priority level of the selectors.

This practice is the most recommended way to attach the styles, particularly when you have thousands of lines of CSS codes with many pages to attach to.

By doing so, the styles will also be easily manageable, for instance, you can separate the CSS files into several files depending on its specific role, such as typography.css to control all the styles related to Typography and so on.

Internal Styles

The internal styles are the styles that are embedded directly in an HTML document, generally inside the<head> tag.

<head>
    <style type="text/css">
        h1 {
            /** declaration **/
        }
        p {
            /** declaration **/
        }
    </style>
</head>

But this practice is not recommended when you will have hundreds of line of styles as your HTML page will be too long and the style will only affect where the styles are embedded. When you have let say ten pages, you will need to copy those styles and embed them in all the pages and when you need to change the styles you have to change it to ten different pages, which is obviously a tedious task.

Based on its priority level, the internal style is higher, so it will overwrite the external styles.

Inline Styles

Inline styles are the styles that is directly embedded in the HTML element.

<p style="margin: 5px;">This is a paragraph</p>

This example above will add 5px margin to the paragraph element and it will also overwrite the margins that have been declared for that element both in internal and external styles.

But do avoid doing this, as your markup will be cluttered with all those style declarations; if you have a bunch of styles embedded, it will even become a nightmare to see and maintain all your html and styles.

Further readingThree ways to insert CSS – W3CSchools.

2. Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Print Friendly

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>