Note_7
CSS (Cascading Style Sheets) or simply style sheets are text files that contains one or more rules
in the form of property/value pairs to determine how elements in a web page should be displayed.
CSS deals with all the style-related aspects imporatant to create a web page.
Css syntax: The CSS syntax contains curly braces, colons, and semicolons. In the css syntax
selector is the element that the rule defines, property1, property2, ..... are the properites (attributes)
defined for that element, and property1-value, property2 -value, ... are the values assigned to these
properties. The portion of the syntax enclosed within the curly braces is termed as declaration.
selector {property1: property1-value; property2 : property2-value; .............}
Ex: h1 { colour: blue; font-size: 12px; }
_______________________________________________________________________________
Cascading style in a web page can be created in 4 ways.
1. External style sheets: An external style sheet is a seperate document that contains only CSS
rules and has .css extension. External style sheets are used to apply uniform styles to all the web
pages.
Ex:
extstyle.css
body {
background-color: red;
font-size: 30px;
}
h1 {
color: blue;
text-align: center;
p{
font-family: verdana;
color: green;
font-size: 20px;
}
example_external_style.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="extstyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Internal Style Sheets: Internal style sheets are created using the <style > element that is added
inside the <head> element of the HTML document. Internal style sheets are useful when you want
to apply similar styles to all the elements presents on a web page.
Ex:
example_internal_style.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
font-size: 30px;
}
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. Inline Styles: In the inline style method, style for an HTML element is specified using style
attribute. Inline styles are useful when you want to define specific styles for the individual elements
present on a web page.
Ex:
example_inline_style.html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue; font-size: 20px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
_______________________________________________________________________________
4. Multiple Styles: When multiple syles are used in a HTML page, then all the styles in a page will
"cascade" into a new "virtual" style sheet by the following rules, where number one has the highest
priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
[when both external and internal style sheets are used in the head section, then last one is
considered. Try the following example by removing styles to see how the cascading stylesheets
work (try removing the inline first, then the internal, then the external ) ]
Ex:
example_mutiple_style.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lightcyan">
<p> Hi how are you all!</p>
</body>
</html>
Style class: In style classes method, you can create styles in the form of style classes. To apply a
style defines in a style class to an HTML element, you can assign the class attribute of the
HTMLelement to the name of the style class.
You can create two types of style classes.
1. Univeral style class:
Syntax:
<style>
class_name
{
class_definition
}
</style>
Example:
<style>
.intro
{
background-color: yellow;
}
</style>
2. Element specific style class:
Syntax:
<style>
element_name.class_name {class_definition}
</style>
Example:
<style>
p.parag
{
background: red;
}
</style>
_________________________________________________________________________
ID style: To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
Syntax:
<style>
#id_name
{
property1: property1-value;
property2 : property2-value;
........
}
</style>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
Example: Usage of ID and Class
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
p.parag {
background: red;
}
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1" class="intro">I live in Bhagalpur.</p>
<p class="parag">I also live in Bhagalpur.</p>
</body>
</html>
_________________________________________________________________________
Textbook: Web Technologies HTML, JavaScript, PHP, Java, ASP.NET, XML and AJAX,
Chapter 2 .
