How to include CSS
How to include CSS
CSS is included in HTML pages for formatting the documents based on the information inside a style sheet.
We can add CSS in HTML documents in the following three ways:
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
The Inline style of CSS is used to insert a special style on an individual element or line. The style attribute can be used to style inline on the associated tag or element. It alleviates the benefits of the style sheets. Thus, it is suggested to use the inline method sparingly.
Example:
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;color:green;">Inline Style Sheet</h1> <p style="color:blue;font-size:20px;">This is blue</p> </body> </html>
Advantages of Inline CSS:
- The inline style sheets play a crucial role in the interpretation of minimum number of styles.
- These methods have the capability to override some other techniques of style specification at a local level.
- It has the highest specificity or precedence within a document.
- These styles are quick and easy to insert, and we don’t have to be worried about specifying a proper selector of CSS. Since we are entering various styles on the element, we can wish to change.
- We can insert the attribute of the style, i.e., valid on every element of HTML.
Disadvantages of Inline CSS:
- An Inline CSS method does not separate any information of the style from content.
- Control classes may not be designed to handle multiple types of elements inside the document.
- These methods do not have the capability to be reused.
- These are complicated to edit because these styles can’t be stored at just a place.
- It does not allow to style the pseudo-classes and pseudo-codes in inline CSS.
- Also, it does not allow for browser cache support.
2. Internal CSS
This style sheet can be used when one individual page of HTML has a specific style. All the other elements can be affected by this style of the existing page.
It is specified in the style element or tag in the head part of HTML.
Example of Internal CSS:
<!DOCTYPE html>
<html>
<head>
<style> body { background-color: pink; } h1 { color: blue; margin-left: 80px; } </style>
</head>
<body>
<h1>Internal Style Sheet</h1>
<p>This is blue</p>
</body>
</html>
Advantages of Internal CSS:
- Internal style sheets of CSS affect only the page on which they are present.
- These style sheets may use the IDs and the classes.
- Internal CSS does not require to upload files in a collective form.
- These types of style sheets may contain higher precedence as compared with the external CSS.
- Internal CSS can be used to design specific layout of the page such as CMS template or email form, where the cascading style sheet is included once.
Disadvantages of Internal CSS:
- These style sheets can affect only the page that it belong to.
- The time for page loading may be increased with the use of internal CSS.
3. External CSS
These type style sheets are used to add style on all pages or multiple pages. It is optimal for this situation because it provides us to alter the entire look of the web site documents by altering only one file. Here, we will specify the code of CSS in the CSS file. The extension should be .css like style.css.
External CSS applies <link> element over all the pages. The <link> element must be inserted within the head part of HTML.
Example of External CSS:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
These style sheets can be addressed inside each text editor. However, it should be saved with the .css extension. These files must not include the elements of HTML.
.css file (“mystyle.css”)
body { background-color: pink; } h1 { color: blue; margin-left: 80px; }
Advantages of External CSS:
- One of the main advantages of this CSS style sheet is that it is used on multiple records while being handled from only one style sheet. It improves convenience and efficiency, and also contains code DRY.
- The grouping strategies and selectors are utilized to assemble the styles in distinct circumstances.
- The classes may be written, which can be used in multiple elements types of HTML inside various documents.
Disadvantages of External CSS:
- External CSS may reduce the loading time in a few situations.
- It may not be rational when there is not sufficient styling condition for justifying the external sheets.
- The exterior template should be stacked.
- An additional download is required to import the style data for every document.
- It is not feasible to deliver the document until external sheets are loaded.
Numerous Style sheets
If any property has been described for a similar selector in distinct style sheets, then the value of the end read will be applied.
Suppose that an external CSS has the style for any <h1> element as follows:
body { background-color: lightblue; } h1 { color: orange; }
After that, suppose that an internal CSS has the style for any <h1> element. It is as follows:
h1 { color: navy; }
Example:
If above internal CSS is described after the external CSS link, then this <h1> tag will be “navy”:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle1.css">
<style> h1 { color: navy; } </style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example:
But, if above internal CSS is described before the external CSS link, then this <h1> tag will be “orange”:
<!DOCTYPE html>
<html>
<head>
<style> h1 { color: navy; } </style>
<link rel="stylesheet" type="text/css" href="mystyle1.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
