270 likes | 291 Views
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
E N D
Cascading Style Sheets Example http://www.w3schools.com/css/demo_default.htm
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
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.
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 }
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>
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>
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}
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>
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…
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")}
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
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
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
Background body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}
Background image background-image:url("/images/bg.jpg")
Background image background-repeat: no-repeator repeat repeat-y repeat-x
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}
Margin CSS Margin properties define the space around elements. margin-top margin-right margin-bottom: 20or =20px or20% or20cm margin-left
Position h1{position: absolute;bottom: 30px;right: 40px} h1{position: absolute; top: 10%; left: 20%} Image: vertical-align: baseline or top or bottom …
Cursor style <head><style type="text/css"> p {cursor: help}</style> • crosshair • pointer • default • help • wait • …
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>
How to make invisible h1 {visibility:visibleor hidden} h1 {display:none}
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
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 */
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>
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} }
Other • Forms: input[type="text"] {background-color:blue}