SlideShare a Scribd company logo
1 of 85
Download to read offline
CSS Technieken
  toegelicht

 Robin Poort, CEO & Co-founder, FinishJoomla
     Joomla!dagen Nederland, april 2011
Alle bestanden van de voorbeelden in deze
       presentatie zijn hier te vinden:

http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
CSS Techniques Explained
CSS Techniques Explained
CSS technieken toegelicht

Een goede basis
CSS – Een goede basis


▪ Cheatsheets
▪ Resets

▪ Frameworks

▪ Shorthand CSS

▪ Specificity + !important

▪ Clear & clearfix

▪ Code-commenting
Source: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
Source: http://meyerweb.com/eric/tools/css/reset/
Source: http://960.gs/demo.html
div.example {                         div.example2 {
      background-color: #FFFFFF;            font-family: Arial, sans-
       background-image:              serif;
url(img.png);                              font-size: 12px;
       background-position: left           line-height: 1.5em;
top;                                       font-weight: bold;
       background-repeat: repeat-x;        font-style: italic;
       border-width: 1px;                  font-variant: small-caps;
       border-style: solid;                list-style-type: disc;
       border-color: #000000;              list-style-position: inside;
       margin-top: 10px;                   list-style-image:
       margin-right: 10px;            url(img.png);
       margin-bottom: 10px;           }
       margin-left: 10px
       padding-top: 10px;
       padding-right: 15px;
       padding-bottom: 20px;
       padding-left: 15px;
}
div.example {
      background: #FFFFFF url(example.png) left top repeat-x;
     border: 1px solid #000000;
     margin: 10px;
     padding: 10px 15px 20px;
}



div.example2 {
      font: bold italic small-caps 1em/1.5em Arial,sans-serif;
     list-style: disc inside url(example.png);
}
Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
*                   {}   /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li                  {}   /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line       {}   /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li               {}   /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li            {}   /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up] {}        /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red        {}   /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level        {}   /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y               {}   /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""                 /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */




Source: http://www.w3.org/TR/CSS2/cascade.html
!important
.example {color: red !important}
                Wint van
<div class=”example” style=”color: blue;”>
<div class=”clear”></div>


            &
<div class=”clearfix”></div>
HTML markup                   CSS


<div class=”wrapper”>         .wrapper {
     Lorem ipsum                    background: #FFF;
     <div class=”floatbox”>         border: 5px solid #29BDBD;
              Floating box          margin: 10px;
     </div>                         padding: 10px;
</div>                        }
                              .floatbox {
Resultaat                           background: #FFF;
                                    border: 5px solid #333;
                                    padding: 10px;
                                    float: right;
                              }
HTML markup                      CSS (in 960 grid system)


<div class=”wrapper”>            .clear {
     Lorem ipsum                      clear: both;
     <div class=”floatbox”>           display: block;
              Floating box            overflow: hidden;
     </div>                           visibility: hidden;
     <div class=”clear”></div>        width: 0;
</div>                                height: 0;
                                 }
Resultaat
HTML markup                      CSS (in 960 grid system)


<div class=”wrapper clearfix”>   .clearfix:before,.clearfix:after {
     Lorem ipsum                      content: '0020';
     <div class=”floatbox”>           display: block;
              Floating box            overflow: hidden;
     </div>                           visibility: hidden;
</div>                                width: 0;
                                      height: 0;
Resultaat                        }
                                 .clearfix:after {
                                      clear: both;
                                 }
                                 .clearfix {
                                      zoom: 1;
                                 }
Code commenting

▪ Voor jezelf later
▪ Voor anderen na jou

▪ Bij hacks en adjustments




/* Als kopjes in je CSS file */
h3 {font-size: 1em;}


h3 {font-size: 1em;} /* Achter bepaalde styles */
CSS technieken toegelicht

Goed om te weten
CSS – goed om te weten



▪ Floating & position: absolute
▪ Class stacking

▪ .class.class

▪ #id.class

▪ CSS selectors
HTML markup                      CSS


<div class=”container”>          .container {
     <div class=”absolute”>            position: relative;
              Absolute                 z-index: 1;
     </div>                      }
     <div class=”floatbox”>      .absolute {
              Floating box             right: 10px;
     </div>                            position: absolute;
     <div class=”clear”></div>         top: 10px;
</div>                                 z-index: 2;
                                 }
Resultaat in IE7                 .floatbox {
                                       float: left;
                                 }
HTML markup                      CSS


<div class=”container”>          .container {
     <div>                             position: relative;
              <div                     z-index: 1;
class=”absolute”>                }
                     Absolute    .absolute {
              </div>                   right: 10px;
     </div>                            position: absolute;
     <div class=”floatbox”>            top: 10px;
              Floating box             z-index: 2;
     </div>                      }
     <div class=”clear”></div>   .floatbox {
</div>                                 float: left;
                                 }
