Buzz
By embedding and inserting CSS into HTML documents, we can use style sheets to define the layout of HTML documents. Check out the following article by Mytour to learn how to insert CSS into HTML documents.
Embedding and Inserting CSS into HTML Documents
1. Embedding and Inserting CSS into HTML Documents
There are various ways to embed and insert CSS into HTML documents, including:
Inserting CSS directly into HTML documents (Inline CSS)
We can define Inline CSS rules by using the 'style' attribute of HTML elements. Inline style rules apply only to the specified HTML element.
To specify multiple CSS rules, we use semicolons to separate the rules. These rules are set using the 'style' attribute along with the property name and value.
- Example of Inline CSS:
In the example above, Mytour applies Inline CSS to the p element (element containing text) and applies 2 style rules, including color for the specified text in red and text alignment to center.
Internal CSS
Internal CSS is placed within the (HEAD) tag and declared within the 'style' tag. This style is only applied to the HTML document it is embedded in.
- Example of Internal CSS:
In the example above, Internal CSS is placed within the head tag. The provided CSS will be applied to the body section and all p (paragraph) tags on this webpage.
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 extension .css, and then add this CSS file to the head element in the HTML document.
This is the most common method to embed and insert CSS into HTML documents. Using this approach, we can write CSS for multiple different web pages and add the same CSS file to all pages.
- Example of External CSS:
In the above example, External CSS is placed within the head tag. The offline CSS rules (External CSS) will be applied to the HTML elements on the Mytour page as well as on other web pages embedding External CSS.
Import CSS
In addition to the methods of inserting CSS into HTML mentioned above, we can import one stylesheet into another by using the @import rule.
There are 2 ways to import a stylesheet file: the first method is using the head tag in the HTML document, and the other method is importing it into a CSS file.
Imported CSS in the head tag
We can import a CSS file into the style tag using the @import rule. However, this method is not very useful.
Example:
Importing a stylesheet into another stylesheet
Using the @import rule to import one stylesheet into another helps us manage large CSS code while speeding up the loading process through browser cache memory.
Note: @import must be placed before all other content in your CSS file.
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 above example, the main CSS file contains several additional CSS files.
2. How to Apply CSS in HTML Documents?
Different websites apply various methods of inserting and embedding CSS, depending on their requirements.
- If you want to apply CSS to multiple different websites, you can choose External CSS.
- Additionally, you can use Internal CSS when applying CSS to various HTML elements on the same page.
- If you want to override or add CSS to any HTML element, you can opt for Inline CSS.
In this CSS tutorial, Mytour has just guided you on how to embed and insert CSS into HTML documents. In the upcoming lessons, Mytour will further introduce you to colors in CSS.
