The document provides information on various CSS techniques for styling web pages, including:
- Three methods for inserting stylesheets: external, internal, and inline stylesheets.
- Selectors like id, class, and element selectors for applying styles.
- Properties for styling various page elements like text, backgrounds, links, tables, and lists.
- New CSS3 features like rounded corners, drop shadows, multi-column layouts, transitions, animations and custom fonts.
- Examples are given for many of the properties to demonstrate their usage.
2. CSS How To
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
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/back40.gif");}
</style>
</head>
Inline Styles
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
3. The id and class Selectors
Id Selectors
#para1
{
text-align:center;
color:red;
}
class Selectors
.center
{
text-align:center;
}
Element Specific class selector
p.center
{
text-align:center;
}
4. CSS Styling Background
Background Color
body {background-color:#b0c4de;}
Background Image
body {background-image:url('paper.gif');}
Background Image - Repeat Horizontally or Vertically
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x; //y for vertical
}
Background Image - Set position and no-repeat
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
5. CSS Styling Text
Text Color
h1 {color:#00ff00;}
Text Alignment
h1 {text-align:center;}
Text Decoration
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Transformation
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
p {text-indent:50px;}
7. Styling Links
a:link
{color:#FF0000;} /* unvisited link */
a:visited
{color:#00FF00;} /* visited link */
a:hover
{color:#FF00FF;} /* mouse over link */
a:active
{color:#0000FF;} /* selected link */
• When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
Styling Tables
<style>
table, td, tr
{
border:1px solid green;
}
tr
{
background-color:green;
color:white;
}
</style>
9. CSS3 Borders
CSS3 Modules
1. Backgrounds and Borders
2. Box Model
3. Text Effects
4. 2D/3D Transformations
5. Animations
6. Selectors
7. Multiple Column Layout
8. User Interface
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a
border - without using a design program, like Photoshop.
Border properties:
1. border-radius
2. box-shadow
3. border-image
10. 1. CSS3 Rounded Corners
div
{
border:2px solid;
border-radius:25px;
}
Example
1. CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
}
Example
11. CSS3 Box Shadow - Requires 4 parameters and has an optional fifth.
1. First you have the horizontal offset of the shadow towards your element.
2. Second you have the vertical offset
3. Third parameter is the blur distance. No negative values allowed.
4. Fourth is the color of your shadow.
5. The optional fifth parameter is the ‘inset’ keyword which indicates that the
box-shadow should be an inner shadow instead of the standard outer shadow.
Demo – boxshadow.html
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888 inset;
}
12. CSS3 Border Image
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Original image
The image is tiled (repeated) to
fill the area
The image is stretched to fill the
area
13. CSS3 Text Shadow - Requires 4 parameters
1. First you have the horizontal offset
2. Second you have the vertical offset
3. Third parameter is the blur distance. No negative values allowed.
4. Fourth is the color of your shadow.
( text-shadow: horizontal-offset vertical-offset blur color; )
Example 01
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
15. CSS3 – ( font – face Rule )
1. Before CSS3, web designers had to use fonts that were already installed on the user's computer.
2. With CSS3, web designers can use whatever font he/she likes.
3. When you have found/bought the font you wish to use, include the font file on your web server,
and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
16. CSS3 – New User Interface features
1. resize
2. outline-offset
3. box-sizing
CSS3 Resizing
In CSS3, the resize property specifies whether or not an element should be resizable
by the user.
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_resize&preval=horizontal
resize: none|both|horizontal|vertical:
17. CSS3 Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
18. CSS3 – Multiple Columns
1. column-count
2. column-gap
3. column-rule
Column Count
With CSS3, you can create multiple columns for laying out text - like in newspapers!
div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-count
19. Column Gap
div
{
column-gap:40px;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and
Chrome */
}
The column-gap property specifies the gap between the columns.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-gap
20. Column Rule
The column-rule property sets the width, style, and color of the rule between columns.
div
{
column-rule:3px outset #ff00ff;
-moz-column-rule:3px outset #ff00ff; /* Firefox
*/
-webkit-column-rule:3px outset #ff00ff; /*
Safari and Chrome */
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-rule-
style&preval=hidden
div
{
column-count:3;
column-rule-style:solid;
column-rule-color:rgba(255,130,255,0.5);
}
http://www.w3schools.com/cssref/playit.asp?f
ilename=playcss_column-rule-color
22. With CSS3, we can add an effect when changing from one style to another,
without using Flash animations or JavaScripts.
property :
-webkit-transition:
-webkit-transition-delay:
-webkit-transition-duration:
-webkit-transition-timing-function:
-webkit-transition-property:
CSS3 Transitions
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition-
property
23. With CSS3, we can create animations, which can replace animated images, Flash
animations, and JavaScripts in many web pages.
CSS3 @keyframes Rule
div
{
animation: myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
CSS3 Animation