Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
93 views

CSS Cascading Style Sheets

This document discusses Cascading Style Sheets (CSS) and their use in formatting HTML documents. It describes the different levels of style sheets (inline, document-level, external), how to specify styles using selectors like classes and IDs, and common CSS properties for fonts, text, and colors. Key points covered include the CSS specification developed by the W3C, common properties for fonts, colors, backgrounds, and borders, and how to link an external style sheet to an HTML document.

Uploaded by

Algaey Suj
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
93 views

CSS Cascading Style Sheets

This document discusses Cascading Style Sheets (CSS) and their use in formatting HTML documents. It describes the different levels of style sheets (inline, document-level, external), how to specify styles using selectors like classes and IDs, and common CSS properties for fonts, text, and colors. Key points covered include the CSS specification developed by the W3C, common properties for fonts, colors, backgrounds, and borders, and how to link an external style sheet to an HTML document.

Uploaded by

Algaey Suj
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 64

CSS

Cascading Style sheets

The CSS1 specification was developed in 1996 by


W3C.
CSS2 was released in 1998 which added many
properties and values to CSS1 and CSS3 since late
1990s.
CSSs provide the means to control and change
presentation of HTML documents.
CSS is not technically HTML, but can be embedded in
HTML documents
Cascading style sheets were introduced to provide a
uniform and consistent way to specify presentation
details in XHTML documents

Levels of Style Sheets


There are three levels of style sheets, in order from
lowest level to highest level, are inline, document
level, and external.
Inline style sheets are specified for a specific
occurrence of a tag and apply only to the content of
that tag.
It is imposing uniform style on the tags of at least
one whole document.
Document-level style specifications appear in the
document head section and apply to the whole body of
the document.
External style sheets are not part of the
documents to which they apply.

Style Specification Formats: Inline style


sheet
The format of a style specification depends on
the level of the style sheet.
Inline style sheet appears as the value of the
style attribute of the tag.
The general form of which is as follows:
style = "property_1: value_1;
property_2: value_2;

property_n: value_n;"

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">web
programming</p>
<p style="fontsize:20px;">Robert
Sebesta</p>
<p
style="color:Yellow;">OOP</p
>
<p style="color:blue;fontsize:20px;">Robert

Style Specification Formats: Document


level specification
Document style specifications appear as the
content of a style element within a document. The
general form is
<style type=text/css>
Rule-list
</style>
Each style in a rule list has two parts:
selector, which indicates the tag or tags affected
by the rules.
property/value pair has the form->property:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Programming the world wide
web</p>
</body>
</html>

Linking an External Style sheet


A <link> tag is used to specify that the browser is to fetch
and use an external style sheet file through href.
The href attribute of <link> is used to specify the URL of the
style sheet document
<link rel = "stylesheet" type =
"text/css"
href =
http://www.wherever.org/termpaper.cs
s"> </link>
This link must appear in the head of the document.
External style sheets can be validated, with the service
http://jigsaw.w3.org/css-validator/ validatorupload.html

Sample.css
body {
background-color: cyan;
}
h1 {
color: blue;
text-align: center;
}
p{
color: green;
text-align: right;
}

Welcome.html
<!DOCTYPE html>
<html lang = "en">
<head>
<title>externalStyle.html</title>
<link rel = "stylesheet type =
"text/css href =
"D:\sample.css" />
</head>
<body>
<h1>Welcome</h1>
<p>
Faculty of Science and TechnologyFST
</p>
</body>
</html>

