Sabyasachi Moitra
Uploaded by
Sabyasachi MoitraSabyasachi Moitra
Uploaded by
Sabyasachi MoitraCSS
Sabyasachi Moitra
moitrasabyasachi@hotmail.com
What is CSS?
Cascading Style Sheet.
It is a style sheet language used to describe the presentation of a
document written in a markup language.
Its most common application is to style web pages written in HTML.
Latest version: CSS3
WEB TECHNOLOGY 2
CSS Syntax
A CSS rule has two main parts:
Selector – The selector is normally the HTML element you want to style.
Declaration(s) - Each declaration consists of a property and a value.
The property is the style attribute you want to change.
Each property has a value.
WEB TECHNOLOGY 3
Example
<html>
<head>
<title>CSS Example</title>
<style>
body
{
background-color:yellow;
}
WEB TECHNOLOGY 4
Example (contd…)
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
WEB TECHNOLOGY 5
Example (contd…)
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
WEB TECHNOLOGY 6
Output
WEB TECHNOLOGY 7
CSS Selectors
CSS allows you to specify your own selectors called "id" and "class".
id
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element and is defined
with "#".
class
The class selector is used to specify a style for a group of elements. The
class selector uses the HTML class attribute, and is defined with ".".
You can give an element two classes (but, not two ids) whose styles will
both take effect.
<div class="c1 c2"></div>
WEB TECHNOLOGY 8
The id selector
<html>
<head>
<title>CSS id selector</title>
<style>
#para1
{
text-align:center;
color:red;
}
WEB TECHNOLOGY 9
The id selector (contd…)
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
WEB TECHNOLOGY 10
Output
WEB TECHNOLOGY 11
The class selector
<html>
<head>
<title>CSS class selector</title>
<style>
.center
{
text-align:center;
}
</style>
WEB TECHNOLOGY 12
The class selector (contd…)
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
WEB TECHNOLOGY 13
Output
WEB TECHNOLOGY 14
Ways to insert CSS
There are three ways to insert CSS:
Inline Style - An inline style may be used to apply a unique style for a single
element. To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
Internal Style Sheet - An internal style sheet may be used if one single page
has a unique style. Internal styles are defined within the <style> element,
inside the <head> section of an HTML page.
External Style Sheet - With an external style sheet, you can change the look
of an entire website by changing just one file. Each page must include a
reference to the external style sheet file inside the <link> element. The
<link> element goes inside the <head> section. An external style sheet can
be written in any text editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.
WEB TECHNOLOGY 15
Inline CSS
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="background: blue; color: white;">
A new background and font color with inline CSS
</p>
</body>
</html>
WEB TECHNOLOGY 16
Output
WEB TECHNOLOGY 17
Internal Style Sheet
<html>
<head>
<title>Internal style sheet</title>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;color:blue;}
body {background-image:url("Winodws-7.jpg");}
</style>
</head>
WEB TECHNOLOGY 18
Internal Style Sheet (contd…)
<body>
<p>This is my first para</p>
<hr>
<p>This is my second para</p>
</body>
</html>
WEB TECHNOLOGY 19
Output
WEB TECHNOLOGY 20
External Style Sheet
<html>
<head>
<title>External Style Sheet</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
WEB TECHNOLOGY 21
External Style Sheet (contd…)
test.css
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
WEB TECHNOLOGY 22
Output
WEB TECHNOLOGY 23
References
Courtesy of W3Schools – CSS Tutorial. URL:
http://www.w3schools.com/css/
Courtesy of TutorialsPoint – CSS Tutorial. URL:
http://www.tutorialspoint.com/css/
Ivan Bayross, Web Enabled Commercial Applications Development
Using HTML, JavaScript, DHTML and PHP, 4th Revised Edition, BPB
Publications, 2010
WEB TECHNOLOGY 24
