CSS Documents
CSS Documents
In this tutorial, we’ll teach you how to add CSS documents to your HTML5 file. Before we start discussing different methods for attaching CSS documents in your code, we assume that you already know HTML basics. Without any ado, let’s dive into different methods for embedding CSS.Attaching CSS Documents in HTML5 File
You are free to attach CSS as a separate file to prevent your code from becoming lengthy or embed it inside your HTML document. There are three different ways of attaching CSS to your HTML document.CSS Documents Using Inline Style
In this method, you can use the style attribute inside the HTML tag to decorate a specific element.CSS Documents Using Embedded Styles
In this method, we embed the style element inside the <header> tag.CSS Documents Using External Style Sheets
In this method, we use <link> element inside our HTML5 document to include external CSS file in our document. It is worth mentioning here that the inline style has the highest precedence. If you define the style for an HTML element through both embedded and external style, your browser will online compile the style rule defined in the embedded style.Inline Styles
Inline styling is easy to apply as you can place CSS style rules directly into the HTML element. It can be applied to any HTML tag by placing the style attribute inside the tag. In the style attribute, we can write as many CSS property and value pairs as we want. Each “property: value” pair is separated by another with a semicolon, just like you specify rules in other methods. However, all the style rules must lie in the same line. It means there must be no break or semicolon between the styles as depicted in the code below: <h1 style="color:blue; font-size:large" > decorate my heading </h1> <p style="color:brown; font-size:40px"> This is my first parapgrpah</p> <div style="color:chocolate; font-size:19px"> Here is my text </div> Inline styling is not a good practice to style HTML elements as it makes your code difficult to read and eliminates the purpose of using CSS.Embedded CSS Documents
Embedded style sheets only style the HTML elements of a file in which they are applied. That means you cannot reap the benefits of the famous coding methodology “Write Once and Use Everywhere.” Embedded style sheets are enclosed between the <head> tag and are introduced with the aid of the <style> tag. You can apply many stylings to your HTML document, but they must be lie between the <head> tag.Example
<!DOCTYPE html> <html> <head> <style> body{ background-color: crimson; } p{ color:darkblue; } </style> <title>CSS Documents</title> </head> <body> <p> This is my first parapgrpah</p> </body> </html> The output of this code will be
External Style Sheets
The best way to apply one CSS to different HTML pages is using external style sheets. With this approach, you can save your time and frustration. For this reason, this approach is widely used by seasoned developers. While using an external style sheet, you define all the CSS rules in one document and then link it from any HTML file on your site. With external style sheets, you can alter the appearance of an entire website by just doing some modifications in one CSS document. body{ background-color: crimson; } p{ color:darkblue; } All you need to do to link the external style sheet to your HTML file is to add <link> tag between the <head> section as depicted in the code below:Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>CSS Documents</title> </head> <body> <p> This is my first parapgrpah</p> </body> </html> The output of this code will be
Importing External Style Sheet
@import is another method to add external style sheets to your HTML document. The @import statement tells the browser to load an external style sheet and apply all its styles. You can apply it by using two different methods. The simplest way is to place it within the head section. Furthermore, you can apply other CSS rules in the <style> element. <style> @import url("css/style.css") p{ color: blue; border:1px solid red } </style> Similarly, you can import another stylesheet within the stylesheet. <style> @import url(“style.css”) p{ color: blue; border:1px solid red } </style>Example
<!DOCTYPE html>
<html>
<head>
<style>
@import url(“style.css”);
p{
color:blue;
border:1px solid red;
}
</style>
</head>
<body>
<p> This is my first parapgrpah</p>
</body>
</html>
The output of this code will be
To practice CSS reference styling, read our CSS tutorials.