Powerpoint TemplatesPage 1

Cascading style sheet(c.s.s)

Powerpoint TemplatesPage 2

For designing rich look web pages we use c.s.s

We have 3types of c.s.sInline style sheetEmbeded style sheetExternal style sheet

We type the code in notepad and save it in .html format.

Powerpoint TemplatesPage 3

Inline style sheet: For this we write c.s.s properties directly at the tags by using style attribute.

Powerpoint TemplatesPage 4

Properties:

• Background-color: Used to change the bgcolor of a text in a web page.

• Color: Used to apply Color to the text in a web page.• Text-align: Used to adjust the text in left, right, centre of

the page.• Word-spacing: Used to give specified space in b/w the

words.• Letter-spacing: Used to give specified space in b/w the

letters.(ex: 12px px means pixel)

Powerpoint TemplatesPage 5

• Font-size: Used to give specified size to the font in the web page or a paragraph.

• Padding: used to give or arrange space (distance) b/w text of a paragraph Background Color in all 4 sides it gives distance.

• Line-height: line to line distance.

• Text- align: it helps to arrange the text in a paragraph to maintain same length in a line.

• Text-indent: it helps to provide a distance for a first line in a paragraph starting.

Embeded style sheet. : For this we write c.s.s properties at the head part by using style attribute

properties

url: it helps to bring the image to a web page by giving its address or the image name with format.(ex: bg.jpg) “background- image: url (“nh.jpg”)

Background-repeat: when we add an image then it will be added in a x , y axis format , no-repeat. So we have 4 types

Background-color: to give color to the webpage.

Paragraph styles

Border-style: solid, dotted, double

External style sheet: for this we write the css properties in another notepad nd save it with .css format.

We are calling this css file at the head part of the html by using link tag.

properties

• Link: This is used to link the code in different notepads.

• Syntax: <link rel="stylesheet" type="text/css" href="external.css">

Inserting of logo: Make a logo In Photoshop & save it with .png format.

If we save it in .jpeg format then it will be saved default with background color.

If we apply logo on our webpage then bgcolor of logo will also come on our website.

We want only logo so we save it with .png format.

View:

Page 14

Creating of horizontal menu:

Page 15

properties

Inserting of ICON: