CSS: Difference between revisions
(→CSS) |
|||
| Line 15: | Line 15: | ||
A CSS comment starts with /* and ends with */. Comments can also span multiple lines | A CSS comment starts with /* and ends with */. Comments can also span multiple lines | ||
== Selectors == | == [http://www.w3schools.com/css/css_selectors.asp Selectors] == | ||
* element selector | * element selector | ||
<pre> | <pre> | ||
Revision as of 16:35, 8 June 2014
The information is obtained from w3schools.com.
CSS
Syntax
p
{
color:red;
text-align:center;
}
where p is called selector and anything inside {} is declarations with a format of property:value.
Comments
A CSS comment starts with /* and ends with */. Comments can also span multiple lines
Selectors
- element selector
p { text-align:center;color:red; }
- id selector
#para1 { text-align:center;color:red; }
- class selector
.center { text-align:center;color:red; }
You can also specify that only specific HTML elements should be affected by a class.
p.center { text-align:center;color:red; }
- group selectors
h1,h2,p { text-align:center;color:red; }
Three ways to insert CSS
- External style sheet
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- Internal style sheet
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>
- Inline style sheet
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
Cascading order (last one has the highest priority)
- Browser default
- External style sheet
- Internal style sheet (in the head section)
- Inline style (inside an HTML element)
Background color/image
body {background-color:#b0c4de;}
body {background-image:url("paper.gif");}
body {background:#ffffff url("img_tree.png") no-repeat right top;}
Text
Color, alignment, decoration and indentation, fonts, styles
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
a {text-decoration:none;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
p {text-indent:50px;}
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Links
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
Lists
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
Tables
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
See here for a link to create a fancy table.
Border
We can create border for a paragraph or an image (CSS [attribute~=value] Selector).
Padding
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
Dimension (Width and height)
img.normal { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }
Positioning
http://www.w3schools.com/css/css_positioning.asp How to show overflow in an element using scroll]
Float
- An image with a caption that floats to the right
- the example of creating a horizontal menu
- the example of creating a homepage without tables (partition of a webpage)
Horizontal Align
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
Pseudo-elements
The ::first-line pseudo-element is used to add a special style to the first line of a text.
li { float:left; }
a { display:block; width:60px; }
Image gallery
Image Opacity/Transparency
- Creating transparent images - Hover effect
- Creating a transparent box with text on a background image
- Text in Transparent Box
Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
All Examples
http://www.w3schools.com/css/css_examples.asp
CSS3
Box
- Shadow
- Rounded corners
2D transform
Transition
Animation
Multiple columns
Check out the last example