Assignment

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title> Our first document </title>
<style>
h2 {font-size: 32pt; font-weight: bold;font-family: 'Times
New Roman';}
h3,h4 { font-size: 18pt; font-family: 'Courier New'; font</style>
style:italic;
font-weight:bold} </head>
<body>
h1,h2 {
<h1> Programming the world wide web</h1
text-align: center;
<h2> Robert W. Sebesta </h2>
color: red;
<h3>XHTML<h3>
}
<h4>Cascading style sheets</h4>
h3,h4 {
text-align: right; <h5> Java Script</h5>
<h6> PHP</h6>
color: green;
</body>
}
</html>
h5,h6 {
text-align: left;

Selector can have variety of


forms like:
1.
2.
3.
4.
5.
6.
7.

Simple selector form


Class selector
Generic selector
Id selector
Universal selector
Pseudo classes
Contextual selectors

Simple selector form


Simple selector form is a list of style rules.
The selector is a tag name or a list of tag
names, separated by commas.
Consider the following example:
The property is font-size and the property
value is a number of points :
h1, h3 { font-size: 24pt ;}
h2 { font-size: 20pt ;}

<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title> Our first document </title>
<style>
h1, h3 { font-size: 10pt ;}
p { font-size: 25pt ;}
</style>
</head>
<body>
<h1>welcome</h1>
<h2>welcome</h2>
<p>welcome</p>
<h3>welcome</h3>
</body>
</html>

Class Selectors
Used to allow different occurrences of the same
tag to use different style specifications.
A style class has a name, which is attached to
the tags name with a period.
The class you want on a particular occurrence of
a tag is specified with the class attribute of the
tag.
For example:
p.normal {property-value list}
p.warning {property-value list}

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title> Our first document </title>
<style>
.important {
font-weight:bold; color:red;
}
</style>
</head>
<body>
<p class="important">Important Text</p>
<p>Ordinary Text</p>
<p class="important">notice</p>
</body>
</html>

Generic Selectors
A generic class can be defined if you want a
style to apply to more than one kind of tag.
A generic class must be named, and the name
must begin with a period without a tag name in
its name.
For Example:
.sale{ }
Use it as if it were a normal style class
<h1 class = sale"> This Tuesday is a holiday
</h1>...

<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title> Our first document </title>
<style>
.urgent {
font-weight:bold; color:red;
}
</style>
</head>
<body>
<p class = "urgent"> Urgent Circular </p>
<h1> This is h1</h1>
</body>
</html>

Id Selectors
An id selector allow the application of a style to one
specific element.
The general form of an id selector is as follows :
#specific-id {property-value list}
Example:
#section14 {font-size: 20} specifies a font
size of 20 points to the element
<h2 id =section14> Alice in
wonderland</h2>

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title> Our first document </title>
<style>
#fntsize1 {font-size: 20}
#fntsize2 {font-size: 5}
</style>
</head> <body>
<h1 id="fntsize2" > Twinkle twinkle little star</h1>
<h2> how I wonder </h2>
<h3>what you are ???</h3>
<h4>up above the world so high</h4>
<h5> like a diamond</h5>
<h6 id="fntsize1"> in the sky.</h6>
</body>
</html>

Universal selector
The universal selector, denoted by an asterisk(*), which
applies style to all elements in the document.
For example:
*{property-value list}

<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title> Our first document </title>
<style>
*{color: red;}
</style>
</head> <body>
<h1> Twinkle twinkle little star</h1>
<h2> how I wonder </h2>
<h3>what you are ???</h3>
<h4>up above the world so
high</h4>
<h5> like a diamond</h5>
<h6> in the sky.</h6>
</body>
</html>

Pseudo Classes
Pseudo classes are styles that apply when something
happens, rather than because the target element simply
exists.
Names of pseudo classes begin with colons hover classes
apply when the mouse cursor is over the element focus
classes apply when an element has focus
i.e. the mouse cursor is over the element and the left
mouse button is clicked.

<html xmlns =
"http://www.w3.org/1999/xhtml">
<head> <title> Checkboxes </title>
<style type = "text/css">
input:hover {color: green;}
input:focus {color: red;}
</style> </head> <body>
<form action = ""> <p>
Your name:
<input type = "text" />
</p> </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:blue;
}
</style>
</head>
<body>
<p class="red">Programming
WWW</p>
<p class="thick">Robert
Sebesta</p>
<p class="green">OOP</p>
<p class="thick green">Robert

Property Values Forms


CSS1 includes 60 different properties in 7 categories
Fonts, Lists, Alignment of text, Margins, Colors,
Backgrounds, Borders
Keywords for property values are used when there are
only a few possible values and they are predefined
Eg: small, large, medium
Keyword values are not case sensitive, so Small, SmAlL,
and SMALL are all the same as small

The possible unit names are


px for pixels(1 pixel is equal to one dot on the
computer screen)
in for inches,
cm for centimeters,
mm for millimeters,
pt for points(1 point is equal to 1/72 of an inch)
pc for picas (12 points),
em for value of current font size in pixels,(1em is
equal to 12pt)
ex for height of the letter .
No space is allowed between the number and the

URL values:
URL property values use a form that is slightly
different from references to URLs in links.
The actual URL, which can be either absolute or relative,
is placed in parentheses and preceded by url,
url(protocol://server/pathname)

Colors :
Color name rgb(n1, n2, n3)
Hex form: #B0E0E6 , stands for powder blue color.

Font properties
Font-family
The font-family property is used to specify a list of font
name.
The browser will use the first font in the list that it
supports.
For example:
Generic
fonts:
font-family:
Arial, Helvetica, Courier
They can be specified as the font family value
serif, sans-serif, cursive, fantasy, and monospace
(defined in CSS).
Browser has a specific font defined for each generic
name.

Font-size
Possible values: a length of a number or a name, such
as smaller, xx-large, medium , large etc.
Different browsers can use different relative value for
the font-size.
Font-variant
The default value of the font-variant property is normal,
which specifies the usual character font.
This property can be set to small-caps to specify
small /capital characters.
Font-style
The font-style property is most commonly used to
specify style
Eg: font-style: italic
Font-weights
The font-weight property is used to specify the degree of
boldness.
Eg: font-weight : bold

<html xmlns = http://www.w3.org/1999/xhtml>


<head> <title> Font properties </title>
<style type = "text/css">
p.big {font-size: 14pt; font-style: italic;
font-family: 'Times New Roman';}
p.small {font-size: 10pt , font-family:
'Courier New';}
h2 {font-family: 'Times New Roman';
font-size: 24pt; font-weight: bold}
h3 {font-family: 'Courier New'; font-size: 18pt}
</style>
</head>
<body>
<p class = "big">
Programming the World wide web
</p>
<p class = "small">
Robert W.Sebesta
</p>
<h2> CSS</h2>
<h3>The Basics of Web programming </h3>
<h4> Book by Robert Sebesta
</body>
</html>

Sample.html

a.css file

<html
xmlns="http://www.w3.org/1999/x
html">
<head>
<title>CSS Example</title>
<link rel="stylesheet"
type="text/css"
href="D:\a.css" />
</head>
<body>
<h1>CSS</h1>
<p>This is Cascading style
sheet</p>
<p class="important">This
paragraph demonstrates the use
of the <code>class</code>
attribute.</p>
</body>

body {
font-family:arial, verdana,
sans-serif; backgroundcolor:green;
}
h1 {
color:red;
font-size:22pt;}
p{
color:blue;
font-size:18pt;}
p.important {
color:red;font-size:10pt;
background-color:#B0E0E6 ;
padding:5px;margin:15px;
width:40em;}

output

Text Decoration
The text-decoration property is used to specify some
special features of the text.
The available values are line-through, overline,
underline, and none, which is the default.
Many browsers underline links.
Eg:line-through, overline, underline, none

Letter-spacing
Value is any length property value controls amount
of space between characters in text
Eg: 3px

<html xmlns = "http://www.w3.org/1999/xhtml">


<head> <title> Text decoration </title>
<style type = "text/css">
p.through {text-decoration: line-through}
p.over {text-decoration: overline}
p.under {text-decoration: underline}
</style> </head>
<body>
<p class = "through">
Programming the World wide web </p>
<p class= "over">
Programming the World wide web </p>
<p class = "under">
Programming the World wide web </p>
</body></html>

a.css file
p.one {font-family:arial, verdana, sans-serif;}
p.two {font-family:'times new roman', serif;}
p.three {font-family:courier, 'courier new',
monospace;}
p.four {font-family:arial, cursive;}
p.five {font-family:Cottonwood, Studz, fantasy;}

Sample.html file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="D:\a.css" /> </head>
<body>
<p class="one">The first paragraph of text should be displayed in a
sans-serif font.</p>
<p class="two">The second paragraph of text should be displayed in a
serif font.</p>
<p class="three">The third paragraph of text should be displayed in a
monospaced font.</p>
<p class="four">The fourth paragraph of text should be displayed in a
cursive font.</p> <p

output

Sample.html
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css"
href="d:\a.css" /> </head>
<body>
<h1>Lengths</h1>
<p class="px">The length used here is 12
px</p> <p class="pt">The length used
here is 12
pt</p>
<p class="pc">The length used here is 2
pc</p> <p class="in">The length used
here is
0.5in</p>
<p class="cm">The length used here is
1cm</p> <p class="mm">The length
used here is
12mm</p>
<p class="em">The length used here is
1.5em</p> <p class="ex">The length

a.css file
p {font-family:arial;
font-size:12pt;}
/* lengths */
p.px {font-size:12px;}
p.pt {font-size:12pt;}
p.pc {font-size:2pc;}
p.in {font-size:0.5in;}
p.cm {font-size:1cm;}
p.mm {font-size:12mm;}
p.em {font-size:1.5em;}
p.ex {font-size:1.5ex;}

List properties:
It is used to specify style of bullets or sequencing
values in list items. The list-style-type of Unordered
lists can be set to disc,circle,square or none.

<html>
</head><body>
<h3> Name of subjects offered</h3>
<ul style = "list-style-type: square">
<li> web programming</li>
<li> Data structures</li>
<li> Compilers design </li>
</ul>
<h3> Name of subjects offered</h3>
<ul>
<li style = "list-style-type: disc">
web programming </li>
<li style = "list-style-type: square">
Data structures</li>
<li style = "list-style-type: circle">
Compilers design </li>
</ul></body>
</html>

Property value for list

Property value
Decimal
upper-alpha
lower-alpha
upper-roman
lower-roman

Sequence type
Arabic numerals
Uc letters
Lc letters
Uc Roman
Lc Roman

First four values


1, 2, 3, 4
A, B, C, D
a, b, c, d
I, II, III, IV
i, ii, iii, iv

Assignment

<?xml version = "1.0"?>


<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Sequence types </title>
<style type = "text/css">
ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}
</style>
</head>body>
<h3> Aircraft Types </h3>
<ol>
<li> General Aviation (piston-driven engines)
<ol>
<li> Single-Engine Aircraft
<ol>
<li> Tail wheel </li>
<li> Tricycle </li>
</ol>
</li>
<li> Dual-Engine Aircraft
<ol>
<li> Wing-mounted engines </li>
<li> Push-pull fuselage-mounted engines </li>
</ol>
</li>
</ol>
</li>

Property : Letter Spacing


letter-spacing:
letter-spacing:
letter-spacing:
letter-spacing:

1cm;
10pt;
10px;
none;

Definition:
Using this attribute we can define or set the space
between each letters.
It takes the following values.
a) cm : You can set the value in centimeters as 1cm etc...
b) px : You can set the value in pixels as 1px or 10px etc...
c) pt : You can set the value in points as 1pt or 2pt etc
d) norm : on setting norm, normal / default word spacing
will be taken
Ex: <font style="letter-spacing: 1cm;">

