Introduction
This chapter demonstrates about the Types of CSS i,e inserting the Style sheets in a different ways to the web pages, following are the concepts are covered in this chapter.
- Inline CSS
- Embedded Styles
- External Styles
Description
Inline CSS is the very simplest way to add CSS Styles to the web page but which is an inefficient method. Which can be applied by simply by defining the CSS Style with in the element by using the style attribute. Inline CSS has no selector which can apply to the specific elements only and major disadvantage for Inline CSS is which can not be reused again and for each element user need to define the style settings separately. The code below demonstrates the adding the Inline CSS as shown.
[html]
<!DOCTYPE HTML>
<html>
<body>
<!--Inline CSS applied to the HTML tag -->
<p style="font-family:Verdana; color:#0000FF; background:#eee;">
Simple Programming Lessons.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also add the CSS by the Embedded CSS Which is done by the html <style> element. All style elements are enclosed between the opening and closing <style> tags. <style> tag enclosed between the <head> tags and those styles are applicable to the current page elements only. If user wants to apply the same styles to the entire website Then user need repeat the style on the every web page. The main Disadvantage is the which is very inefficient for the very large web sites The code below demonstrates the Embedded CSS as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<!--Embedded style applied using the Style element-->
<style type="text/css">
p{ font-family:Papyrus, Arial;
color:#0000ff;
background:#eee;}
</style>
</head>
<body>
<p>Simple Programming Lessons CSS tutorial.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
External Styles is the most efficient way to adding styles to the web page in which user can insert the all style definitions on a single plain text file and then link it to the web pages. External style sheets have the .css extension. If user done any changes in the style sheet which should be applied to the all the linked web pages. Thus, which is highly efficient and maintainable.
User can link the external style sheet by using the <link> element inside the <head> element with the URL of the of the style sheet. The code below demonstrates the external CSS file as shown.
[html]
p{
font-family:Verdana, Arial;
color:#0000ff;
border:5px solid #eee;
box-shadow:5px 5px 5px #ccc;
}
[/html]
The code below demonstrates the External style sheets as shown below.
[html]
<!DOCTYPE HTML>
<html>
<head>
<!--External stylesheet linked using the link element-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Simple Programming Lessons CSS Tutorials.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- <style> tags are enclosed in <head> tags.
- Embedded styles are not efficient for large web sites.
- External style sheet highly efficient.