unit-3: cascading style sheet · vinay d.g page 4 external style sheets: an external style sheet...

Vinay D.G

Unit-3: Cascading Style Sheet Chapter: 1

Introduction What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design

language intended to simplify the process of making web pages

presentable.CSS handles the look and feel part of a web page.

CSS allows you to create rules that specify how the content of an element

should appear.

Using CSS, you can control the colour of the text, the style of fonts, the spacing

between paragraphs, how columns are sized and laid out, what background

images or colours are used, as well as a variety of other effects.

Most commonly, CSS is combined with the mark-up languages HTML or

XHTML.

Levels of Style Sheet: Levels of Style sheets are:

1. Internal Style sheet

a. Inline and

b. Document-level

2. External style sheets

Inline Style sheets apply to the content of a single element.

Document-level style sheets apply to the whole body of a document.

External style sheets can apply to the bodies of any number of documents.

Vinay D.G

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:

selector {property:value;}

Figure 3.1: selector and declaration(property and values)

Selector: A selector is an HTML tag at which a style will be applied.

This could be any tag like h1, table etc.

Property: A property is a type of attribute of HTML tag. Put simply, all

the HTML attributes are converted into CSS properties. They could be

color, border, etc.

Value: Values are assigned to properties. For example, color property can

have the value either red or #F1F1F1 etc.

Note: Do not add a space between the property value and the unit.

Internal style sheets: In this you are simply placing the CSS code within the tags of each HTML

(/XHTML) file you want to style with the CSS.

Example of inline style:

<!DOCTYPE html>

<html>

<head>

<title>CSS example 1</title>

</head>

<body>

<h3>Example of <u>Inline</u> style</h3>

<p style = color:red>CSS displaying in red color</p>

Vinay D.G

</body>

</html>

Result:

Example of document level style:

<!DOCTYPE html>

<html>

<head>

<title>CSS example</title>

<style type = "text/css">

h3 {

font-family:Andalus;

font-size:20pt;

color:blue;

}

p {


color:#36CFFF;

}

</style>

</head>

<body>

<h3>Example of <i><u>Document-level</u></i> style</h3>

<p>CSS displaying in Sky blue colour.</p>

</body>

</html>

Result:

Vinay D.G

External style sheets: An external style sheet can be written in any text editor.

With an external style sheet, you can change the look of an entire website by

changing just one file!

The file should not contain any html tags. The style sheet file must be saved

with a .css extension.

Each page must include a reference to the external style sheet file inside the

<link> element. The <link> element goes inside the <head> section:

<head>

<link rel="stylesheet" type="text/css" href="External 1.css">

</head>

Example of External style:

External 1.css

body {

background-color: lightblue;

}

h3 {

color: navy;

margin-left: 20px;

}

Pgm3.htm

<!DOCTYPE html>

<html>

<head>



</head>

<body>

Vinay D.G

<h3>Example of <i><u>External-level</u></i> style</h3>

<p> CSS displaying Background color</p>

</body>

</html>

Result:

CSS Comments: Comments are used to explain the code, and may help when you edit the source

code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */.

p {

color: red;

/* This is a single-line comment */

text-align: center;

}

/* This is

a multi-line

comment */

Selector forms: 1. Simple selector form:

The simple selector form is a single element name, such as p.

In this case, the property values in rule apply to all occurrences of

the named element.

The selector could be a list of element names, separated by

commas (,).

In this case, the property values apply to all occurrences of all of

the named elements.

Example:

Vinay D.G

h3 {font-size:24pt;}

p, h3 {font-size:20pt;}

2. class selector:

The class selector is used to specify a style for a group of elements.

This allows you to set a particular style for many HTML elements

with the same class.

The class selector uses the HTML class attribute, and is defined

with a ".”

Example

.center {text-align:center;}

<h2 class=”center”>Summary</h2>

You can make it a bit more particular.

Example:

p.center {text-align:center;}

<p class=”center”>

A paragraph of text that we want to be presented in center.</p>

3. id selector:

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 a ”#".

Imagine within the body element of our html page, we have the

following paragraph element

<p id=”welcome”>Welcome to the wonderful world of HTML</p>

We can then create a CSS rule with the id selector:

#welcome

{

text-align:center;

color:red;

}

Result:

Vinay D.G

4. Universal selector:

Applies to all elements in the document.

Rather than selecting elements of a specific type, the universal

selector quite simply matches the name of any element type.

* {} Targets all elements on the page.

Example:

Uni.html

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<h3>Example of <i><u>Universal selector </u></i> style</h3>