Resultaat
HTML markup                      CSS


<div class=”container”>          .container {
     <div class=”IE-div”>              position: relative;
              <div                     z-index: 1;
class=”absolute”>                }
                     Absolute    .absolute {
              </div>                   right: 10px;
     </div>                            position: absolute;
     <div class=”floatbox”>            top: 10px;
              Floating box             z-index: 2;
     </div>                      }
     <div class=”clear”></div>   .floatbox {
</div>                                 float: left;
                                 }
Resultaat
<div class=”class stacking”></div>
HTML markup                     CSS


<div class=”blockBigBoldRed”>   .blockBigBoldRed {
     Example                          background: #FFFFFF;
</div>                                border: 1px solid #CCCCCC;
<div class=”blockBigBlue”>            margin: 10px;
     Example                          padding: 10px;
</div>                                font-size: 2em;
                                      color: red;
Resultaat                             font-weight: bold;
                                }
                                .blockBigBlue {
                                      background: #FFFFFF;
                                      border: 1px solid #CCCCCC;
                                      margin: 10px;
                                      padding: 10px;
                                      font-size: 2em;
                                      color: blue;
                                }
HTML markup                            CSS


<div class=”block”>                    .block {
     <div class=”bigFont”>                   background: #FFFFFF;
              <div class=”boldFont”>         border: 1px solid #CCCCCC;
                   <div                      margin: 10px;
class=”redFont”>                             padding: 10px;
                          Example      }
                   </div>              .bigFont {font-size: 2em;}
              </div>                   .redFont {color: red;}
     </div>                            .blueFont {color: blue;}
</div>                                 .boldFont { font-weight: bold;}
<div class=”block”>
     <div class=”bigFont”>             Resultaat
              <div class=”blueFont”>
                   Example
              </div>
     </div>
</div>
HTML markup                            CSS


<div class=”block bigFont boldFont     .block {
redFont”>                                    background: #FFFFFF;
     Example                                 border: 1px solid #CCCCCC;
</div>                                       margin: 10px;
<div class=”block bigFont blueFont”>         padding: 10px;
     Example                           }
</div>                                 .bigFont {font-size: 2em;}
                                       .redFont {color: red;}
Resultaat                              .blueFont {color: blue;}
                                       .boldFont {font-weight: bold;}
.class.class
HTML markup                           CSS


<div class=”block bigFont redFont”>   .block {
     Example                                background: #FFFFFF;
     <div class=”caption redFont”>          border: 1px solid #CCCCCC;
              Example                       margin: 10px;
     </div>                                 padding: 10px;
</div>                                }
                                      .bigFont {font-size: 2em;}
Resultaat                             .redFont {color: red;}


                                      .caption {
                                            background: #CCC;
                                            padding: 10px;
                                      }
HTML markup                           CSS


<div class=”block bigFont redFont”>   .block {
     Example                                background: #FFFFFF;
     <div class=”caption redFont”>          border: 1px solid #CCCCCC;
              Example                       margin: 10px;
     </div>                                 padding: 10px;
</div>                                }
                                      .bigFont {font-size: 2em;}
Resultaat                             .redFont {color: red;}


                                      .caption {
                                            background: #CCC;
                                            padding: 10px;
                                      }
                                      .caption.redFont {color: darkred;}
#id.class
HTML markup                      CSS


<div id=”bar1” class=”grid_4”>   .grid_4 {
     Example                           display: inline;
</div>                                 float: left;
<div id=”bar2” class=”grid_4”>         margin-left: 10px;
     Example                           margin-right: 10px;
</div>                                 position: relative;
<div id=”bar3” class=”grid_4”>         width: 300px;
     Example                     }
</div>
HTML markup                      CSS


<div id=”bar1” class=”grid_4”>   .grid_4 {
     Example                           display: inline;
</div>                                 float: left;
<div id=”bar2” class=”grid_4”>         margin-left: 10px;
     Example                           margin-right: 10px;
</div>                                 position: relative;
<div id=”bar3” class=”grid_4”>   }
     Example                     #bar1.grid_4 {margin-left: 0;}
</div>                           #bar3.grid_4 {margin-right: 0;}
Handige CSS selectors
    E F                          Matches any F element that is a descendant of
    an E                               element.
    E > F                  Matches any F element that is a child of an element
    E.
    E + F                  Matches any F element immediately preceded by a
                                   sibling element E.
    E:first-child          Matches element E when E is the first child of its
                                          parent.
    E[foo]                         Matches any E element with the "foo"
    attribute set                                    (whatever the value).
    E[foo="warn"]          Matches any E element whose "foo" attribute value
    is                             exactly equal to "warn".
    E[foo~="warn"]         Matches any E element whose "foo" attribute value
    is a                           list of space-separated values, one of which
    is                                    exactly equal to "warn".


