CSS3

If you are one, when you see an impressive demonstration of a new CSS3 feature, you can’t wait to start using it in websites.

Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. The good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now!



1. Style solves the common problem:

Different browsers act differently to documents, so W3C standardized CSS standard that is supported by all major browsers.

2. Stylesheet can save a lot of work:

Font and Style attributes of HTML are used to format the document, so we define them using CSS in a separate file, by changing at one place we can modify our entire website pages.

3. Multiple style cascade:

Style can cascade into many ways i.e. into a single element, head or external files.



Three parts of CSS

  • The Style
  • Their Placement
  • Style Cascade

Style Definition

  • Selector
  • Declaration [Property:Value]


Custom CSS (ID & Class) Styles

HTML Base/Tag Styles

Advanced CSS Selector Styles

  • A particular combination of tags
  • A specific id attribute

Psuedo Classes e.g. a:hover



Custom CSS (Class) Selector can apply on any HTML tag 

<head>
<style type="text/css">
  body{ color: blue;}
  h2,h3,h5 { color: green;}
  h1{
    font-size: 36px;
    font-weight: bold;
    color: blue;
  }
  p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: red;
  }
</style>
</head>


 



<head>
        <style type="text/css">
        /* Applying selector on specific tag */
        p.uppercase {text-transform: uppercase}
        p.lowercase {text-transform: lowercase}
        p.capitalize {text-transform: capitalize}
        p.bkclr {background-color: #0000ff;}
        /* Can apply selector on any tag */
        .lowercase {text-transform: lowercase}
        </style>
</head>
<body>
        <p class="uppercase">This is some text in a paragraph</p>
        <p class="lowercase">This is some text in a paragraph</p>
        <p class=”bkclr”>This is some text in a paragraph</p>
</body>
</html>

 

 



<html>
<head>
    <style type="text/css">
    #uppercase {text-transform: uppercase}
    #bkclr {background-color: #0000ff;}
    </style>
</head>
<body>
    <p id="uppercase">This is some text in a paragraph</p>
    <p id=“bkclr">This is some text in a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">#container p{color:red;}
    td h3 {color: blue;}
    </style>
</head>
<body>
    <h3>This is some text in a paragraph</h3>
    <table border="0" cellspacing="8"cellpadding="0" >
    <tr>
    <td width="800" valign="middle"colspan="2">
    <h3>Now h3 is in td to test context style</h3>
    </td>
    </tr>
    <div id=“container”><p>Great to be here</p></div>
</body>
</html>

 



 Div tag can be place anywhere in the document. We can use it in absolute or relative to other elements.


    <div id=“myDiv”>
    </div>
    Child <div> tag
    <div id=“myDiv”>
    <div id=“childDiv”></div>
    </div>
   

 



<head>
        <style type=“text/css”>
        #myDiv{ position: absolute; top: 25px; left: 11px; width: 560px; height:350; background-color: grey;}.box
        </style>
</head>
<body>
    <div id=“myDiv”>
    <div class=“box”></div>
    </div>
</body>

 



<html>
<head>
    <style type="text/css">
    h3 {font-family: times}
    p {font-family: courier}
    p.sansserif {font-family: sans-serif}
    </style>
</head>
<body>
    <h3>This is header 3</h3>
    <p>This is a paragraph</p>
    <p class="sansserif">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    h1 {font-style: italic}
    h2 {font-style: normal}
    p {font-style: oblique}
    </style>
</head>
<body>
    <h1>This is header 1</h1>
    <h2>This is header 2</h2>
    <p>This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.normal {font-variant: normal}
    p.small {font-variant: small-caps}
    </style>
</head>
<body>
    <p class="normal">This is a paragraph</p>
    <p class="small">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.normal {font-weight: normal}
    p.thick {font-weight: bold}
    p.thicker {font-weight: 900}
    </style>
</head>
<body>
    <p class="normal">This is a paragraph</p>
    <p class="thick">This is a paragraph</p>
    <p class="thicker">This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{font: italic small-caps 900 12px arial}
    </style>
</head>
<body>
    <p>This is a paragraph</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.dotted {border-style: dotted}
    p.dashed {border-style: dashed}
    p.solid {border-style: solid}
    p.double {border-style: double}
    p.groove {border-style: groove}
    p.ridge {border-style: ridge}
    p.inset {border-style: inset}
    p.outset {border-style: outset}
    </style>
</head>
<body>
    <p class="dotted">A dotted border</p>
    <p class="dashed">A dashed border</p>
    <p class="solid">A solid border</p>
    <p class="double">A double border</p>
    <p class="groove">A groove border</p>
    <p class="ridge">A ridge border</p>
    <p class="inset">An inset border</p>
    <p class="outset">An outset border</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.soliddouble {border-style: solid double}
    p.doublesolid {border-style: double solid}
    p.groovedouble {border-style: groove double}
    p.three {border-style: solid double groove}
    </style>
</head>
<body>
    <p class="soliddouble">Some text</p>
    <p class="doublesolid">Some text</p>
    <p class="groovedouble">Some text</p>
    <p class="three">Some text</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p.one{border-style: solid;border-color: #0000ff}
    p.two{border-style: solid;border-color: #ff0000 #0000ff}
    p.three{border-style: solid;border-color: #ff0000 #00ff00 #0000ff}
    p.four{border-style: solid;border-color: #ff0000 #00ff00 #0000ffrgb(250,0,255)}
    </style>
</head>
<body>
    <p class="one">One-colored border!</p>
    <p class="two">Two-colored border!</p>
    <p class="three">Three-colored border!</p>
    <p class="four">Four-colored border!</p>
    <p><b>Note:</b> The "border-color"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-bottom-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-bottom-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-left-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-left-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-right-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-right-width"property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-style: solid;border-top-width: 15px}
    </style>
</head>
<body>
    <p><b>Note:</b> The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p{border-bottom: medium solid #ff0000}
    </style>
</head>
<body>
    <p>Some text.</p>
</body>
</html>

 



<html>
<head>
    <style type="text/css">
    p {border-left: medium solid #ff0000}
    </style>
</head>
<body>
    <p>Some text.</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.one{border-style: solid;border-width: 5px}
    p.two{border-style: solid;border-width: 5px 10px}
    p.three{border-style: solid;border-width: 5px 10px 1px}
    p.four{border-style: solid;border-width: 5px 10px 1px medium}
</style>
</head>
<body>
    <p class="one">Some text</p>
    <p class="two">Some text</p>
    <p class="three">Some text</p>
    <p class="four">Some text</p>
    <p><b>Note:</b> The "border-width" property
    does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p{border: medium double rgb(250,0,255)}
</style>
</head>
<body>
    <p>Some text</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="leftmargin">This is a paragraph with a specified left margin</p>
</body>
</html>

 



<html>
<head>
 <style type="text/css">
     p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="rightmargin">This is a paragraph with a specified right margin</p>
</body>
</html>
                

 



<html>
<head>
<style type="text/css">
    p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
    <p>This is a paragraph with no margin specified</p>
    <p class="topmargin">This is a paragraph with a specified top margin</p>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
    <p>This is a paragraph with no specified margins</p>
    <p class="margin">This is a paragraph with a specified margins</p>
    <p>This is a paragraph with no specified margins</p>
</body>
</html>      

 



<html>
<head>
<style type="text/css">
    td {padding-left: 2cm}
</style>
</head>
<body>
    <table border="1">
    <tr>
    <td>This is a tablecell with a left padding. This is a tablecell with a left padding.</td>
    </tr>
    </table>
</body>
</html> 

 



<html>
<head>
<style type="text/css">
    td {padding-bottom: 2cm}
</style>
</head>
<body>
    <table border="1">
    <tr>
    <td>This is a table cell with a bottom padding</td>
    </tr>
    </table>
</body>
</html>

 



<html>
<head>
<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>
</head>
<body>
    <ul class="disc">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
    <ul class="none">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul>
</body>
</html>

 



<html>
<head>
<style type="text/css">
    ul{list-style-image: url('arrow.gif')}
</style>
</head>
<body>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    </ul> 
</body>
</html>