Scribd
Upload
28 views

Unit 2

Uploaded by

Rakshith gowda Gowda
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Unit 2

Uploaded by

Rakshith gowda Gowda
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Simple Selector Forms

h1 {property-value list}
h2, h3 {property-value list}

Class Selectors
p.normal {property-value list}
p.warning {property-value list}

<p class = "normal">


A paragraph of text that we want to be presented in
'normal' presentation style
</p>
<p class = "warning">
A paragraph of text that is a warning to the reader, which
should be presented in an especially noticeable style
</p>

id Selectors
#specific-id {property-value list}

#section14 {property-value list}

<h2 id = "section14"> 1.4 Calico Cats </h2>

Contextual Selectors
ul ol {property-value list}

<ol>
<li> ... </li>
<ul>
<li> ... </li>
...
</ul>
<li> ... </li>
...
</ol>

Font Properties
font-family: Arial, Helvetica, Futura
font-family: 'Times New Roman'

Font Sizes
font-size: 1.2em
This sets the font size to 1.2 times the font size of the parent element. (120%)

Font Variants
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 letters.

Font Styles
font-style: italic

Font Weights
font-weight: bold

1
1. Inline style sheet

<!DOCTYPE html>
<!-- fonts.html
An example to illustrate font properties
-->
<html lang = "en">
<head>
<title> Font properties </title>
<meta charset = "utf-8" />
<style type = "text/css">
p.major {font-size: 1.1em;
font-style: italic;
font-family: 'Times New Roman';
}
p.minor {font: 0.9em bold 'Courier New';}
h2 {font-family: 'Times New Roman';
font-size: 2em; font-weight: bold;}
h3 {font-family: 'Courier New'; font-size: 1.5em;}
</style>
</head>
<body>
<p class = "major">
If a job is worth doing, it's worth doing right.
</p>
<p class = "minor">
Two wrongs don't make a right, but they certainly
can get you in a lot of trouble.
</p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Computer Networks </h3>
</body>
</html>

2. Using external style sheet


<!DOCTYPE html>
<!-- fonts2.html
An example to test external style sheets
-->
<html lang = "en">
<head>
<title> External style sheets </title>
<meta charset = "utf-8" />
<link rel = "stylesheet" type = "text/css"
2
href = "styles.css" />
</head>
<body>
<p class = "major">
If a job is worth doing, it's worth doing right.
</p>
<p class = "minor">
Two wrongs don't make a right, but they certainly
can get you in a lot of trouble.
</p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Computer Networks </h3>
</body>
</html>

Styles.css
/* styles.css - an external style sheet
for use with fonts2.html
*/
p.major {font-size: 1.1em;
font-style: italic;
font-family: 'Times New Roman';
}
p.minor {font: bold 0.9em 'Courier New';}
h2 {font-family: 'Times New Roman';
font-size: 2em; font-weight: bold;}
h3 {font-family: 'Courier New';
font-size: 1.5em;}

3.Text decoration
<!DOCTYPE html>
<!-- decoration.html
An example that illustrates several of the
possible text decoration values
-->
<html lang = "en">
<head>
<title> Text decoration </title>
<meta charset = "utf-8" />
<style type = "text/css">
p.delete {text-decoration: line-through;}
p.cap {text-decoration: overline;}
p.attention {text-decoration: underline;}
</style>
</head>

<body>
<p class = "delete">
This illustrates line-through
</p>
<p class= "cap">

3
This illustrates overline
</p>
<p class = "attention">
This illustrates underline
</p>
</body>
</html>

4. Text spacing
<!DOCTYPE html>
<!-- text_space.html
An example to illustrate text spacing properties
-->
<html lang = "en">
<head>
<title> Text spacing properties </title>
<meta charset = "utf-8" />
<style type = "text/css">
p.big_tracking {letter-spacing: 0.4em;}
p.small_tracking {letter-spacing: -0.08em;}
p.big_between_words {word-spacing: 0.4em;}
p.small_between_words {word-spacing: -0.1em;}
p.big_leading {line-height: 2.5;}
p.small_leading {line-height: 1.0;}
</style>
</head>
<body>
<p class = "big_tracking">
On the plains of hesitation [letter-spacing: 0.4em]
</p> <p />
<p class = "small_tracking">
Bleach the bones of countless millions [letterspacing:
-0.08em]
</p> <br />
<p class = "big_between_words">
Who at the dawn of victory [word-spacing: 0.4em]
</p> <p />
<p class = "small_between_words">
Sat down to wait and waiting died [word-spacing:
-0.1em]
</p> <br />
<p class = "big_leading">
If you think CSS is simple, [line-height: 2.5] <br />
You are quite mistaken
</p> <br />
<p class = "small_leading">
If you think HTML5 is all old stuff, [line-height:
1.0] <br />
You are quite mistaken
4
</p>
</body>
</html>