Property : Word Spacing


Usage:
word-spacing:
word-spacing:
word-spacing:
word-spacing:
Definition:

1cm;
10pt;
10px;
none;

Using this attribute we can define or set the space between


each words.
It takes the following values.
a)cm : You can set the value in centimeters as 1cm etc...
b)px : You can set the value in pixels as 1px or 10px etc...
c)pt : you can set the value in points as 1pt or 2pt etc
d)norm : on setting norm, normal / default word spacing will
be taken.
Ex: <font style="word-spacing: 10px;"> Welcome to
FST</font>

Property : Line height


p.small{
line-height:90%;
}

p.small{
line-height:10px;
}

p.big{
line-height:200%;
}

p.big{
line-height:30px;
}

Normal:
Number:

Anormallineheight.Thisisdefault
Anumberthatwillbemultipliedwiththecurrentfontsize
tosetthelineheight
Length:
Afixedlineheightinpx,pt,cm,etc.
%: Alineheightinpercentofthecurrentfontsize

Alignment of Text:
The textalign property has the possible values, left (the default),
center, right.
h1{
text-align:center;
}
h2{
text-align:left;
}
h3{
text-align:right;
}

Left: Aligns the text to the left


Right: Aligns the text to the right
Center: Centers the text

<!DOCTYPE html>
<! First Progam-- >
<html lang=en>
<head>
<title> text alignment </title>
<meta charset="utf-8"/>
<style type = "text/css">
p{font-size: 20px;font-style: oblique;color: green;text-align: right;}
</style>
</head>
<body>
<p>
The tulip is lily family.
</p>
</body>
</html>