Source: http://www.w3.org/TR/CSS2/selector.html
CSS
E>F
                                  .blog p {
HTML markup                             font-family: Arial, sans-
                                  serif;
<div class=”blog”>
                                        font-size: 1em;
     <p>Introduction</p>
                                        color: #555;
     <div class=”story”>
                                   }
           <p>Lorem ipsum dolor</p>
                                   .story p {
           <div class=”date”>
                                         font-size: 1.3em;
                 <p>Date</p>
                                         color: #111;
           </div>
                                   }
     </div>
</div>
                                  Resultaat
CSS
E>F
                                  .blog p {
HTML markup                             font-family: Arial, sans-
                                  serif;
<div class=”blog”>
                                        font-size: 1em;
     <p>Introduction</p>
                                        color: #555;
     <div class=”story”>
                                   }
           <p>Lorem ipsum dolor</p>
                                   .story > p {
           <div class=”date”>
                                         font-size: 1.3em;
                 <p>Date</p>
                                         color: #111;
           </div>
                                   }
     </div>
</div>
                                  Resultaat
CSS
E+F
                          h1 {
HTML markup                      margin: 0 0 1em 0;
                                 font-size: 2em;
<div class=”blog”>
                          }
     <h1>Title</h1>
                          h2 {
     <h2>Subtitle</h2>
                                 margin: 0 0 .5em 0;
     <h2>Subtitle</h2>
                                 font-size: 1.4em;
     <p>Lorem ipsum</p>
                                 color: #000;
     <h2>Subtitle</h2>
                          }
     <p>Lorem ipsum</p>
</div>
CSS
E+F
                          h1 {
HTML markup                      margin: 0 0 1em 0;
                                 font-size: 2em;
<div class=”blog”>
                          }
     <h1>Title</h1>
                          h2 {
     <h2>Subtitle</h2>
                                 margin: 0 0 .5em 0;
     <h2>Subtitle</h2>
                                 font-size: 1.4em;
     <p>Lorem ipsum</p>
                                 color: #000;
     <h2>Subtitle</h2>
                          }
     <p>Lorem ipsum</p>
                          h1 + h2 {
</div>
                                 margin-top: -1em;
                                 font-style: italic;
                          }
CSS
E:first-child
                          h1 {
HTML markup                      margin: 0 0 1em 0;
                                 font-size: 2em;
<div class=”blog”>
                                 color: #222;
     <h1>Title</h1>
                          }
     <p>Lorem ipsum</p>
                          p {
     <p>Lorem ipsum</p>
                                 color: #444;
</div>
                                 margin-bottom: 1em;
                          }
                          .blog p:first-child {
                                 font-family: serif;
                                 font-style: italic;
                                 color: #000;
                          }
CSS
E:first-child
                                   h1 {
HTML markup                               margin: 0 0 1em 0;
                                          font-size: 2em;
<div class=”blog”>
                                          color: #222;
     <h1>Title</h1>
                                   }
     <div class=”story”>
                                   p {
              <p>Lorem ipsum</p>
                                          color: #444;
              <p>Lorem ipsum</p>
                                          margin-bottom: 1em;
     </div>
                                   }
</div>
                                   .story p:first-child {
                                          font-family: serif;
                                          font-style: italic;
                                          color: #000;
                                   }
CSS
E[foo="warn"]
                                   input[type="text"] {
HTML markup                              width: 200px;
                                         border: 1px solid #CCC;
<label>Naam</label><br />
                                         background: #F5F5F5;
<input type="text" />
                                         padding: 5px;
<label>Geslacht</label><br />
                                   }
<label>
                                   input[type="radio"] {
     <input type="radio" />Man
                                         margin-left: 1em;
</label>
                                   }
<label>
     <input type="radio" />Vrouw
</label>
CSS technieken toegelicht

CSS in gebruik
CSS – In gebruik



▪ Google Fonts
▪ Attribute styling

▪ DropCaps

▪ Suckerfish menu

▪ Styling images
Source: http://www.google.com/webfonts?subset=latin&sort=pop
HTML markup


<!-- Begin plaats in <head> -->
<link href=”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu”
rel=”stylesheet” type=”text/css” />
<!-- Eind plaats in </head> -->


<h1>Title</h1>
<p>The quick brown fox jumps over the lazy dog.</p>



CSS


h1 {
       font-family: 'Yanone Kaffeesatz', arial, serif;
}
p {
       font-family: 'Ubuntu', arial, serif;
}
CSS Techniques Explained
CSS Techniques Explained
HTML markup


<ul>
        <li><a class=”doc-icon” href="test.doc">Lorem ipsum