5. The list-style-type property of an unordered list can be set to disc (the default), circle, square, or none.

<!-- bullets1 -->


<style type = "text/css">
ul {list-style-type: square;}
</style>

<h3> Some Common Single-Engine Aircraft </h3>


<ul>
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>

<!-- bullets2 -->


<style type = "text/css">
li.disc {list-style-type: disc;}
li.square {list-style-type: square;}
li.circle {list-style-type: circle;}
</style>

<h3> Some Common Single-Engine Aircraft </h3>


<ul>
<li class = "disc"> Cessna Skyhawk </li>
<li class = "square"> Beechcraft Bonanza </li>
<li class = "circle"> Piper Cherokee </li>
</ul>
5
6. Different sequence value types in nested lists
<!DOCTYPE html>
<!-- sequence_types.html
An example to illustrate sequence type styles
-->
<html lang = "en">
<head>
<title> Sequence types </title>
<meta charset = "utf-8" />
<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>
<li> Commercial Aviation (jet engines)
<ol>
<li> Dual-Engine
6
<ol>
<li> Wing-mounted engines </li>
<li> Fuselage-mounted engines </li>
</ol>
</li>
<li> Tri-Engine
<ol>
<li> Third engine in vertical stabilizer </li>
<li> Third engine in fuselage </li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>

7. Alignment of text

Text-indent property:
<style type = "text/css">
p.indent {text-indent: 2em}
</style>
...
<p class = "indent">
Now is the time for all good Web developers to begin
using cascading style sheets for all presentation
details in their documents. No more deprecated tags
and attributes, just nice, precise style sheets.
</p>

7
Text-align property: Uses left, center, right, and justify, is used to arrange text horizontally
Example: p {text-align: right}

The default value for text-align is left.

Float property:

The float property is used to specify that text should flow around some element, often an image or a table. The possible
values for float are left, right, and none, which is the default. For example, suppose we want an image to be on the right
side of the display and have text flow around the left side of the image. To specify this condition, the float property of
the image is set to right. Because the default value for text-align is left, text-align need not be set for the text.
<!DOCTYPE html>
<!-- float.html
An example to illustrate the float property
-->
<html lang = "en">
<head>
<title> The float property </title>
<meta charset = "utf-8" />
<style type = "text/css">
img {float: right;}
</style>
</head>
<body>
<p>
<img src = "c210new.jpg" alt = "Picture of a Cessna 210" />
</p>
<p>
This is a picture of a Cessna 210. The 210 is the flagship
single-engine Cessna aircraft. Although the 210 began as a
four-place aircraft, it soon acquired a third row of seats,
stretching it to a six-place plane. The 210 is classified
as a high-performance airplane, which means its landing
gear is retractable and its engine has more than 200
horsepower. In its first model year, which was 1960,
the 210 was powered by a 260-horsepower fuel-injected
six-cylinder engine that displaced 471 cubic inches.

The 210 is the fastest single-engine airplane ever


built by Cessna.
</p>
</body>
</html>

8
8. Color
The color property is used to specify the foreground color of HTML elements.
<style type = "text/css">
th.red {color: red;}
th.orange {color: orange;}
</style>
...
<table>
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>

The background-color property is used to set the background color of an element, where the element could be the whole body of the
document.
<style type = "text/css">
p.standout {font-size: 2em; color: blue;
background-color: magenta";}
</style>
...
<p class = "standout">
To really make it stand out, use a magenta background!
</p>

9. Box Model
Virtually all document elements can have borders with various styles, such as color and width. Furthermore, the amount of space
between the content of an element and its border, known as padding, can be specified, as well as the space between the border and an
adjacent element, known as the margin. This model, called the box model.
9
<!-- borders.html
Examples of various borders
-->
<html lang = "en">
<head>
<title> Borders </title>
<meta charset = "utf-8" />
<style type = "text/css">
td, th {border: thin solid black;}
table {border: thin solid black;
border-collapse: collapse;
border-top-width: medium;
border-bottom-width: thick;
border-top-color: red;
border-bottom-color: blue;
border-top-style: dotted;
border-bottom-style: dashed;
}
p {border: thin dashed green;}
</style>
</head>
<body>
<table>
<caption> Fruit Juice Drinks </caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
<tr>
<th> Dinner </th>
<td> 0 </td>
10
<td> 0 </td>
<td> 1 </td>
</tr>
</table>
<p>
Now is the time for all good Web developers to
learn to use style sheets.
</p>
</body>
</html>

10. Margins and Padding


The margin properties are named margin, which applies to all four sides of an element, margin-left, margin-right, margin-top, and
margin-bottom. The padding properties are named padding, which applies to all four sides, padding-left, padding-right, padding-top, and
padding-bottom.
<!DOCTYPE html>
<!-- marpads.html
An example to illustrate margins and padding
-->
<html lang = "en">
<head>
<title> Margins and Padding </title>
<meta charset = "utf-8" />
<style type = "text/css">
p.one {margin: 15px;
padding: 15px;
background-color: #C0C0C0;
border-style: solid;
}
p.two {margin: 5px;
padding: 25px;
background-color: #C0C0C0;
border-style: solid;
}
p.three {margin: 25px;
padding: 5px;
background-color: #C0C0C0;
border-style: solid;
}
p.four {margin: 25px;
background-color: #C0C0C0;}
p.five {padding: 25px;
background-color: #C0C0C0;
}
</style>
</head>
<body>
<p>
Here is the first line.
11
</p>
<p class = "one">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 15px,
padding = 15px]
</p>
<p class = "two">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 5px,
padding = 25px]
</p>
<p class = "three">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 25px,
padding = 5px]
</p>
<p class = "four">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [margin = 25px,
no padding, no border]
</p>
<p class = "five">
Now is the time for all good Web programmers to
learn to use style sheets. <br /> [padding = 25px,
no margin, no border]
</p>
<p>
Here is the last line.
</p>
</body>
</html>

12
11. Background Images
The background-image property is used to place an image in the background of an element.

<!DOCTYPE html>
<!-- back_image.html
An example to illustrate background images
-->
<html lang = "en">
<head>
<title> Background images </title>
<meta charset = "utf-8" />
<style type = "text/css">
body {background-image: url(../images/airplane2sx.png);
background-size: 375px 300px;}
p {margin-left: 30px; margin-right: 30px;
margin-top: 50px; font-size: 1.1em;}
</style>
</head>
<body>
<p>
The Cessna 172 is the most common general aviation airplane
in the world. It is an all-metal, single-engine piston,
high-wing, four-place monoplane. It has fixed gear and is
categorized as a non-high-performance aircraft. The current
model is the 172R.
13
The wingspan of the 172R is 36'1". Its fuel capacity is 56
gallons in two tanks, one in each wing. The takeoff weight
is 2,450 pounds. Its maximum useful load is 837 pounds.
The maximum speed of the 172R at sea level is 142 mph.
The plane is powered by a 360-cubic-inch gasoline engine
that develops 160 horsepower. The climb rate of the 172R
at sea level is 720 feet per minute.
</p>
</body>
</html>

12. <span> and <div> tags

In many situations, we want to apply special font properties to less than a whole paragraph of text. For example,
it is often useful to have a word or phrase in a line appear in a different font size or color.
<p>
It sure is fun to be in <span> total </span>
control of text
</p>
The purpose of <span> is to change property values of part of a line of content, as in the following example:
<style type = "text/css" >
.spanred {font-size: 2em;
font-family: Ariel; color: red;}
</style>
...
<p>
It sure is fun to be in
<span class = "spanred"> total </span>
control of text
</p>

It is common for documents to have sections, each consisting of some number of paragraphs that have their own presentation styles.
It is more convenient, however, to be able to apply a style to a section of a document rather than to each paragraph. This can be done
with the <div> tag. As with <span>, there is no implied layout for the content of the <div> tag, so its primary use is to specify
presentation details for a section or division of a document.

Consider the following example, in which a division of a document is to use a specific paragraph style:

14
<div class = "primary">
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
</div>

Example:
<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:green;font-
weight:bold">dark green</span> eyes.</p>

</body>
</html>

Example:
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>
</html>

15
16
Exercises:
1. Create and test an HTML document that displays a table of football scores from a collegiate football conference in
which the team names have one of the primary colors of their respective schools. The winning scores must appear larger
and in a different font than the losing scores. The team names must be in a script font.

<!DOCTYPE html>
<!-- e3_2.html
A solution to Exercise 3.2 - a styled table
-->
<html lang = "en">
<head>
<title> A Styled Table </title>
<style type = "text/css">
<!--
td.win {font-size: 1.2em; color: red;}
td.lose {font-size: 1.1em; color: blue;}
-->
</style>
<meta charset = "utf-8" />
</head>
<body>
<table border = "border">
<caption style = "font-size: 18pt"> Football Scores </caption>
<tr>
<th> Team </th>
<th> Score </th>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
color: gold;"> Colorado </th>
<td class = "win"> 30 </td>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
color: red;"> Nebraska </th>
<td class = "lose"> 29 </td>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
color: grey;"> Iowa State </th>
<td class = "win"> 17 </td>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
color: blue;"> Kansas </th>
<td class = "lose"> 10 </td>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
17
color: purple;"> Kansas State </th>
<td class = "win"> 48 </td>
</tr>
<tr>
<th style = "font-family: 'Century Gothic';
font-style: italic;
color: green;"> Missouri </th>
<td class = "lose"> 13 </td>
</tr>
</table>
</body>
</html>

2. Create and test an HTML document that has at least a half page of text and that has a small box of text embedded on the left
margin, with the main text flowing around the small box. The embedded text must appear in a smaller font and also must be set in
italic.

<!DOCTYPE html">
<!-- e3_4.html
A solution for Exercise 3.4 - floating a text element
-->
<html lang = "en">
<head>
<title> Floating a text element </title>
<meta charset = "utf-8" />
</head>
<body>
<p style = "float: left; width: 1.5in; margin-right: 10px; font-style: italic;
margin-bottom: 10px;" >
My airplane soars like an eagle and handles like
a hummingbird.
</p>

<p>
The 210 is the flagship
single-engine Cessna aircraft. Although the 210 began as a four-place aircraft, it soon
acquired a third row of seats, stretching it to a six-place plane. The 210 is classified

18
as a high-performance airplane, which means its landing gear is retractable and its engine
has more than 200 horsepower. In its first model year, which was 1960, the 210 was powered
by a 260-horsepower fuel-injected six-cylinder engine that displaced 471 cubic inches.
The 210 is the fastest single-engine airplane ever built by Cessna.
</p>
</body>
</html>

3. Create and test an HTML document that describes nested ordered lists of cars. The outer list must have three entries:
compact, midsize, and sports. Inside each of these three lists there must be two sublists of body styles. The compact-
and midsize-car sublists are two door and four door; the sports-car sublists are coupe and convertible. Each body-style
sublist must have at least three entries, each of which is the make and model of a particular car that fits the category.
The outer list must use uppercase Roman numerals, the middle lists must use uppercase letters, and the inner lists must
use Arabic numerals. The background color for the compact-car list must be pink; for the midsize-car list, it must be blue;
for the sports-car list, it must be red. All of the styles must be in a document style sheet.

<!DOCTYPE html>
<!-- e36.html
A solution to Exercise 3.6
-->
<html lang = "en">
<head>
<title> Exercise 3.6 </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;}
li.pink {color: pink}
li.blue {color: blue}
li.red {color: red}
</style>
<meta charset = "utf-8" />
</head>
<body>
<ol>
<li class = "pink"> Compact Cars
<ol>
<li> Two door

19
<ol>
<li> Hyundai Accent </li>
<li> Chevrolet Cobalt </li>
<li> Honda Civic </li>
</ol>
</li>
<li> Four door
<ol>
<li> Hyundai Accent </li>
<li> Chevrolet Cobalt </li>
<li> Honda Civic </li>
</ol>
</li>
</ol>
</li>

20
<li class = "blue"> Midsize Cars
<ol>
<li> Two door
<ol>
<li> Honda Accord </li>
<li> Hyundai Genesis </li>
<li> Nissan Altima </li>
</ol>
</li>
<li> Four door
<ol>
<li> Honda Accord </li>
<li> Dodge Avenger </li>
<li> Ford Fusion </li>
</ol>
</li>
</ol>
</li>
<li class = "red"> Sports Cars
<ol>
<li> Coupe
<ol>
<li> Jaguar XK </li>
<li> Ford Mustang </li>
<li> Nissan Z </li>
</ol>
</li>
<li> Convertible
<ol>
<li> Mazda Miata </li>
<li> Ford Mustang </li>
<li> Lotus Elise </li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>

21

You might also like