How to embed and insert CSS into HTML documents


In the previous CSS lesson readers read along with Taimienphi.vn to learn about syntax and selector in CSS, in the next lesson below, Taimienphi.vn will introduce you some ways to embed and insert CSS into HTML documents. .


Equal How to embed and insert CSS into HTML documents, we can use style sheet files to define the HTML document layout. Refer to the following article of Taimienphi.vn to learn how to insert CSS into HTML document.

How to embed and insert CSS into HTML documents

1. How to embed and insert CSS into HTML documents

There are many ways to embed and insert CSS into HTML documents, including:

Insert CSS directly into HTML documents (Inline CSS)

We can define Inline CSS rules by using the “style” attribute of the HTML element. Inline style rules are only applied to defined HTML elements.

To specify multiple CSS rules, we use semicolons to separate rules. These rules are set using the “style” attribute followed by the attribute name and the value.

– Inline CSS example:

how to insert css into html document 2

In the example above, Taimienphi.vn applied Inline CSS to the element p (the element containing the text), and applied two types of rules including the color for the specified text in red and align the text to the center.

Inline (Internal CSS)

Internal CSS is placed in the tag (HEAD) and declared in the “style” tag. This style is only applied to HTML documents to which it is embedded.

– Example of Internal CSS:

how to insert css into html document 3

In the example above, Internal CSS is placed in the head tag. The given CSS will be applied in the body and all p (paragraph) tags on this site.

how to insert css into html document 4

Offline (External CSS)

In External CSS, we use the “link” element to add external style sheet files to the HTML document.

First we create rules in a separate file with the .css extension, then add this CSS file to the head element in the HTML document.

This is the most common method for embedding, inserting CSS into HTML documents. This way we can write CSS for many different websites and add the same CSS file for all pages.

– Example of External CSS:

how to insert css into html document 5

In the example above, External CSS is placed in the head tag. Offline CSS rules (External CSS) will be applied to HTML elements on the Taimienphi.vn page as well nIn External CSS like on External CSS insertion sites.

Import CSS

In addition to the ways of inserting CSS into the HTML document above, we can import (import) a stylesheet file into another stylesheet file using the @import rule.

There are two ways to import stylesheet file, the first is to use head tag in HTML document and the other is to import into CSS file.

Imported CSS in head tags

We can import CSS files into style tags using the @import rule. However, this way is not very helpful.

For example:

how to insert css into html document 6

Import stylesheet into another stylesheet

By using the @import rule to import stylesheets into other stylesheets we can manage large CSS code, and the loading process is also faster through the use of browser cache.

Note: @import must be placed before all other content in your CSS file.

For example:

@import url (‘/ css / stylesheet-1.css’);

@import url (‘/ css / stylesheet-2.css’);

@import url (‘/ css / colors.css’);

p {color: blue; font-size: 14px; }

h1 {font-weight: bold; color: black; }

In the example above, the main CSS file contains many other secondary CSS files.

2. How to apply CSS to HTML documents?

Different websites apply different methods of inserting and embedding CSS, depending on the requirements.

– If you want to insert, embed CSS for many different websites, you can choose External CSS.

– You can also use Internal CSS if you apply CSS to many different HTML elements like on the same page.

– If you want to override or add CSS to any HTML element, you can choose Inline CSS.

https://thuthuat.taimienphi.vn/cach-nhung-chen-css-vao-tai-lieu-html-48837n.aspx
The above CSS lesson Taimienphi.vn has shown you how to embed and insert CSS into HTML documents. In the next lessons, Taimienphi.vn will introduce you further color in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *