Cascading Style Sheets Example .
27
Cascading Style Sheets Example http://www.w3schools.com/css/ demo_default.htm
-
Upload
aleesha-underwood -
Category
Documents
-
view
237 -
download
0
Transcript of Cascading Style Sheets Example .
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
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> 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 selectorYou can define different styles for the same type
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
body {background-color: tan} h1 {color:maroon; font-size:20pt}
<html><head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head><body><h1>ttt</h1></body></html>
abc.html
mystyle.css
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
<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>
• Coffee • Tea
o Coffee o Tea
Coffee Tea
Coffee Tea
<ul class="disc"> or
<ul class="circle"> etc…
Styles: Lists (more)• Ordered listlist-style-type: decimal or lower-roman or upper-roman or
lower-alpha or upper-alpha …
• Image as a list-item markerlist-style-image: url("/images/arrow.gif")
• Place: list-style-position: outside or inside
{list-style: square inside url("/images/arrow.gif")}
Cascading Order: Inheritance
• Externalh3 { color: red; text-align: left; font-size:
8pt }
• Internalh3 { text-align: right; font-size: 20pt }
• Resultcolor: 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-repeatbackground-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
<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:visible or hidden}
h1 {display:none}
<table border=1><tr><td>1</td></tr><tr style="visibility:hidden"><td>2</td></tr><tr><td>3</td></tr></table>
<table border=1><tr><td>1</td></tr><tr style="display:none"><td>2</td></tr><tr><td>3</td></tr></table>
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>
:first-child Styles first subelement (child)
:first-line Styles first text line
:first-letter Styles first character
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}
