Cascading Style Sheets Example

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 1.Browser default 2.External Style Sheet 3.Internal Style Sheet (inside the tag) 4.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 same type of HTML element p.right {text-align: right} p.center {text-align: center} This paragraph is right-aligned. This paragraph is center-aligned.

The class selector You can omit the tag name!.center {text-align: center} This heading will be center-aligned This paragraph will also be center-aligned.

How to insert a style sheet: External It is ideal when the style is applied to many pages body {background-color: tan} h1 {color:maroon; font-size:20pt} ttt abc.html mystyle.css

How to insert a style sheet: Internal.. is used when a single document has a unique style. p {margin-left: 20px} body {background-image: url("images/back40.gif")}....

Styles: Lists ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} Coffee Tea o Coffee o Tea  Coffee  Tea Coffee Tea or 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: outside or 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: red or #00ff00 or rgb(0,255,0) text-align: center or left or right or justify text-indent: 1cm or 10% text-transform: uppercase or lowercase or capitalize

Styles: Font font-family: times or sans-serif … font-family: "lucida calligraphy", arial, 'sans serif'; font-style: italic or normal font-size: 150% or small or x-small or large or x-large … font-weight: bold or 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-repeat or repeat repeat-y repeat-x

Background image background-repeat: no-repeat background-position: center center or 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: 20 or = 20px or 20% or 20cm 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 p {cursor: help} –crosshair –pointer –default –help –wait –…

Inline style Inside a tag as an attribute, but following the css description syntax This is a paragraph.

How to make invisible h1 {visibility:visible or hidden} h1 {display:none}

Other selectors Connect css and html using ID of an html element css: #example {color:blue} Html: somekind text 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: Info css: p.inf:first-letter {color:blue} html: Info :first-childStyles first subelement (child) :first-lineStyles first text line :first-letterStyles first character

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

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