Alignment of Text
Property: float

To flow the text around another element.


The float property has the possible values, left, right,
and none (the default).
If we have an element we want on the right, with
text flowing on its left, we use the default text-align
value (left) for the text and the right value for float on
the element we want on the right.
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> The float property </title>
<style type = "text/css">
img {float: right}

<!DOCTYPE html>
<html lang=en>
<head>
<title> text alignment </title>
<meta charset="utf-8"/>
<style type = "text/css">
img {float: right;}
</style>
</head>
<body>
<p>
<img src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg",height=
200, width=200,alt="failed to upload"/>
The tulip is a Eurasian and North African genus of perennial, bulbous
plants in the lily family.
It is an herbaceous herb with showy flowers, of which around 75 wild
species are currently accepted.The genus's native range extends west to
the Iberian Peninsula, through North Africa to Greece, the Balkans, Turkey,
throughout the Levant (Syria, Israel, Palestinian Territories, Lebanon,
Jordan) and Iran, north to Ukraine, southern Siberia and Mongolia, and
east to the Northwest of China. The tulip's centre of diversity is in the
Pamir, Hindu Kush, and Tien Shan mountains. It is a common element of
steppe and winter-rain Mediterranean vegetation. A number of species
and many hybrid cultivars are grown in gardens or as potted plants.
</p>

