SlideShare a Scribd company logo
Varun
Presentation
By
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
Thank You

More Related Content

Css3

  • 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;}
  • 6. 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>
  • 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>
  • 8. 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>
  • 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);
  • 14. 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
  • 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
  • 21. CSS3 Transitions and Animations
  • 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