1 / 27

Cascading Style Sheets

Cascading Style Sheets. Example http://www.w3schools.com/css/demo_default.htm. What is CSS?. CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work

atobin
Download Presentation

Cascading Style Sheets

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. Cascading Style Sheets Example http://www.w3schools.com/css/demo_default.htm

  2. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one

  3. Cascading Order • Browser default • External Style Sheet • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element) So, an inline style (inside an HTML element) has the highest priority.

  4. Syntax selector {property: value} Example:body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red} Grouping:h1,h2,h3,h4,h5,h6 { color: green }

  5. The class selector You can define different styles for the sametype of HTML element p.right {text-align: right} p.center {text-align: center} <p class="right"> This paragraph is right-aligned. </p> <p class="center"> This paragraph is center-aligned. </p>

  6. The class selector You can omit the tag name! .center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>

  7. How to insert a style sheet: External It is ideal when the style is applied to many pages abc.html <html> <head> <link rel="stylesheet" type="text/css"href="mystyle.css" /> </head> <body><h1>ttt</h1> </body></html> mystyle.css body {background-color: tan} h1 {color:maroon; font-size:20pt}

  8. How to insert a style sheet: Internal .. is used when a single document has a unique style. <html> <head> <style type="text/css"> p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>....</html>

  9. Styles: Lists • Coffee • Tea • Coffee • Tea • Coffee • Tea • Coffee • Tea <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square{list-style-type: square} ul.none {list-style-type: none} </style> <ul class="disc"> or <ul class="circle"> etc…

  10. Styles: Lists (more) • Ordered list list-style-type: decimal or lower-roman or upper-roman or lower-alpha or upper-alpha … • Image as a list-item marker list-style-image:url("/images/arrow.gif") • Place: list-style-position: outsideor inside {list-style: square inside url("/images/arrow.gif")}

  11. Cascading Order: Inheritance • External h3 { color: red; text-align: left; font-size: 8pt } • Internal h3 { text-align:right; font-size: 20pt } • Result color: red; text-align: right; font-size: 20pt

  12. Styles: Text color: redor#00ff00orrgb(0,255,0) text-align: centeror left or right or justify text-indent: 1cmor10% text-transform: uppercase or lowercase or capitalize

  13. Styles: Font font-family: timesorsans-serif … font-family: "lucida calligraphy", arial, 'sans serif'; font-style: italicor normal font-size:150% or small or x-small or large orx-large … font-weight: boldor 100 … 900 or normal

  14. Background body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}

  15. Background image background-image:url("/images/bg.jpg")

  16. Background image background-repeat: no-repeator repeat repeat-y repeat-x

  17. Background image background-repeat: no-repeat background-position: center centeror top left or bottom right or x y or x% y% body{ background-image: url("smiley.gif"); background-repeat: no-repeat; background-position: center center}

  18. Margin CSS Margin properties define the space around elements. margin-top margin-right margin-bottom: 20or =20px or20% or20cm margin-left

  19. Position h1{position: absolute;bottom: 30px;right: 40px} h1{position: absolute; top: 10%; left: 20%} Image: vertical-align: baseline or top or bottom …

  20. Cursor style <head><style type="text/css"> p {cursor: help}</style> • crosshair • pointer • default • help • wait • …

  21. Inline style • Inside a tag as an attribute, but following the css description syntax <p style="color:orange;cursor:help">This is a paragraph.</p>

  22. How to make invisible h1 {visibility:visibleor hidden} h1 {display:none}

  23. Other selectors • Connect css and html using ID of an html element css:#example {color:blue} Html: <p id="example"> somekind text </p> Where instead of “example” you can write any text

  24. Other selectors • Formatting links (tag a): a:link {color:red}      /* unvisited link */ a:visited {color:green}  /* visited link */ a:hover {color:orange}  /* mouse over link */ a:active {color:white}  /* selected link */

  25. Other selectors • Othe pseudo elements (defined using “:”) css:p:first-line {color:green} html: <p>Info</p> css: p.inf:first-letter {color:blue} html: <p class=“inf">Info</p>

  26. Media • Defines how it looks on different media (hiding for example some elements in printing) @media screen  {  p {font-family:verdana}  } @media print  {  p {display:none}  } @media screen,print  {  p.test {font-weight:bold}  }

  27. Other • Forms: input[type="text"] {background-color:blue}

More Related