Output

Colors are a problem for the Web for two reasons:


1. Monitors vary widely
2. Browsers vary widely
There are three color collections
1. There is a larger set, the Web Palette 216 colors.
Use hex color values
2. Any one of 16 million different colors due to 24 bit color
rep
3. There is a set of 16 colors that are guaranteed to be
displayable by all
graphical browsers on all color monitors

Color: Table
Black
silver
gray
white
maroon
red
purple
fuchia

000000
C0C0C0
808080
FFFFFF
800000
FF0000
800080
FF00FF

green 008000
lime 00FF00
olive 808000
yellow
FFFF00
navy 000080
blue 0000FF
teal
008080
aqua 00FFFF

EX:
<style type = text/css>
th.red {color: red}
th.orange {color: orange}
</style>
<table border = "5">
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>
The background-color property specifies the
background color of elements

<!DOCTYPE html>
<! First Progam-- >
<html lang=en>
<head>
<title> text alignment </title>
<meta charset="utf-8"/>
<style type = "text/css">
p.display{font-size: 20px;font-style: oblique;color:
green;background-color:magenta;}
</style>
</head>
<body>
<p class="display">
The tulip is lily family.
</p>
</body>
</html>

Box Model:
The amount space between the content of an element
and its border is padding.
Space between the border and an adjacent element
known as margin.

Borders:
Everyelementhasaborder-style property.
ItControlswhethertheelementhasaborderandthestyleoftheborder.
Thestylesofoneofthefoursidesofanelementcanbesetwith
border-style values:none, dotted, dashed, and double
border-widththin, medium (default), thick,oralengthvaluein
pixels.
Borderwidthcanbespecifiedforanyofthefourborders(e.g., bordertop-width)
bordercoloranycolor,Bordercolorcanbespecifiedforanyofthe
fourborders(e.g., border-topcolor)

<tr>
<th> </th>
<th> Fruits </th>
<html xmlns =
"http://www.w3.org/1999/xhtml"><th> vegetables </th>
<th> Carbohydrates </th>
<head> <title> Table borders
</tr> <tr>
</title>
<th> Breakfast </th>
<style type = "text/css">
<td> 0 </td>
table {border-top-width: medium;<td> 1 </td>
border-bottom-width: thick;
<td> 0 </td>
border-top-color: red;
</tr> <tr>
border-bottom-color: green;
<th> Lunch </th>
<td> 1 </td>
border-top-style: dotted;
<td> 0 </td>
border-bottom-style: dashed;
<td> 0 </td> </tr> <tr>
}
p {border-style: dashed; border- <th> Dinner </th>
<td> 0 </td>
width: thin;
<td> 0 </td>
border-color: green
<td> 1 </td>
} </style> </head>
</tr>
<body> <table border = "5"> </table> <p>
<caption> Diet chart </caption> If you strictly follow the chart you can
easily lose weight.
</p> </body>
</html>

Margin
Thespacebetweentheborderofanelementanditsneighbor
element.
Themarginsaroundanelementcanbesetwithmargin-left,etc.-
justassignthemalengthvalue

<imgsrc="c210.jpg"style="float:right;margin-left:0.35in;
margin-bottom:0.35in"/>
Paddingthedistancebetweenthecontentofanelementandits
border

<html xmlns =
"http://www.w3.org/1999/xhtml">
<head><title> Margins and
Padding
</title><style type = "text/css">
p.one {margin: 0.2in;
padding: 0.2in;
background-color: #C0C0C0;
border-style: solid;
}
p.two {margin: 0.1in;
padding: 0.3in;
background-color: #C0C0C0;
border-style: solid;
}
p.three {margin: 0.3in; padding:
0.1in;
background-color: #C0C0C0;
border-style: solid; }
p.four {margin:0.4in;
background-color: #C0C0C0;}
p.five {padding: 0.4in;
background-color: #C0C0C0;
}

<body>
<p> Here is the first line. </p>
<p class = "one">
Style sheets allow you to impose a
standard style on a whole document,
or even a whole
collection of documents <br />
[margin = 0.2in, padding = 0.2in]
</p>
<p class = "two">
Style sheets allow you to impose a
standard style on a whole document,
or even a whole
collection of documents. <br />
[margin = 0.1in,
padding = 0.3in]
</p>
<p class = "three">
Style sheets allow you to impose a
standard style on a whole document,
or even a whole
collection of documents <br />
[margin = 0.3in,

You might also like