The ITC Prog Blog: CSS Intermediate: an explanation of CSS Advanced

Introduction:

You're probably wondering at this point: Daniel, you've gone in the wrong order! Well... kinda :) Chances are some of the CSS you'd seen last time was interesting to look at but you had no clue what each section was attempting to do with various non alpha-numeric characters used in each declaration. That's why an intermediate blog is in order.

Onto the explanation of last week's coding fun. Below is the code from layout.css:

* (asterisk) takes care of all classes in the calling page.
body takes care of the body tag that exists on the calling page.
header takes care of all generic header tags that exist on the calling page.
header h2 takes care of the specific header h2 tag(s) and extends the css from header that was defined above it and modifies all h2 tags that exist on the calling page.
.container takes care of all elements with the id of container on the calling page.

This is some cool stuff!

From the file slideshow.cs we have even more interesting samples:

span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;

}
ul.slider li {
    float:left;

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    border:1px solid #888;
    height:453px;
    overflow:hidden;
    position:relative;
    width:604px;
    z-index:10;

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:35%;
    opacity:0; 
    position:absolute;
    top:0;

-moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);

-moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6,
ul.slider li.slides img.g7 {
    margin-left:-302px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#bbb;
    border:2px solid #888;
    height:451px;
    position:relative;
    width:48px;
    z-index:5;
}
ul.slider li.lArrow {
    border-radius:100px 0 0 100px;
    border-width:2px 0 2px 2px;
}
ul.slider li.rArrow {
    border-radius:0 100px 100px 0;
    border-width:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:50px;
}
ul.slider li.lArrow:hover {
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {
    background-color:#eee;
    left:-2px;
}
ul.slider li.track {
    background-color:rgba(255,255,255,0.3);
    clear:left;
    height:25px;
    margin-left:51px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:804px;
    z-index:20;
}
ul.slider li.track a {
    background-color:#fff;
    display:inline-block;
    height:15px;
    margin:5px;
    width:10px;

border-radius:5px;
    -moz-box-shadow:2px 1px 1px #000000;
    -ms-box-shadow:2px 1px 1px #000000;
    -webkit-box-shadow:2px 1px 1px #000000);
    -o-box-shadow:2px 1px 1px #000000;
    box-shadow:2px 1px 1px #000000;
}
ul.slider li.track a:hover {
    background-color:#0f0;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5,
span#slide6:target ~ ul.slider li.slides .g6,
span#slide7:target ~ ul.slider li.slides .g7{
    opacity:1;

-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
ul.slider li.slides .g0 {
    margin-left:-302px;
    opacity:1;

-moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0,
span#slide6:target ~ ul.slider li.slides .g0,
span#slide7:target ~ ul.slider li.slides .g0 {
    opacity:0;

-moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}
span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4, 
span#slide5:target ~ ul.slider li.track .tr5, 
span#slide6:target ~ ul.slider li.track .tr6,
span#slide7:target ~ ul.slider li.track .tr7 {
    background-color:#f00;
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#slide6:target ~ ul.slider li.lArrow a,
span#slide6:target ~ ul.slider li.rArrow a {z-index:10}
span#slide6:target ~ ul.slider li.rArrow .a7 {z-index:100}
span#slide6:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide7:target ~ ul.slider li.lArrow a,
span#slide7:target ~ ul.slider li.rArrow a {z-index:10}
span#slide7:target ~ ul.slider li.rArrow .a8 {z-index:100}
span#slide7:target ~ ul.slider li.lArrow .a1 {z-index:100}

span.cap takes care of all span tags with the id of cap that exist on the calling page. Think of this logic in the form of (tag type).(id of tag type).

That covers the bulk of the page layout except for one other declaration type on the page: span#slide1:target ~ ul.slider li.lArrow a. Where the . selector uses all generic (id=tag) tags # calls out a specific tag name. The ~ (tilde/squiggle/twiddle) selector allows you to call a sibling element of the first id'd item getting css'ified to simplify the declarations you declare.

Here's another code sampling from last time, this time a portion of the index.html code written to call the CSS files used for the last tutorial:

for the css declaration span#slide7:target ~ ul.slider li.track .tr7 that makes the class "tr7" within the list item (li) class "track" within unordered list (ul) have the background color of #f00 (this is the hexadecimal value for Red).

Enjoy!

Source:

http://www.w3schools.com/cssref/css_selectors.asp
http://www.color-hex.com/color/ff0000

The ITC Prog Blog

Wednesday, September 17, 2014

CSS Intermediate: an explanation of CSS Advanced

Introduction:

Source:

No comments:

Post a Comment

Contributors