In the previous lesson (CSS Syntax), you’ve learnt how to write basic CSS style rules. But, you’ve not seen the effect of those styles on the webpage. This is because the CSS was not added to the HTML. In this lesson, you’ll learn how to add CSS styles to the HTML.
Methods of adding CSS styles to HTML
There are three different methods to add CSS to HTML. These are-
- Inline style rules
- Embedded style sheets
- External style sheets
Inline style rules
In inline style rules, CSS style rules are written directly inside an HTML element’s opening tag using style attribute.
Creating an inline style
Syntax of inline style rule is as follows-
- After the style attribute there is an equal sign (=) then the style rules are written inside the quotation mark. It could be either single quotation mark or the double quotation mark.
- For some values, you need to use quotation mark. In this case, don’t use the same quotation mark as one is used after the style=. Use single quote in the value and double quote after the style= or vise versa. See the following example-
<h1 style=”font-family:Georgia, ‘Times New Roman’, Times, serif”>Learn web development at Schools of web </h1>
Example of inline style:
<html lang="en">
<head>
<title>Example of inline style sheet</title>
</head>
<body>
<p style="color:#3498db;">Schools of web provides total web learning solution. To start, click the following link to get started with HTML course which is the first step to your path to the web developer.</p>
<a href="http://schoolsofweb.com/category/html-for-beginners/">HTML5 for beginners</a>
<p style="color:#3498db">If you aim to becoming a PHP web developer, then take the following course</p>
<a href="http://schoolsofweb.com/category/php-for-beginners/">PHP for beginners</a>
</body>
</html>
Output:
Why you shouldn’t use inline style rules
You shouldn’t use this method to stylize your webpage, as-
- It mixes HTML with CSS which is not standard practice.
- As inline rules are written in each HTML element, you have to repeat same style code if you want to repeat the style.
- Writing inline style rules takes lots of typing as you have to write same style rule again and again in the same document.
- It makes the style editing process very difficult. Imagine you have many paragraph elements in a webpage and you’ll search each paragraph and make changes the same style rule in every place.
- It increases file size, hence, it makes webpages slower.
Inline style rule scope
An inline style rule is applicable to the HTML element it is declared in.
Internal style sheets
As the name says, internal style sheet is placed inside the HTML document. This method is also called embedded style sheet as styles are embedded in the HTML element.
Creating an internal style sheet
To create an internal style sheet, write the opening <style> tag and closing </style> tag inside the head element and then specify the style rules between those style tags.
Example of internal style:
<html lang="en">
<head>
<title>Example of inline style sheet</title>
<style>
p {
color:#3498db;
}
</style>
</head>
<body>
<p>Schools of web provides total web learning solution. To start, click the following link to get started with HTML course which is the first step to your path to the web developer.</p>
<a href="http://schoolsofweb.com/category/html-for-beginners/">HTML5 for beginners</a>
<p>If you aim to becoming a PHP web developer, then take the following course</p>
<a href="http://schoolsofweb.com/category/php-for-beginners/">PHP for beginners</a>
</body>
</html>
Output:
Same as before
When you should use internal style sheets
- If it is a one page website
- If you just want to test styles one page inside a big site before pasting the style rules in the external style sheet (you’ll learn about it next).
- If you want to see the effect of the style quickly in the browser, then, this method is a time saver as it is written in the same page as the HTML is.
When you shouldn’t use internal style sheets
In a multi-page website don’t use internal style sheet, as-
- For the same visual appearance, you have to write the same style codes in every web page.
- When you want to update a style, you have to update all the pages individually.
- Styling pages with internal style sheet is a time consuming process.
Internal style sheet scope
Style rules that are written in the internal style sheet are only applicable to the entire web page it is declared in.
External style sheets
In this method, style rules are written in an external file. Applying styles to the HTML in this way takes the two steps-
- Creating an external style sheet, and, then
- Attaching that style sheet to HTML documents.
Creating an external style sheet
To create an external style sheet, follow the steps-
- Open a new text document in any editor (ex. notepad, dreamweaver etc.).
- Write your style rules.
- Save it with any name you wish just add .css as the suffix (ex. base.css).
Attaching that sheet to an HTML document
You can add an external style sheet to an HTML document in two ways-
- Using link element: This is not only the better way to attach an external style sheet in the HTML document but it is also the most preferable method to attach style rules to the HTML document. Write the following line inside the head element to include the external style sheet (base.css)-<link rel=”stylesheet” href=”css/base.css” />Link element: Here, link element allows the current HTML document to link with the external style sheet (base.css).
rel attribute: Here, rel=”stylesheet” specifies the relationship between the external style sheet and the HTML document and it tells that the external file is a style sheet.
href attribute: Here, the href attribute specifies the path to the external style sheet. “css/base.css” means that the external file is base.css and it is inside the css folder which is the same directory as the HTML file is. - Using @import directive: You can import an external style sheet using the @import directive inside the style element, like the following example-
<style>
@import url(css/base.css);
</style>
This method is not recommended as it will increase the download time of the webpage.
Example of external style sheets
At first, here is the HTML document you’ll link external style sheet to-
<html lang="en"> <head> <title>Example of inline style sheet</title> <link rel="stylesheet" href="css/base.css" /> </head> <body> <p style="color:#3498db;">Schools of web provides total web learning solution. To start, click the following link to get started with HTML course which is the first step to your path to the web developer.</p> <a href="http://schoolsofweb.com/category/html-for-beginners/">HTML5 for beginners</a> <p style="color:#3498db">If you aim to becoming a PHP web developer, then take the following course</p> <a href="http://schoolsofweb.com/category/php-for-beginners/">PHP for beginners</a> </body> </html>
See in line 4 above, the link attribute is used to add the base.css external style sheet. Now, let’s see the base.css file-
@charset "utf-8";
/* CSS Document */
p{
color:#3498db;
}
Output:
Same as before
When should you use external style sheets
You should always try to use external style sheet (using link element) to add CSS to your web page, as-
- You’ll write a style rule once and it will affect all the webpage it is linked to.
- It is easier to update your style rule, as you’ll change in the external file once and it’ll affect all the pages it is linked to.
- As all the webpages uses the same style sheet, the website gets a consistent look.
- A website that uses external style sheet loads faster. When a visitor visits a website that uses external style sheet, the browser downloads both HTML and the external style sheet. The browser saves that CSS file in its cache. Later, when the visitor clicks other pages of that website that uses the same external file, the browser doesn’t download the CSS file again, instead it uses it from its cache.
- And, last but not least, applying CSS to HTML using external style sheet is the best practice.
When shouldn’t you use external style sheets
- You shouldn’t use @import directive method as it will increase the download time of the page.
- If you just want to test visual appearance of a particular page, then, you shouldn’t use external style sheet for this purpose. Instead, use inline style sheet.
External style sheet scope
Style rules specified in the external style sheet are applicable to all the webpage it is linked to.
Organizing your external style sheets
External style sheets are stored inside a separate folder named. There is no any defined rule for the folder name, but you usually coders name the folder as CSS or style.
Also, you can use more than one external style sheets for one website. Name your style sheets according to what it does-
- If the site is small, you may use only one style sheet with the name style.css. The file structure might look like this-
- If the site is a large one, you can create multiple CSS files.
- The style sheet that contains common style rules for all pages or majority of the pages can be named as global.css or main.css or base.css etc.
- You can create one separate style sheet for each sub section of your site. For example, your ecommerce site may have these css files – manufacturer.css (for the product manufacturer page), product.css (for the product displaying page), review.css (for the customer review page), affiliate.css (for the affiliate page) etc.
See the following image-
- One important thing to remember (especially if you’re a newbie) is that the URLs you’ll mention inside an external style sheet are relative to the CSS file. For example, to refer logo.png image which is inside the “image” folder in the root level (see the above image), use the following relative URL in the related CSS rule-
“../image/logo.png”