dolor</a></li>
        <li><a class=”pdf-icon” href="test.pdf">Sit amet
consect</a></li>
        <li><a class=”xls-icon” href="test.xls">Lorem ipsum
dolor</a></li>
        <li><a class=”png-icon” href="test.png">Sit amet
consectet</a></li>
</ul>


CSS


li a.doc-icon {background: url(doc.gif) no-repeat; }
li a.pdf-icon {background: url(pdf.gif) no-repeat; }
li a.xls-icon {background: url(xls.gif) no-repeat; }
li a.png-icon {background: url(png.gif) no-repeat; }
HTML markup


<ul>
        <li><a href="test.doc">Lorem ipsum dolor</a></li>
        <li><a href="test.pdf">Sit amet consectetuer</a></li>
        <li><a href="test.xls">Lorem ipsum dolor</a></li>
        <li><a href="test.png">Sit amet consectetuer</a></li>
</ul>


<ul>
        <li><a href="http://twitter.com/finishjoomla">Twitter</a></li>
        <li><a
href="http://www.facebook.com/profile.php">Facebook</a></li>
        <li><a href="http://www.linkedin.com/company/">Linkedin</a></li>
        <li><a href="http://www.youtube.com/user/">Youtube</a></li>
</ul>
CSS


li a[href$='.doc'],
li a[href$='.pdf'],
li a[href$='.xls'],
li a[href$='.png'],
li a[href*='twitter.com'],
li a[href*='facebook.com'],
li a[href*='linkedin.com'],
li a[href*='youtube.com'] {
      padding-left:40px;
      min-height:24px;
      display:inline-block;
      line-height:24px;
}
CSS


li a[href$='.doc'] {background: url(doc.gif) no-repeat; }
li a[href$='.pdf'] {background: url(pdf.gif) no-repeat; }
li a[href$='.xls'] {background: url(xls.gif) no-repeat; }
li a[href$='.png'] {background: url(png.gif) no-repeat; }


li a[href*='twitter.com'] {background: url(twitter.gif) no-repeat; }
li a[href*='facebook.com'] {background: url(facebook.gif) no-repeat; }
li a[href*='linkedin.com'] {background: url(linkedin.gif) no-repeat; }
li a[href*='youtube.com'] {background: url(youtube.gif) no-repeat; }
CSS Techniques Explained
HTML markup


<p>
       <span class=”dropcap”>L</span>orem ipsum dolor sit amet,
                         consectetur adipiscing elit...
</p>


CSS


p {font-family: Arial, sans-serif;}
span.dropcap {
       font-size: 3em;
       color: #29BDBD;
       float: left;
       margin: 10px 10px 0 0;
       display: block;
}
HTML markup


<p class=”dropcap”>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>


CSS


p.dropcap {font-family: Arial, sans-serif;}
p.dropcap:first-letter {
       font-size: 3em;
       color: #29BDBD;
       float: left;
       margin: 10px 10px 0 0;
}
HTML markup


<p class=”dropcap”>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>


CSS


p.dropcap {font-family: 'Old Standard TT', Times, serif;}
p.dropcap:first-letter {
       font-family: 'UnifrakturMaguntia', Times, serif;
       font-size: 3em;
       color: #29BDBD;
       float: left;
       margin: 10px 10px 0 0;
}
CSS Techniques Explained
Source: http://www.flickr.com/photos/shadeofmelon/3584367692/
HTML markup


<ul>
        <li><a href="#">Item 1</a></li>
        <li class="parent"><a href="#">Item 2</a>
                <ul>
                        <li><a href="#">Sub item 1</a></li>
                        <li><a href="#">Sub item 2</a></li>
                        <li class="parent"><a href="#">Sub item 3</a>
                                <ul>
                                        <li><a href="#">Sub sub item 1</a></li>
                                        <li><a href="#">Sub sub item 2</a></li>
                                </ul>
                        </li>
                        <li><a href="#">Sub item 4</a></li>
                </ul>
        </li>
        <li><a href="#">Item 3</a></li>
