Cascading style sheet
-
Upload
harisha-chigurupati -
Category
Technology
-
view
333 -
download
0
Transcript of Cascading style sheet
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: