CSS-Cascading Style Sheets
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
2
• The three types of stylesheets
• Creating an internal stylesheet
• Creating an external stylesheet
• Creating an inline stylesheet
• Multiple stylesheets
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
3
The three types of stylesheets
There are three types of stylesheets:
Internal - Placed right on the page
whose interface it will affect.
External - Placed in a separate file.
Inline - Placed inside a tag it will
affect.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
4
Creating an internal stylesheet
Syntax:
<style type="text/css">
styles go here
</style>
Example:
<html>
<head>
<style type="text/css">
p {color: green}
</style>
</head>
<body> <p> The text in this paragraph will be green. </p>
<p> This paragraph too. </p>
</body>
</html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
5
Creating an external stylesheet
Attributes of the <link> tag:
rel - When using an external stylesheet on a webpage, this
attribute takes the value "stylesheet"
type - When using an external stylesheet on a webpage, this
attribute takes the value "text/css"
href - Denotes the name and location of the external stylesheet
to be used.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
6
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<p> The text in this paragraph will be blue. </p>
</body>
</html>
The code from style1.css:
p {color:blue}
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
7
Creating an inline stylesheet
Use inline stylesheets when you want to apply a
style to a single occurence of an element.
Inline stylesheets are declared within individual
tags and affect those tags only. Inline stylesheets
are declared with the style attribute.
Example:
<p style="color:gray">This text will be gray.</p>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
8
Multiple stylesheets
Stylesheets by priority:
Inline stylesheet - An inline stylesheet has the highest priority. It will
override styles declared in an internal stylesheet, an external stylesheet,
and a web browsers default styles.
Internal stylesheet - An internal stylesheet has the second highest
priority. It will override styles declared in an external stylesheet and a
web browsers default styles.
External stylesheet - An external stylesheet has the third highest
priority. It will override a web browsers default styles.
Browsers default styles - A web browsers default styles have the
lowest priority. A web browsers default styles will be used when there are
no styles set for an element in an inline, internal, or external stylesheet.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS stylesheets
9
Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css" />
<style type="text/css">
<!-- p {color: orange} -->
</style>
</head>
<body>
<p style="color: yellow"> The text in this paragraph will be yellow. </p>
</body>
</html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS syntax
10
•CSS syntax
•Grouping styles
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS syntax
11
There are three parts in the CSS syntax:
selector {property: value}
selector - The selector is the HTML tag that a style will be
applied to. For example, the <p> tag for paragraphs or the
<h2> heading tag.
property - The property is an aspect of the HTML tag that
will be affected by the stylesheet definition. For example, the
background color of a webpage or the color of links.
value - The value that the property of a selector will have.
For example, the value of the background color of a webpage
can be green or the value of the color of links can be gray.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
12
Example:
body {background-color: gray}
h2 {font-family: "Trebuchet MS"}
body {
background-color: gray;
color: yellow;
}
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
13
Grouping styles
You can specify that a group of tags will have the same
styles by grouping them together.
Example:
p, h1, h2, h3, h4{
color: blue;
font-family: courier;
}
In this example, all text declared with the tags <p>,
<h1>, <h2>, <h3>, and <h4> will be blue in color and
Courier in font.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS Classes and ID's
14
•Classes
•Id's
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Classes
15
With classes, you can specify different styles for the same HTML tag.
For example, you can specify two paragraphs to have different color
text:
Example:
p.green {color: green;}
p.blue {color: blue;}
To specify a tag as part of a class, you have to use the class attribute
within that tag:
Example:
<p class="green">This text is green</p>
<p class="blue">This text is blue</p>
Styles for classes are specified with the . (dot) character followed by
the class name in an internal or external stylesheet.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Classes
16
Example:
<style type="text/css">
.text{
font-family: tahoma;
font-size: 16px;
font-weight: bold;
color: green;
}
</style>
In the above example, the class text is specified to have a font
type of tahoma, a font size of 16 pixels, to be bold, and green.
Any tag specified as part of the text class will get these
properties.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
17
Based on the stylesheet from above:
<p class="text">This text will be green, bold, tahoma, and have
a font size of 16 pixels</p>
Will be displayed as:
This text will be green, bold, tahoma, and have a font
size of 16 pixels
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
ID's
18
ID's are specified with the # (pound sign) followed by the
ID name in an internal or external stylesheet.
Example:
<style type="text/css">
#text{
font-family: georgia; font-size: 18px; font-weight: bold; color:
blue; }
</style>
In this example, the text ID is specified to have a typeface
of georgia, a font size of 18 pixels, to be bold, and blue.
Any tag specified as part of the text ID will get these
properties.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
19
Based on the stylesheet from above:
<p id="text">This text will be blue, bold, georgia, and have a font
size of 18 pixels</p>
Will be displayed as:
This text will be blue, bold, georgia, and have a font size
of 18 pixels
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
20
Including comments in stylesheet definitions
Comments begin with /* and end with */ and can span as many lines as you
want.
Example:
<html>
<head>
<style type="text/css"> /* this is a comment */
p{ color: green; /* the color of the text in the paragraph */
font-family: Courier; margin-top: 0; margin-left: 0; /* the left margin of the
paragraph */
}
</style>
</head>
<body> <p> The text in this paragraph will be green. </p> </body>
</html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS background properties
21
•Setting a background color
•Setting a background image
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Setting a background color
22
Setting a background color
You can use CSS to set the background color of
various elements including the webpage itself, tables,
textboxes and links.
The background color of an element is set with the
background-color property. You can specify the
background color of an element with a color name,
an RGB value, or a hexadecimal value.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
23
Example:
<html>
<head> <title>Background properties</title>
<style type="text/css">
body {background-color: #f0f8ff;}
h1 {background-color: lightsteelblue;}
p {background-color: rgb(220, 220, 220);}
a {background-color: #e6dcbe;} </style> </head>
<body> <h1>Some text</h1>
<p> A paragraph </p>
<a href="http://www.landofcode.com">
Landofcode.com main page </a>
</body> </html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Setting a background image
24
You can use CSS to set a background image for
various elements including the webpage itself and
tables.
The background image of an element is set with the
background-image property. The value this
property takes should be the location of the image
specified within a url() identifier.
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Setting a background image
25
Example:
<html> <head> <title>Setting a background image</title> <style
type="text/css">
body {background-image: url(/https/www.scribd.com/images/ob020.jpg);}
table {background-image: url(/https/www.scribd.com/images/apple.jpg);}
</style>
</head>
<body>
<table border="2">
<tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
<tr> <td>Cell 3</td> <td>Cell 4</td> </tr>
</table> </body> </html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
CSS text properties
26
•S e t t i n g t e x t c o l o r
•A l i g n i n g t e x t
•D e c o r a ti n g t e x t
•S e t t i n g l e t t er s p a c i n g
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Setting text color
27
Text color is set with the color property. You can specify the color
of text with a color name, an RGB value, or a hexadecimal value.
Example:
<html> <head><title>Background properties</title>
<style type="text/css">
h1 {color: green;}
p {color: #00008b;}
p.text{color: rgb(47, 49, 49);}
</style>
</head>
<body> <h1>This text is green</h1> <p>This text is darkblue</p> <p
class="text">This text is darkslategray</p> </body>
</html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
Aligning text
28
The alignment of text in an element is set with the text-align property.
With this property, you can set text to align to the left, right, or center.
Example:
<html> <head>
<title>Background properties</title>
<style type="text/css">
h1 {text-align: left;}
h2 {text-align: right;}
p {text-align: center;}
</style> </head>
<body>
<h1>This text is aligned to the left</h1>
<h2>This text is aligned to the right</h2>
<p>This text is aligned to the center</p>
</body> </html>
Lesson -2 ( CSS-Cascading Style Sheets) 11/02/2021
