Scribd
Upload
33 views

Lesson - 2 (CSS-Cascading Style Sheets)

The document discusses different types of CSS stylesheets including internal, external, and inline stylesheets. It provides examples of how to create each type and explains that inline stylesheets have the highest priority while external stylesheets have the lowest. The document also covers CSS syntax using the selector, property, and value structure. It introduces CSS classes and IDs as ways to target specific elements with styles.

Uploaded by

kcoder
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

Lesson - 2 (CSS-Cascading Style Sheets)

The document discusses different types of CSS stylesheets including internal, external, and inline stylesheets. It provides examples of how to create each type and explains that inline stylesheets have the highest priority while external stylesheets have the lowest. The document also covers CSS syntax using the selector, property, and value structure. It introduces CSS classes and IDs as ways to target specific elements with styles.

Uploaded by

kcoder
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

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

You might also like