Embed Size (px)
Citation preview
LITELAHORE INSTITUTE OF
TECHNICAL EDUCATION
MUHAMMAD
USMAN
PRESENTED
BY
INTRODUCTION
CSS WORK WERE INTRODUCT IN 1996.STYLE SHEET IS A COLLECTION
OF FORMATTING STYLE THAT CAN BE APPLY TO A WEB PAGE
AIM
THE AIM OF MY PRESENTATION IS TODISCUSS THE MAIN FEATURES OF CSS
AND HOW CSS WORKS
WHAT IS CSSTYPES OF CSSPARTS OF CSS
TEXT PROPERTIESDIV TAG
SEQUENCE
WHAT IS CSS
CSS ARE USED TO MODIFY THEPROPERTIES OF EXISTING HTMLTAGS.STYLE SHEET ARE USED TO
DEFINE STYLES FOR A WEBPAGE IN MANY WAYS
TYPES OF CSS
INLINE STYLE SHEET INTERNAL STYLE SHEETEXTERNAL STYLE SHEET
INLINE STYLE SHEET
INLINE STYLE SHEET IS APPLIED TO AN INDIVIDUAL TAGS.IT MODIFIYS THE
ATTRIBUTEOF A TAG IN CURRENT OCCURRENCE OF
THATTAG
SYNTAX OF INLINE STYLE SHEET
<!DOCTYPE html><html><body> <h1 style="color:blue;margin-left:30px;">This is a heading.</h1><p>This is a paragraph.</p> </body></html>
INTERNAL STYLE SHEET
INTERNAL STYLE SHEET IS INSERTED IN THE HEAD SECTION OF WEB PAGE IT ONLY EFFECTS THE WEB PAGE IN
WHICH IT IS
SYNTAX OF INTERNAL STYLE SHEET<html><head><style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} </style></head><body> <h1>This is a heading</h1><p>This is a paragraph.</p> </body></html>
EXTERNAL STYLE SHEET
AN EXTERNAL STYLE SHEET IS DEFINE IN A SEPRATE FILE STORED/SAVED WITH CSS
EXTENSION.
SYNTAX OF EXTERNAL STYLE SHEET
<html><head><link rel="stylesheet" type="text/css" href="mystyle.css"></head><body> <h1>This is a heading</h1><p>This is a paragraph.</p> </body></html>
PARTS OF CSS
A STYLE SHEET CONSISTS OF THREE PARTS
SELECTORPROPERTYVALUE
PARTS OF CSS
TEXT PROPERTIESCOLOR
DIRECTIONLETTER-SPACING
LINE-HEIGHTTEXT-ALIGN
WHITE-SPACETEXT DECORATION
TEXT-INDENTTEXT-SHADOW
TEXT-TRANSFERVERTICAL-ALIGNWORD-SPACING
COLOR The color property is
used to set the color of the text.
SYNTAX OF COLOR <html><head><style>body { color: blue;}h1 { color: green;}</style></head><body><h1>This is heading 1</h1><p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.</p></body></html>
DIRECTION
The direction property is used to change the text direction of an element
SYNTAX OF DIRECTION <html><head><style>div.ex1 { direction: rtl;}</style></head><body><div>This is default text direction.</div><div class="ex1">This is right-to-left text direction.</div></body></html>
TEXT ALIGNThe text-align property is used to set the horizontal alignment
of a text.
SYNTAX OF TEXT ALIGN <html><head><style>h1 { text-align: center;}h2 { text-align: left;}h3 { text-align: right;}</style></head><body><h1>Heading 1 (center)</h1><h2>Heading 2 (left)</h2><h3>Heading 3 (right)</h3><p>The three headings above are aligned center, left and right.</p></body></html>
TEXT DECORATION
The text-decoration property is used
to set or remove decorations from text.
SYNTAX OF TEXT DECORATION<!DOCTYPE html><html><head><style>a { text-decoration: none;}</style></head><body><p>A link with no underline: <a href="http://www.w3schools.com">W3Schools.com</a> </p></body></html>
TEXT TRANSFORM
The text-transform property is used to specify uppercase and
lowercase letters in a text.
SYNTAX OF TEXT TRANSFORM
<html><head><style>p.uppercase { text-transform: uppercase;}p.lowercase { text-transform: lowercase;}p.capitalize { text-transform: capitalize;}</style></head><body><p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p></body></html>
VERTICAL ALIGN
The vertical-align property sets the vertical alignment
of an element.
SYNTAX OF VERTICAL ALIGN
<!DOCTYPE html><html><head><style>img.top { vertical-align: text-top;}img.bottom { vertical-align: text-bottom;}</style></head><body><p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p> <p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p> <p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p></body></html>
TEXT INDENT
The text-indent property is
used to specify the indentation of the first line
of a text
SYNTAX OF TEXT INDENT
<html><head><style>p { text-indent: 50px;}</style></head><body><p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p></body></html>
LETTER SPACING
The letter-spacing property is used to specify the space between the characters in
a text.
SYNTAX OF LETTER SPACING
<html><head><style>h1 { letter-spacing: 3px;}h2 { letter-spacing: -3px;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2></body></html>
LINE HEIGHT
The line-height property is used to specify the space
between lines
SYNTAX OF LINE HEIGHT
<!DOCTYPE html><html><head><style>p.small { line-height: 0.7;}p.big { line-height: 1.8;}</style></head><body><p>This is a paragraph with a standard line-height.<br>The default line height in most browsers is about 110% to 120%.<br></p><p class="small">This is a paragraph with a smaller line-height.<br>This is a paragraph with a smaller line-height.<br></p><p class="big">This is a paragraph with a bigger line-height.<br>This is a paragraph with a bigger line-height.<br></p></body></html>
WORD SPACING
The word-spacing property is used to specify the space
between the words in a text
SYNTAX OF WORD SPACING
<html><head><style>h1 { word-spacing: 10px;}h2 { word-spacing: -5px;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2></body></html>
TEXT SHADOW
The text-shadow property
adds shadow to text
SYNTAX OF TEXT SHADOW
<!DOCTYPE html><html><head><style>h1 { text-shadow: 2px 2px #FF0000;}</style></head><body><h1>Text-shadow effect</h1><p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p></body></html>
WHITE SPACE
The white-space property specifies how white-space
inside an element is handled.
SYNTAX OF WHITE SPACE
<html><head><style>p { white-space: nowrap;}</style></head><body><p>This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.</p></body></html>
DIV TAG
DIV ELEMENT DEFINES THE DIVISION OR A SECTION IN AN
HTML DOCUMENT.
SYNTAX OF DIV TAG <html><head><style></style></head><body><div>This is default text direction.</div><div>This is right-to-left text direction.</div></body></html>
Have Any Question?
Thank You