<p>CSS displaying Background color</p>

<p id="welcome">Welcome to the wonderful world of HTML</p>

</body>

</html>

Uni.css

*{

color:navy ;

background-color:purple;

margin-left: 30px;


font-size:20pt;

}

Vinay D.G

5. The Descendant Selectors:

Suppose you want to apply a style rule to a particular element only

when it lies inside a particular element.

As given in the following example, the style rule will apply to

<em> element only when it lies inside the <ul> tag.

ul em { color: #000000; }

Note: If the link to the external style sheet is placed after the internal style sheet

in HTML, the external style sheet will override the internal style sheet!

Selector Meaning Example

Universal Selector Applies to all elements in the

document

* {}

Targets all elements on the

page

Type Selector Type Selector h1, h2, h3 {}

Targets the <h1>, <h2> and

<h3>

Elements

Class Selector Matches an element whose

class attribute has a value

that matches the one

specified after the period (or

full stop) symbol

.note {}

Targets any element whose

class

attribute has a value of note

p.note {}

Targets only <p> elements

whose class attribute has a

value of note

Vinay D.G

ID Selector Matches an element whose id

attribute has a value that

matches the one specified

after the pound or hash

symbol

#introduction {}

Targets the element whose

id attribute has a value of

introduction

Child Selector Matches an element that is a

direct child of another

li>a {}

Targets any <a> elements

that

are children of an <li>

element

(but not other <a> elements

in

the page)

Descendant Selector Matches an element that is a

descendent of another

specified element (not just a

direct child of that element)

p a {}

Targets any <a> elements

that

sit inside a <p> element,

even if

there are other elements

nested

between them

Adjacent Sibling Selector Matches an element that is

the next sibling of another

h1+p {}

Targets the first <p> element

after any <h1> element (but

not

other <p> elements)

General Sibling Selector Matches an element that is a

sibling of another, although it

does not have to be the

directly preceding element

h1~p {}

If you had two <p> elements

that

are siblings of an <h1>

element,

this rule would apply to both

Vinay D.G

Chapter: 2

Font and Text properties The font properties are among the most commonly used of the style-sheet

properties. Virtually all (X)HTML documents include text, which is often used

in a variety of different situation. This creates a need for text in many different

fonts, font styles and sizes. You can set the following font properties of an

element:

The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.

The font-variant property is used to create a small-caps effect.

The font-weight property is used to increase or decrease how bold or

light a font appears.

The font-size property is used to increase or decrease the size of a font.

The font property is used as shorthand to specify a number of other font

properties.

Font Families: The font family property is used to specify a list of font names.

The value of this property is the name of the typeface you want to use.

You can specify a list of fonts separated by commas so that, if the

browser does not support your first choice of typeface installed, the

browser can try to use an alternative font from the list.

For Example:

font-family: Arial, “Times New Roman”, Andalus

In this case, the browser will use Arial if it supports. If not, it will use

Times New Roman if it supports it. If the browser supports neither Arial

nor Times New Roman, it will use Andalus if it can.

If the browser does not support any of the specified fonts, it will use an

alternative of its choosing (by default all browser use serif font).

If a font name is made up of more than one word, it should be put in

double quotes.

Vinay D.G

<p style="font-family: Arial, “Times New Roman”, serif;"> This

text is rendered in either Arial, “Times New Roman” or the default

serif font depending on which font you have at your system.</p>

Font Sizes: The font-size property enables you to specify a size for the font.

Example:

font-size:20pt;

Possible values could be xx-small, x-small, small, medium, large, x-large,

xx-large, smaller, larger, size in pixels or in %.

<p style="font-size:20px;">

This font size is 20 pixels

</p>

<p style="font-size:small;">

This font size is small

</p>

<p style="font-size:xx-large;">

This font size is xx-large

</p>

Result will be

There are several ways to specify the size of a font. The most common

are: pixels (px), percentage (%).

Font variants: The default value of the font-variant property is normal, which specifies

the usual character font.

Vinay D.G

This property can be set to small-caps to specify small capital characters.

small cap characters are all uppercase.

<p style="font-variant:small-caps;">

This text will be rendered as small caps

</p>

Result:

Font styles: The following example demonstrates how to set the font style of an

element. Possible values are normal, italic and oblique.

font-style: italic;

An alternative to italic is oblique, but when displayed, the two are nearly

identical, so oblique is not a terribly useful font style. In fact, some

browsers do not support oblique, so they display all oblique fonts in italic.

Example:

<p style=”font-style: italic;”>

This text represents the italic font style.</p>

Result:

This text represents the italic font style.

Font weights: The font-weight property is used to specify the degree of boldness.

Example:

font-weight: bold;

Besides bold, the values normal (the default), bolder, and lighter can be

specified.

Specific numbers also can be given in multiples of 100 from 100-900,

where 400 is the same as normal and 700 is the same as bold.

<p style="font-weight:bold;">

Vinay D.G

This text represents bold

</p>

<p style="font-weight:bolder;">

This text represents bolder

</p>

<p style="font-weight:lighter;">

This text represents lighter

</p>

<p style="font-weight:900;">

This font is 900 weight

</p>

Result:

Font shorthand’s: You can use the font property to set all the font properties at once.

Example:

font: bold 14pt “Times New Roman” Algerian

<title>Font Shorthands</title>

Vinay D.G

<body style="background-color:purple;">

<p style="font: bold 14pt Algerian "Times New Roman" ">

This Specifies that the font weight should be bold, The Font size

should be 14 points, and either Algerian or Times New Roman font

should be used with precedence given to Algerian.

</p>

Result:

Text Decoration The text-decoration property is used to specify some special features of

text.

The available values are line-through, overline, underline and none,

which is the default.

<body style="background-color:#008080;">

<p style="text-decoration: line-through;">

Text line-through

</p>

<p style="text-decoration: underline;">

Text underline

Vinay D.G

</p>

<p style="text-decoration: overline;">

Text overline

</p>

Result:

Text Direction The direction property is used to set the text direction.

Possible values are ltr or rtl.

<title>Font Direction</title>

<p style="direction:rtl;">

This text will be renedered from right to left

</p>

Result:

Letter-spacing The letter-spacing property is used to add or subtract space between the

letters that make up a word.

Vinay D.G

Possible values are normal or a number specifying space.

<p style="letter-spacing:10px;">

This text is having space between letters.

</p>

Result:

Word-spacing The word-spacing property is used to add or subtract space between the

words of a sentence.

Possible values are normal or a number specifying space.

<p style="word-spacing:15px;">

This text is having space between words.

</p>

Result:

Text-align The text-align property is used to align the text of a document.

Vinay D.G

Possible values are left, right, center, justify.

<p style="text-align:right;">

This will be right aligned.

</p>

<p style="text-align:center;">

This will be center aligned.

</p>

<p style="text-align:left;">

This will be left aligned.

</p>

Result:

This will be right aligned.

This will be center aligned.

This will be left aligned.

Text-transform The text-transform property is used to capitalize text or convert text to

uppercase or lowercase letters.

Possible values are none, capitalize, uppercase, lowercase.

<p style="text-transform: capitalize;">

This will be capitalized

</p>

<p style="text-transform: uppercase;">

This will be in uppercase

</p>

<p style="text-transform: lowercase;">

This will be in lowercase

</p>

Result:

Vinay D.G

Text-shadow The text-shadow property is used to set the text shadow around a text.

The value of this property is quite complicated because it can take three

lengths and a color for the drop shadow.

The first length indicates how far to the left or right the shadow should

fall.

The second value indicates the distance to the top or bottom that the

shadow should fall.

The third value is optional and specifies the amount of blur that should be

applied to the drop shadow.

The fourth value is the color of the drop shadow.

<p style="text-shadow:4px 4px 2px blue;">

If your browser supports the CSS text-shadow property,

this text will have a blue shadow.</p>

Result:

Vinay D.G

Chapter: 3

List properties

List-style-type properties The list-style-type property allows you to control the shape or style of a

bullet point (also known as a marker).

Unordered Lists

For an unordered list you can use the following values:

Value Description Example

None NA

disc (default) A filled-in circle

Circle An empty circle o

Square A filled-in square

Ordered List

Here are the values, which can be used for an ordered list:

Value Description Example

Decimal Number 1, 2, 3, 4, 5

decimal-leading-zero 0 before the number 01, 02, 03,04, 05

lower-alpha Lowercase alphanumeric

characters

a, b, c, d, e

upper-alpha Uppercase alphanumeric

characters

A, B, C, D, E

lower-roman Lowercase Roman

numerals

i, ii, iii, iv, v

upper-roman Uppercase Roman

numerals

I, II, III, IV, V

lower-Greek The marker is lower-

Greek

α, β, γ

Vinay D.G

Example

<html>

<head>

<title>List</title>

<style type="text/css">

* {

background-color:008080;

font: bold 14pt Andalus;

}

</style>

<ul style="list-style-type:circle;">

<li>HTML</li>

<li>CSS</li>

<li>JAVA SCRIPT</li>

</ul>

<ul style="list-style-type:square;">

<li>CSS1</li>

<li>Basic JavaScript</li>

<li>XML</li>

</ul>

<ol style="list-style-type:decimal;">

<li>XHTML</li>

<li>notepad</li>

<li>Notepad++</li>

</ol>

<ol style="list-style-type:lower-alpha;">

<li>maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<ol style="list-style-type:lower-greek ;">

<li>HTML</li>

<li>XHTML</li>

<li>CSS</li>

<li>JavaScript</li>

Vinay D.G

<li>XML</li>

</ol>

Result

Vinay D.G

List-style-image Property

You can specify an image to act as a bullet point using the list-style-

image property.

The value starts with the letters url and is followed by a pair of

parentheses. Inside the parentheses, the path to the image is given inside

double quotes.

Example

<html>

<head>

<title>List</title>


* {


font:bold 14pt Andalus;

}

</style>

<ul>

<li style="list-style-image: url('1.png');">Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<ul style="list-style-type:square;">

<li>CSS1</li>

<li>Basic JavaScript</li>

<li>XML</li>

</ul>

<ol style="list-style-type:decimal;">

<li>XHTML</li>

<li>notepad</li>

<li>Notepad++</li>

</ol>

Result

Vinay D.G

Color Properties: CSS uses color values to specify a color.

Typically, these are used to set a color either for the foreground of an

element (i.e., its text) or for the background of the element.

You can specify any color in CSS in one of three ways:

RGB Values:

These express colors in terms of how much red, green and blue are used

to make it up. For example: rgb(100,100,90)

Values for red, green, and blue are expressed as numbers between 0 and

255.

Vinay D.G

Hex codes:

These are six-digit codes that represent the amount of red, green and blue

in a color, [The first two digits (RR) represent a red value, the next two

are a green value (GG), and the last are the blue value (BB).] preceded by

a pound or hash # sign. For example: #ee3e80

color names:

There are 147 predefined color names that are recognized by browsers.

For example: aqua

Exapmle:

<!DOCTYPE html>

<html>

<head>

<title>Color Properties</title>

<style type = "text/css">

body{background-color: rgb(200,200,200);}

h3 {color: green;}

p.rgb {color: rgb(90,20,110);}

p.hex {color: #881055;}

p.names {color: blue;}

</style>

</head>

<body>

<h3>Color Using RGB</h3>

<p class="rgb">

These express colors in terms of how much red, green and blue are used to

make it up.</p>

<hr />

<h3>Color Using Hex codes</h3>

<p class="hex">These are six-digit codes that represent the amount of red,

green and blue in a color, preceded by a pound or hash # sign.</p>

<hr />

<h3>color Using names</h3>

Vinay D.G

<p class="names">There are 147 predefined color names that are recognized by

browsers.simply specifies the color by name</p>

Result:

Understanding Color

Every color on a computer screen is created by mixing amounts of red,

green, and blue.

Vinay D.G

Chapter: 4

The Box model

Figure: 4 The Box Model

Box Dimensions

By default a box is sized just big enough to hold its contents. To set your

own dimensions for a box you can use the height and width properties. The most popular ways to specify the size of a box are to use pixels,

percentages, or ems. Traditionally, pixels have been the most popular

method because they allow designers to accurately control their size.

When you use ems, the size of the box is based on the size of text within

it.

<html>

<head>

<title>box Example 1</title>


Vinay D.G

* {



}

p.box {

height: 300px;

width: 350px;

background-color: #bbbbaa;}

</style>

<h2>Box model- Width and height</h2>

<p>This program illustrate a simple example</p>

<p class="box">

The most popular ways to specify the size of a box are to use

pixels, percentages, or ems. Traditionally, pixels have been the

most popular method because they allow designers to accurately

control their size.

</p>

</html>

Result:

Vinay D.G

Border, Margin & Padding Every box has three available properties that can be adjusted to control its

appearance:

Border: - Every box has a border (even if it is not visible or is specified

to be 0 pixels wide). The border separates the edge of one box from

another.

Margin: - Margins sit outside the edge of the border. You can set the

width of a margin to create a gap between the borders of two adjacent

boxes.

Padding: - Padding is the space between the border of a box and any

content contained within it. Adding padding can increase the readability

of its contents.

Border-width The border-width property is used to control the width of a border. The

value of this property can either be given in pixels or using one of the

following values: (You cannot use percentages with this property.)

o thin

o medium

o thick

You can control the individual size of borders using four separate

properties:

o border-top-width

o border-right-width

o border-bottom-width

o border-left-width

You can also specify different widths for the four border values in one

property, like so:

border-width: 2px 1px 1px 2px;

The values here appear in clockwise order: top, right, bottom, left.

Vinay D.G

Border-style You can control the style of a border using the border-style property. This

property can take the following values:

o solid a single solid line

o dotted a series of square dots

o dashed a series of short lines

o double two solid lines

o groove appears to be carved into the page

o ridge appears to stick out from the page

o inset appears embedded into the page

o outset looks like it is coming out of the screen

o hidden / none no border is shown

You can individually change the styles of different borders using:

o border-top-style

o border-left-style

o border-right-style

o border-bottom-style

Example

<html>

<head>

<title>box Example 1</title>


* {

background-color: FFFFFF;


border-color: 0088dd;

}

p.one {border-style: solid;}

p.two {border-style: dotted;}

p.three {border-style: dashed;}

p.four {border-style: double;}

p.five {border-style: groove;}

p.six {border-style: ridge;}

p.seven {border-style: inset;}

p.eight {border-style: outset;}

</style>

Vinay D.G

<p class="one">This is Solid border style</p>

<p class="two">This is Dotted border style</p>

<p class="three">This is Dashed border style</p>

<p class="four">This is Double border style</p>

<p class="five">This is Groove border style</p>

<p class="six">This is Ridge border style</p>

<p class="seven">This is Inset border style</p>

<p class="eight">This is Outset border style</p>

Result

Border-color You can specify the color of a border using either RGB values, hex codes

or CSS color names.

It is possible to individually control the colors of the borders on different

sides of a box using:

o border-top-color

o border-right-color

o border-bottom-color

o border-left-color

It is also possible to use a shorthand to control all four border colors in

the one property:

o border-color: darkcyan deeppink darkcyan deeppink;

Vinay D.G

The values here appear in clockwise order: top, right, bottom, left.

Padding: The padding property allows you to specify how much space should

appear between the content of an element and its border.

The value of this property is most often specified in pixels.

You can specify different values for each side of a box using:

o padding-top

o padding-right

o padding-bottom

o padding-left

Or you can use a shorthand (where the values are in clockwise order: top,

right, bottom, left):

o padding: 10px 5px 3px 1px;

Margin: The margin property controls the gap between boxes. Its value is

commonly given in pixels, although you may also use percentages or

ems.

You can specify values for each side of a box using:

o margin-top

o margin-right

o margin-bottom

o margin-left

You can also use the shorthand (where the values are in clockwise order:

top, right, bottom, left):

o margin: 1px 2px 3px 4px;

Centering Content: If you want to center a box on the page you can set the left-margin and

right-margin to auto.

In order to center a box on the page, you need to set a width for the box

(otherwise it will take up the full width of the page).

Vinay D.G

Background image: The background-image property is used to place an image in the

background of an element.

Text over a background image can be difficult to read if the image has

areas that are nearly the same color as the text.

Background-repeat property, which can take the value- repeat(the

default), no-repeat, repeat-x or repeat-y.

The no-repeat value specifies that just one copy of the image is to be

displayed.

The repeat-x values means that the image is to be repeated horizontally.

The repeat-y values means that the image is to be repeated vertically.

Background.htm

<!DOCTYPE html>

<html>

<head>

<title>Background color</title>


</head>

<body >

<h1><center />Displaying Background image</h1>

</body>

</html>

External 1.css

body {

background: url('01.jpg') repeat-x center center #805599 ;

}

*{color: rgb(15,20,100);

}

Result:

Vinay D.G

Background position: When an image is not being repeated, you can use the background-

position property to specify where in the browser window the

background image should be placed.

This property usually has a pair of values. The first represents the

horizontal position and the second represents the vertical.

o left top

o left center

o left bottom

o center top

o center center

o center bottom

o right top

o right center

o right bottom

Bg_img_position.html

<!DOCTYPE html>

<html>

<head>

<title>Background color</title>

Vinay D.G


</head>

<body >

<h1><center />Displaying Background image position</h1>

</body>

</html>

External 1.css

body {

background: url('images.jpg') no-repeat blue;

background-position: right top;

}

*{color: rgb(150,20,100);

}

Result:

modifying above program (change no-repeat to repeat-y and position as center

top).

Vinay D.G

unit-3: cascading style sheet · vinay d.g page 4 external style sheets: an external style sheet...

Documents