</ul>
CSS Techniques Explained
ul li {float:left;position:relative;background:#555;}
ul li a {color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
CSS Techniques Explained
ul li {float:left;position:relative;background:#555;}
ul li a {color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
CSS Techniques Explained
ul li {float:left;position:relative;background:#555;}
ul li a {color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover ul {display:block;}
ul li:hover {background:#333;}
CSS Techniques Explained
ul li {float:left;position:relative;}
ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover > ul {display:block;}
ul li:hover {background:#333;}
CSS Techniques Explained
ul li {float:left;position:relative;}
ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover > ul {display:block;}
ul li:hover {background:#333;}
ul li:hover {background:#333;}
ul li li:hover {background:#111;}
ul li li:hover {background:#000;}
CSS Techniques Explained
ul li {float:left;position:relative;}
ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover > ul {display:block;}
ul li.parent:hover {background:#333;}
ul li:hover {background:#333;}
ul li li:hover {background:#111;}
ul li li:hover {background:#000;}
ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}
CSS Techniques Explained
ul li {float:left;position:relative;}
ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover > ul {display:block;}
ul li.parent:hover {background:#333;}
ul li:hover {background:#333;}
ul li li:hover {background:#111;}
ul li li:hover {background:#000;}
ul li.parent > a {background:url(arrow_down.png) no-repeat right 20px;}
CSS Techniques Explained
ul li {float:left;position:relative;}
ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;}
ul li ul {position:absolute;display:none;}
ul li li {float:none;}
ul li li a {width:200px;padding:5px 10px;}
ul li li ul {left:220px;top:0;}
ul li:hover > ul {display:block;}
ul li.parent:hover {background:#333;}
ul li:hover {background:#333;}
ul li li:hover {background:#111;}
ul li li:hover {background:#000;}
ul li.parent > a {background:url(arrow_down.png) no-repeat right 20px;}
ul li li.parent > a {background:url(arrow_side.png) no-repeat right 15px;}
CSS Techniques Explained
CSS Techniques Explained
CSS Techniques Explained
HTML markup


<img class=”img1” src=”image.png” alt=”image” />


CSS


img.img1 {
      background: #FFF;
      padding: 2px;
      border: 2px solid #AAA;
}
HTML markup


<img class=”img2” src=”image.png” alt=”image” />


CSS


img.img2 {
      background: url(seamless.png);
      padding: 4px;
}
HTML markup


<img class=”img3” src=”image.png” alt=”image” />


CSS


img.img3 {
      background: url(seamless.png);
      padding: 3px;
      border: 1px solid #000;
}
HTML markup


<img class=”img4” src=”image.png” alt=”image” />


CSS


img.img4 {
      background: #000;
      padding: 1px;
      border: 2px solid #FFF;
      outline: 1px solid #AAA;
}
Vragen?
Coupon code
                                          Robin Poort
  JD11NL                             robin@finishjoomla.com
– 15% discount on all our products
– Valid until 2 weeks from now       Twitter: @finishjoomla
– 50 coupons available

More Related Content

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

CSS Techniques Explained

  • 1. CSS Technieken toegelicht Robin Poort, CEO & Co-founder, FinishJoomla Joomla!dagen Nederland, april 2011
  • 2. Alle bestanden van de voorbeelden in deze presentatie zijn hier te vinden: http://www.finishjoomla.com/media/css-technieken-toegelicht.zip
  • 6. CSS – Een goede basis ▪ Cheatsheets ▪ Resets ▪ Frameworks ▪ Shorthand CSS ▪ Specificity + !important ▪ Clear & clearfix ▪ Code-commenting
  • 10. div.example { div.example2 { background-color: #FFFFFF; font-family: Arial, sans- background-image: serif; url(img.png); font-size: 12px; background-position: left line-height: 1.5em; top; font-weight: bold; background-repeat: repeat-x; font-style: italic; border-width: 1px; font-variant: small-caps; border-style: solid; list-style-type: disc; border-color: #000000; list-style-position: inside; margin-top: 10px; list-style-image: margin-right: 10px; url(img.png); margin-bottom: 10px; } margin-left: 10px padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 15px; }
  • 11. div.example { background: #FFFFFF url(example.png) left top repeat-x; border: 1px solid #000000; margin: 10px; padding: 10px 15px 20px; } div.example2 { font: bold italic small-caps 1em/1.5em Arial,sans-serif; list-style: disc inside url(example.png); }
  • 13. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up] {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ Source: http://www.w3.org/TR/CSS2/cascade.html
  • 15. .example {color: red !important} Wint van <div class=”example” style=”color: blue;”>
  • 16. <div class=”clear”></div> & <div class=”clearfix”></div>
  • 17. HTML markup CSS <div class=”wrapper”> .wrapper { Lorem ipsum background: #FFF; <div class=”floatbox”> border: 5px solid #29BDBD; Floating box margin: 10px; </div> padding: 10px; </div> } .floatbox { Resultaat background: #FFF; border: 5px solid #333; padding: 10px; float: right; }
  • 18. HTML markup CSS (in 960 grid system) <div class=”wrapper”> .clear { Lorem ipsum clear: both; <div class=”floatbox”> display: block; Floating box overflow: hidden; </div> visibility: hidden; <div class=”clear”></div> width: 0; </div> height: 0; } Resultaat
  • 19. HTML markup CSS (in 960 grid system) <div class=”wrapper clearfix”> .clearfix:before,.clearfix:after { Lorem ipsum content: '0020'; <div class=”floatbox”> display: block; Floating box overflow: hidden; </div> visibility: hidden; </div> width: 0; height: 0; Resultaat } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
  • 20. Code commenting ▪ Voor jezelf later ▪ Voor anderen na jou ▪ Bij hacks en adjustments /* Als kopjes in je CSS file */ h3 {font-size: 1em;} h3 {font-size: 1em;} /* Achter bepaalde styles */
  • 22. CSS – goed om te weten ▪ Floating & position: absolute ▪ Class stacking ▪ .class.class ▪ #id.class ▪ CSS selectors
  • 23. HTML markup CSS <div class=”container”> .container { <div class=”absolute”> position: relative; Absolute z-index: 1; </div> } <div class=”floatbox”> .absolute { Floating box right: 10px; </div> position: absolute; <div class=”clear”></div> top: 10px; </div> z-index: 2; } Resultaat in IE7 .floatbox { float: left; }
  • 24. HTML markup CSS <div class=”container”> .container { <div> position: relative; <div z-index: 1; class=”absolute”> } Absolute .absolute { </div> right: 10px; </div> position: absolute; <div class=”floatbox”> top: 10px; Floating box z-index: 2; </div> } <div class=”clear”></div> .floatbox { </div> float: left; } Resultaat
  • 25. HTML markup CSS <div class=”container”> .container { <div class=”IE-div”> position: relative; <div z-index: 1; class=”absolute”> } Absolute .absolute { </div> right: 10px; </div> position: absolute; <div class=”floatbox”> top: 10px; Floating box z-index: 2; </div> } <div class=”clear”></div> .floatbox { </div> float: left; } Resultaat
  • 27. HTML markup CSS <div class=”blockBigBoldRed”> .blockBigBoldRed { Example background: #FFFFFF; </div> border: 1px solid #CCCCCC; <div class=”blockBigBlue”> margin: 10px; Example padding: 10px; </div> font-size: 2em; color: red; Resultaat font-weight: bold; } .blockBigBlue { background: #FFFFFF; border: 1px solid #CCCCCC; margin: 10px; padding: 10px; font-size: 2em; color: blue; }
  • 28. HTML markup CSS <div class=”block”> .block { <div class=”bigFont”> background: #FFFFFF; <div class=”boldFont”> border: 1px solid #CCCCCC; <div margin: 10px; class=”redFont”> padding: 10px; Example } </div> .bigFont {font-size: 2em;} </div> .redFont {color: red;} </div> .blueFont {color: blue;} </div> .boldFont { font-weight: bold;} <div class=”block”> <div class=”bigFont”> Resultaat <div class=”blueFont”> Example </div> </div> </div>
  • 29. HTML markup CSS <div class=”block bigFont boldFont .block { redFont”> background: #FFFFFF; Example border: 1px solid #CCCCCC; </div> margin: 10px; <div class=”block bigFont blueFont”> padding: 10px; Example } </div> .bigFont {font-size: 2em;} .redFont {color: red;} Resultaat .blueFont {color: blue;} .boldFont {font-weight: bold;}
  • 31. HTML markup CSS <div class=”block bigFont redFont”> .block { Example background: #FFFFFF; <div class=”caption redFont”> border: 1px solid #CCCCCC; Example margin: 10px; </div> padding: 10px; </div> } .bigFont {font-size: 2em;} Resultaat .redFont {color: red;} .caption { background: #CCC; padding: 10px; }
  • 32. HTML markup CSS <div class=”block bigFont redFont”> .block { Example background: #FFFFFF; <div class=”caption redFont”> border: 1px solid #CCCCCC; Example margin: 10px; </div> padding: 10px; </div> } .bigFont {font-size: 2em;} Resultaat .redFont {color: red;} .caption { background: #CCC; padding: 10px; } .caption.redFont {color: darkred;}
  • 34. HTML markup CSS <div id=”bar1” class=”grid_4”> .grid_4 { Example display: inline; </div> float: left; <div id=”bar2” class=”grid_4”> margin-left: 10px; Example margin-right: 10px; </div> position: relative; <div id=”bar3” class=”grid_4”> width: 300px; Example } </div>
  • 35. HTML markup CSS <div id=”bar1” class=”grid_4”> .grid_4 { Example display: inline; </div> float: left; <div id=”bar2” class=”grid_4”> margin-left: 10px; Example margin-right: 10px; </div> position: relative; <div id=”bar3” class=”grid_4”> } Example #bar1.grid_4 {margin-left: 0;} </div> #bar3.grid_4 {margin-right: 0;}
  • 36. Handige CSS selectors E F Matches any F element that is a descendant of an E element. E > F Matches any F element that is a child of an element E. E + F Matches any F element immediately preceded by a sibling element E. E:first-child Matches element E when E is the first child of its parent. E[foo] Matches any E element with the "foo" attribute set (whatever the value). E[foo="warn"] Matches any E element whose "foo" attribute value is exactly equal to "warn". E[foo~="warn"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warn". Source: http://www.w3.org/TR/CSS2/selector.html
  • 37. CSS E>F .blog p { HTML markup font-family: Arial, sans- serif; <div class=”blog”> font-size: 1em; <p>Introduction</p> color: #555; <div class=”story”> } <p>Lorem ipsum dolor</p> .story p { <div class=”date”> font-size: 1.3em; <p>Date</p> color: #111; </div> } </div> </div> Resultaat
  • 38. CSS E>F .blog p { HTML markup font-family: Arial, sans- serif; <div class=”blog”> font-size: 1em; <p>Introduction</p> color: #555; <div class=”story”> } <p>Lorem ipsum dolor</p> .story > p { <div class=”date”> font-size: 1.3em; <p>Date</p> color: #111; </div> } </div> </div> Resultaat
  • 39. CSS E+F h1 { HTML markup margin: 0 0 1em 0; font-size: 2em; <div class=”blog”> } <h1>Title</h1> h2 { <h2>Subtitle</h2> margin: 0 0 .5em 0; <h2>Subtitle</h2> font-size: 1.4em; <p>Lorem ipsum</p> color: #000; <h2>Subtitle</h2> } <p>Lorem ipsum</p> </div>
  • 40. CSS E+F h1 { HTML markup margin: 0 0 1em 0; font-size: 2em; <div class=”blog”> } <h1>Title</h1> h2 { <h2>Subtitle</h2> margin: 0 0 .5em 0; <h2>Subtitle</h2> font-size: 1.4em; <p>Lorem ipsum</p> color: #000; <h2>Subtitle</h2> } <p>Lorem ipsum</p> h1 + h2 { </div> margin-top: -1em; font-style: italic; }
  • 41. CSS E:first-child h1 { HTML markup margin: 0 0 1em 0; font-size: 2em; <div class=”blog”> color: #222; <h1>Title</h1> } <p>Lorem ipsum</p> p { <p>Lorem ipsum</p> color: #444; </div> margin-bottom: 1em; } .blog p:first-child { font-family: serif; font-style: italic; color: #000; }
  • 42. CSS E:first-child h1 { HTML markup margin: 0 0 1em 0; font-size: 2em; <div class=”blog”> color: #222; <h1>Title</h1> } <div class=”story”> p { <p>Lorem ipsum</p> color: #444; <p>Lorem ipsum</p> margin-bottom: 1em; </div> } </div> .story p:first-child { font-family: serif; font-style: italic; color: #000; }
  • 43. CSS E[foo="warn"] input[type="text"] { HTML markup width: 200px; border: 1px solid #CCC; <label>Naam</label><br /> background: #F5F5F5; <input type="text" /> padding: 5px; <label>Geslacht</label><br /> } <label> input[type="radio"] { <input type="radio" />Man margin-left: 1em; </label> } <label> <input type="radio" />Vrouw </label>
  • 45. CSS – In gebruik ▪ Google Fonts ▪ Attribute styling ▪ DropCaps ▪ Suckerfish menu ▪ Styling images
  • 47. HTML markup <!-- Begin plaats in <head> --> <link href=”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Ubuntu” rel=”stylesheet” type=”text/css” /> <!-- Eind plaats in </head> --> <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> CSS h1 { font-family: 'Yanone Kaffeesatz', arial, serif; } p { font-family: 'Ubuntu', arial, serif; }
  • 50. HTML markup <ul> <li><a class=”doc-icon” href="test.doc">Lorem ipsum dolor</a></li> <li><a class=”pdf-icon” href="test.pdf">Sit amet consect</a></li> <li><a class=”xls-icon” href="test.xls">Lorem ipsum dolor</a></li> <li><a class=”png-icon” href="test.png">Sit amet consectet</a></li> </ul> CSS li a.doc-icon {background: url(doc.gif) no-repeat; } li a.pdf-icon {background: url(pdf.gif) no-repeat; } li a.xls-icon {background: url(xls.gif) no-repeat; } li a.png-icon {background: url(png.gif) no-repeat; }
  • 51. HTML markup <ul> <li><a href="test.doc">Lorem ipsum dolor</a></li> <li><a href="test.pdf">Sit amet consectetuer</a></li> <li><a href="test.xls">Lorem ipsum dolor</a></li> <li><a href="test.png">Sit amet consectetuer</a></li> </ul> <ul> <li><a href="http://twitter.com/finishjoomla">Twitter</a></li> <li><a href="http://www.facebook.com/profile.php">Facebook</a></li> <li><a href="http://www.linkedin.com/company/">Linkedin</a></li> <li><a href="http://www.youtube.com/user/">Youtube</a></li> </ul>
  • 52. CSS li a[href$='.doc'], li a[href$='.pdf'], li a[href$='.xls'], li a[href$='.png'], li a[href*='twitter.com'], li a[href*='facebook.com'], li a[href*='linkedin.com'], li a[href*='youtube.com'] { padding-left:40px; min-height:24px; display:inline-block; line-height:24px; }
  • 53. CSS li a[href$='.doc'] {background: url(doc.gif) no-repeat; } li a[href$='.pdf'] {background: url(pdf.gif) no-repeat; } li a[href$='.xls'] {background: url(xls.gif) no-repeat; } li a[href$='.png'] {background: url(png.gif) no-repeat; } li a[href*='twitter.com'] {background: url(twitter.gif) no-repeat; } li a[href*='facebook.com'] {background: url(facebook.gif) no-repeat; } li a[href*='linkedin.com'] {background: url(linkedin.gif) no-repeat; } li a[href*='youtube.com'] {background: url(youtube.gif) no-repeat; }
  • 55. HTML markup <p> <span class=”dropcap”>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p {font-family: Arial, sans-serif;} span.dropcap { font-size: 3em; color: #29BDBD; float: left; margin: 10px 10px 0 0; display: block; }
  • 56. HTML markup <p class=”dropcap”> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap {font-family: Arial, sans-serif;} p.dropcap:first-letter { font-size: 3em; color: #29BDBD; float: left; margin: 10px 10px 0 0; }
  • 57. HTML markup <p class=”dropcap”> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p> CSS p.dropcap {font-family: 'Old Standard TT', Times, serif;} p.dropcap:first-letter { font-family: 'UnifrakturMaguntia', Times, serif; font-size: 3em; color: #29BDBD; float: left; margin: 10px 10px 0 0; }
  • 60. HTML markup <ul> <li><a href="#">Item 1</a></li> <li class="parent"><a href="#">Item 2</a> <ul> <li><a href="#">Sub item 1</a></li> <li><a href="#">Sub item 2</a></li> <li class="parent"><a href="#">Sub item 3</a> <ul> <li><a href="#">Sub sub item 1</a></li> <li><a href="#">Sub sub item 2</a></li> </ul> </li> <li><a href="#">Sub item 4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> </ul>
  • 62. ul li {float:left;position:relative;background:#555;} ul li a {color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;}
  • 64. ul li {float:left;position:relative;background:#555;} ul li a {color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;}
  • 66. ul li {float:left;position:relative;background:#555;} ul li a {color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover ul {display:block;} ul li:hover {background:#333;}
  • 68. ul li {float:left;position:relative;} ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover > ul {display:block;} ul li:hover {background:#333;}
  • 70. ul li {float:left;position:relative;} ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover > ul {display:block;} ul li:hover {background:#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;}
  • 72. ul li {float:left;position:relative;} ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover > ul {display:block;} ul li.parent:hover {background:#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;} ul li.parent a {background:url(arrow_down.png) no-repeat right 20px;}
  • 74. ul li {float:left;position:relative;} ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover > ul {display:block;} ul li.parent:hover {background:#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;} ul li.parent > a {background:url(arrow_down.png) no-repeat right 20px;}
  • 76. ul li {float:left;position:relative;} ul li a {background:#555;color:#FFF;display:block;padding:5px 20px;} ul li ul {position:absolute;display:none;} ul li li {float:none;} ul li li a {width:200px;padding:5px 10px;} ul li li ul {left:220px;top:0;} ul li:hover > ul {display:block;} ul li.parent:hover {background:#333;} ul li:hover {background:#333;} ul li li:hover {background:#111;} ul li li:hover {background:#000;} ul li.parent > a {background:url(arrow_down.png) no-repeat right 20px;} ul li li.parent > a {background:url(arrow_side.png) no-repeat right 15px;}
  • 80. HTML markup <img class=”img1” src=”image.png” alt=”image” /> CSS img.img1 { background: #FFF; padding: 2px; border: 2px solid #AAA; }
  • 81. HTML markup <img class=”img2” src=”image.png” alt=”image” /> CSS img.img2 { background: url(seamless.png); padding: 4px; }
  • 82. HTML markup <img class=”img3” src=”image.png” alt=”image” /> CSS img.img3 { background: url(seamless.png); padding: 3px; border: 1px solid #000; }
  • 83. HTML markup <img class=”img4” src=”image.png” alt=”image” /> CSS img.img4 { background: #000; padding: 1px; border: 2px solid #FFF; outline: 1px solid #AAA; }
  • 85. Coupon code Robin Poort JD11NL robin@finishjoomla.com – 15% discount on all our products – Valid until 2 weeks from now Twitter: @finishjoomla – 50 coupons available