BEAUTIFUL CSS PRESENTATION EASY TO MADE
-
Upload
rana-usman -
Category
Education
-
view
171 -
download
0
Transcript of BEAUTIFUL CSS PRESENTATION EASY TO MADE
![Page 1: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/1.jpg)
LITELAHORE INSTITUTE OF
TECHNICAL EDUCATION
![Page 2: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/2.jpg)
![Page 3: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/3.jpg)
MUHAMMAD
USMAN
PRESENTED
BY
![Page 4: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/4.jpg)
![Page 5: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/5.jpg)
INTRODUCTION
CSS WORK WERE INTRODUCT IN 1996.STYLE SHEET IS A COLLECTION
OF FORMATTING STYLE THAT CAN BE APPLY TO A WEB PAGE
![Page 6: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/6.jpg)
AIM
THE AIM OF MY PRESENTATION IS TODISCUSS THE MAIN FEATURES OF CSS
AND HOW CSS WORKS
![Page 7: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/7.jpg)
WHAT IS CSSTYPES OF CSSPARTS OF CSS
TEXT PROPERTIESDIV TAG
SEQUENCE
![Page 8: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/8.jpg)
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
![Page 9: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/9.jpg)
TYPES OF CSS
INLINE STYLE SHEET INTERNAL STYLE SHEETEXTERNAL STYLE SHEET
![Page 10: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/10.jpg)
INLINE STYLE SHEET
INLINE STYLE SHEET IS APPLIED TO AN INDIVIDUAL TAGS.IT MODIFIYS THE
ATTRIBUTEOF A TAG IN CURRENT OCCURRENCE OF
THATTAG
![Page 11: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/11.jpg)
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>
![Page 12: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/12.jpg)
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
![Page 13: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/13.jpg)
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>
![Page 14: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/14.jpg)
EXTERNAL STYLE SHEET
AN EXTERNAL STYLE SHEET IS DEFINE IN A SEPRATE FILE STORED/SAVED WITH CSS
EXTENSION.
![Page 15: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/15.jpg)
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>
![Page 16: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/16.jpg)
PARTS OF CSS
A STYLE SHEET CONSISTS OF THREE PARTS
SELECTORPROPERTYVALUE
![Page 17: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/17.jpg)
PARTS OF CSS
![Page 18: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/18.jpg)
TEXT PROPERTIESCOLOR
DIRECTIONLETTER-SPACING
LINE-HEIGHTTEXT-ALIGN
WHITE-SPACETEXT DECORATION
TEXT-INDENTTEXT-SHADOW
TEXT-TRANSFERVERTICAL-ALIGNWORD-SPACING
![Page 19: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/19.jpg)
COLOR The color property is
used to set the color of the text.
![Page 20: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/20.jpg)
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>
![Page 21: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/21.jpg)
DIRECTION
The direction property is used to change the text direction of an element
![Page 22: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/22.jpg)
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>
![Page 23: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/23.jpg)
TEXT ALIGNThe text-align property is used to set the horizontal alignment
of a text.
![Page 24: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/24.jpg)
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>
![Page 25: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/25.jpg)
TEXT DECORATION
The text-decoration property is used
to set or remove decorations from text.
![Page 26: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/26.jpg)
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>
![Page 27: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/27.jpg)
TEXT TRANSFORM
The text-transform property is used to specify uppercase and
lowercase letters in a text.
![Page 28: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/28.jpg)
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>
![Page 29: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/29.jpg)
VERTICAL ALIGN
The vertical-align property sets the vertical alignment
of an element.
![Page 30: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/30.jpg)
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>
![Page 31: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/31.jpg)
TEXT INDENT
The text-indent property is
used to specify the indentation of the first line
of a text
![Page 32: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/32.jpg)
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>
![Page 33: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/33.jpg)
LETTER SPACING
The letter-spacing property is used to specify the space between the characters in
a text.
![Page 34: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/34.jpg)
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>
![Page 35: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/35.jpg)
LINE HEIGHT
The line-height property is used to specify the space
between lines
![Page 36: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/36.jpg)
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>
![Page 37: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/37.jpg)
WORD SPACING
The word-spacing property is used to specify the space
between the words in a text
![Page 38: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/38.jpg)
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>
![Page 39: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/39.jpg)
TEXT SHADOW
The text-shadow property
adds shadow to text
![Page 40: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/40.jpg)
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>
![Page 41: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/41.jpg)
WHITE SPACE
The white-space property specifies how white-space
inside an element is handled.
![Page 42: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/42.jpg)
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>
![Page 43: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/43.jpg)
DIV TAG
DIV ELEMENT DEFINES THE DIVISION OR A SECTION IN AN
HTML DOCUMENT.
![Page 44: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/44.jpg)
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>
![Page 45: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/45.jpg)
Have Any Question?
![Page 46: BEAUTIFUL CSS PRESENTATION EASY TO MADE](https://reader034.fdocuments.us/reader034/viewer/2022042723/587a32911a28abdb1c8b4ea9/html5/thumbnails/46.jpg)
Thank You