Prepared by Saman Weerasuriya
(091-2291429,091-3095265)
[Link]-IT(University of Colombo),
Grad. Diploma in Statistics (RSS-UK)
DEFINITION AND ADVANTAGES
• CSS controls the operation of HTML tags.
• Allows a group of pages to be presented in different display
styles.
• Separate the contents and its presentation.
• When changing HTML tags in several pages, CSS make the
changes in an easy unique way.
CSS Terminology
Term Meaning
Property A browser behavior that can be controlled by
CSS. Eg: background-color
Value Values can be assigned to properties. Eg:
green to the background-color
Declaration A Property: Value pair.
Selector The HTML element, for which the declaration
is applied.
Rule A Rule is a Selector+Declaration.
Classification of Cascading Style Sheets
• INLINE
• Applicable only to the relevant HTML tag. When starting a HTML tag, CSS
rules can be specified.
• INTERNAL
• Applicable only to the relevant web page. CSS rules are defined in <head>
section. They are used in <body> section.
• EXTERNAL
• CSS rules are stored in a text file with .CSS extension. That file could be
attached to HTML files.
• External style sheets can be used to apply CSS rules to several web pages.
INLINE
Code without styles Output
<html>
<head><title></title></head>
<body>
<h1>SLIDA</h1>
</body>
</html>
INLINE
Code with INLINE style
<html>
<head><title></title></head>
<body>
<h1 style="background-color:red ; color:yellow ; font-size: 32 ">SLIDA</h1><br>
<h1 style="background-color:green ; color:red ; font-size:72 ">SLIDA</h1>
</body>
</html>
Output
INTERNAL STYLE SHEET
<html>
<head><title></title> Styles are defind
<style type="text/css">
h1,h2,h3{background-color:green ; color:yellow ; font-size:72}
</style>
</head> Selectors Property Value ; :
<body>
<h1>SLIDA</h1><br>
<h2>SLIDA</h2><br> Styles are applied
<h3>SLIDA</h3><br>
</body>
</html>
Output – INTERNAL STYLE SHEET
External Style Sheets
CSS file with .css extension HTML file calls .css file
h1,h2,h3 <html>
{ <head>
background-color:purple ; <title></title>
<link href="F:\xampp\htdocs\exercisesphp\capacity
font-size:72 ; building\[Link]" rel="stylesheet" type="text/css">
color:green </head>
} <body>
<h1>SLIDA</h1><br>
<h2>SLIDA</h2><br>
<h3>SLIDA</h3><br>
</body>
</html>
Output using External Style Sheet File
Changed External Style Sheet
h1{
background-color:purple ;
font-size:72 ;
color:green
}
h2{
background-color:green ;
font-size:72 ;
color:purple
}
h3{
background-color:orange ;
font-size:72 ;
color:white
}
Output