css
DESCRIPTION
CSS. CSS(Cascading styles sheet) . CSS(Cascading styles sheet) . CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style. Inline Styles. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/1.jpg)
CSSCSS(Cascading styles sheet)
![Page 2: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/2.jpg)
CSS(Cascading styles sheet)
CSS normally control the html elements.
Three Ways to Insert CSSThere are three ways of inserting a style sheet:• External style sheet• Internal style sheet• Inline style
![Page 3: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/3.jpg)
Inline Styles
Css style will be written in the open tag<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
![Page 4: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/4.jpg)
Internal Style Sheet
All css style will be held in head tagLike this :<head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
![Page 5: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/5.jpg)
External Style Sheet
Css file format is .cssCss file will be imported to html webpage by insert
the code into head tagExample:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
The advantage of external style sheetCss file can be loaded in to different webpage. No need to to write css
again
![Page 6: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/6.jpg)
CSS Syntax
• The selector is normally the HTML element you want to style.• Each declaration consists of a property and a value.• The property is the style attribute you want to change. Each
property has a value.
![Page 7: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/7.jpg)
Selector
Tag ---- body,h1p
{color:red;text-align:center;}
ID ----- name of element <div id=“name”>#para1
{text-align:center;color:red;}
Class ----- set of style.center {text-align:center;}
![Page 8: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/8.jpg)
CSS Styling
body {background-color:#b0c4de;}
body {background-image:url('bgdesert.jpg');}
When using the shorthand property the order of the property values is:
• background-color• background-image• background-repeat• background-attachment• background-position
![Page 9: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/9.jpg)
CSS Styling
TEXT FORMATTING• Text Color• The color property is used to set the color of
the text.• With CSS, a color is most often specified by:• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red"
![Page 10: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/10.jpg)
Font Family
p{font-family:"Times New Roman", Times, serif;font-size:14px;
}
![Page 11: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/11.jpg)
Styling Links
The four links states are:• a:link - a normal, unvisited link• a:visited - a link the user has visited• a:hover - a link when the user mouses over it• a:active - a link the moment it is clicked a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
![Page 12: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/12.jpg)
CSS Box Model
The image below illustrates the box model:
width:220px;padding:10px;border:5px solid gray;margin:0px;
![Page 13: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/13.jpg)
Margin
margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
The Shorten codemargin:25px 50px 75px 100px;• top margin is 25px• right margin is 50px• bottom margin is 75px• left margin is 100px
![Page 14: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022070423/56816688550346895dda3f21/html5/thumbnails/14.jpg)
Padding• padding-top:25px;
padding-bottom:25px;padding-right:50px;padding-left:50px;
The shorten codepadding:25px 50px 75px 100px;• top padding is 25px• right padding is 50px• bottom padding is 75px• left padding is 100px