1 / 14

CSS

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.

trevet
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS CSS(Cascading styles sheet)

  2. 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

  3. Inline Styles Css style will be written in the open tag<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

  4. Internal Style Sheet All css style will be held in head tag Like this : <head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

  5. External Style Sheet Css file format is .css Css file will be imported to html webpage by insert the code into head tag Example: <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> The advantage of external style sheet Css file can be loaded in to different webpage. No need to to write css again

  6. 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.

  7. Selector Tag ---- body,h1 p{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;}

  8. 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

  9. 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"

  10. Font Family p{font-family:"Times New Roman", Times, serif; font-size:14px; }

  11. 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 */

  12. CSS Box Model The image below illustrates the box model: width:220px;padding:10px;border:5px solid gray;margin:0px;

  13. Margin margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; The Shorten code margin:25px 50px 75px 100px; • top margin is 25px • right margin is 50px • bottom margin is 75px • left margin is 100px

  14. Padding • padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px; The shorten code padding:25px 50px 75px 100px; • top padding is 25px • right padding is 50px • bottom padding is 75px • left padding is 100px

More Related