Css3

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>

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;
}

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;
}

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;}

Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div.ex
{
width:220px;
padding:25px;
border:15px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="w3css.gif" width="250" height="250" />
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>

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>

Styling 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;}
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

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

1. CSS3 Rounded Corners
div
{
border:2px solid;
border-radius:25px;
}
Example
1. CSS3 Box Shadow
div
{
box-shadow: 10px 10px 5px #888888;
}
Example

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;
}

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

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);

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
02 - Double Shadow
text-shadow: -10px 10px 0px #00e6e6,
-20px 20px 0px #01cccc,
-30px 30px 0px #00bdbd;
02 – 3D Shadow

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>

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:

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;
}

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

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

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

CSS3 Transitions and Animations

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

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

Css3

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Css3 (20)

Recently uploaded (20)

Css3