There are three ways of applying CSS to your web pages .
Inline style - This form of style is written directly into the element .style attribute is used inside the element for this purose .
e.g.
<p style="color: green;">Hey , You ! . Where art thou ?</p>
This style is not preferred for practical purposes as it lacks flexibility . Though , it is used for testing purposes as to check the effects of different styles on an element .
Embedded style - CSS is embedded within the html document .CSS code is placed inside the <head> element of the file . <style> element is used for this purpose with text/css type .
Using the example from XHTML tutorials
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Movies Freak</title>
<style type="text/css">
/* CSS Code */
</style>
</head>
<body>
</body>
</html>
Though the CSS rules in this case are applicable only on the single page in which this code is embedded .
External style sheets - In this case a single style sheet defines the presentation of large number of pages .Separate file is used to define the CSS rules . <link> element is used to reference the pages .
If you did create a folder with the name of Movie Freak and placed all files of xhtml tutorials in it ,then , create a new notepad file and rename it learn.css .
To access this file :
<link rel="stylesheet" href="basic.css" type="text/css" />
rel - relationship . This specifies that the link points to a CSS file .You'll have to specify the relative path if the CSS file is in any other folder .
We created this unordered list of links in our XHTML tutorials .
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
To style them :
ul a {
color: green;
font-size: larger;
}
ul a - Selects anchor elements <a> specified inside an unordered list .
Inline style - This form of style is written directly into the element .style attribute is used inside the element for this purose .
e.g.
<p style="color: green;">Hey , You ! . Where art thou ?</p>
This style is not preferred for practical purposes as it lacks flexibility . Though , it is used for testing purposes as to check the effects of different styles on an element .
Embedded style - CSS is embedded within the html document .CSS code is placed inside the <head> element of the file . <style> element is used for this purpose with text/css type .
Using the example from XHTML tutorials
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Movies Freak</title>
<style type="text/css">
/* CSS Code */
</style>
</head>
<body>
</body>
</html>
Though the CSS rules in this case are applicable only on the single page in which this code is embedded .
External style sheets - In this case a single style sheet defines the presentation of large number of pages .Separate file is used to define the CSS rules . <link> element is used to reference the pages .
If you did create a folder with the name of Movie Freak and placed all files of xhtml tutorials in it ,then , create a new notepad file and rename it learn.css .
To access this file :
<link rel="stylesheet" href="basic.css" type="text/css" />
rel - relationship . This specifies that the link points to a CSS file .You'll have to specify the relative path if the CSS file is in any other folder .
We created this unordered list of links in our XHTML tutorials .
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
To style them :
ul a {
color: green;
font-size: larger;
}
ul a - Selects anchor elements <a> specified inside an unordered list .
