CSS Learning Notes

h1 {color:red; font-size:14px;}
P {font-family: "sans serif";}
Text-align:center;
Background: #fff;
margin:0;
padding:0;

Grouping of selectors
H1,h2,h3,h4,h5,h6 {
Color:green;
}
Inheritance and its problems
Body {
Font-family:verdana, Sans-serif;
}

Body {
Font-family:verdana, Sans-serif;
}

TD, UL, OL, UL, Li, DL, DT, DD {
Font-family:verdana, Sans-serif;
}

p {
Font-family:times, "Times New Roman", serif;
}

Derived selectors
Li Strong {
Font-style:italic;
Font-weight:normal;
}

ID Selector
#red {color:red;}
#green {color:green;}

Class Selector
. Center {Text-align:center}

Property Selector
[Title=w3school]
{
BORDER:5PX solid blue;
}

References to CSS
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css"/>

Create CSS internally
<style type= "Text/css" >
hr {Color:sienna;}
p {margin-left:20px;}
Body {background-image:url ("Images/back40.gif");}
</style>

Background
Body
{
Background-image:url (/i/eg_bg_03.gif);
Background-repeat:repeat-y;
}

Body
{
Background-image:url ('/i/eg_bg_03.gif ');
Background-repeat:no-repeat;
Background-position:center; Background-position:top;

Background-position Property

Single keyword equivalent keyword
Centercenter Center
Toptop Center or center top
Bottombottom Center or Center bottom
Rightright Center or center right
Leftleft Center or center left

background-attachment:fixed Background Image fixed

a {text-decoration:none;}

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p {text-indent:50px;}
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;} spacing between characters
P.small {line-height:70%;}
P.big {line-height:200%;} line spacing

word-spacing:30px; Space between words
img.top {vertical-align:text-top;}
Img.bottom {vertical-align:text-bottom;} Vertical alignment
}

H1 {text-shadow:2px 12px #FF0000;} character shadow

A:link-Normal, not visited links
A:visited-links that have been visited by the user
A:hover-When the user mouse is placed on the link
A:active-the moment the link was clicked

UL style
List-style-image:url (' sqpurple.gif ');

Vertical-align:bottom; Snap To

Border-collapse:collapse;

Boder Style
P.none {border-style:none;}
p.dotted {border-style:dotted;} dashed line
p.dashed {border-style:dashed;} Long Dashed line
p.solid {border-style:solid;} solid Line
p.double {border-style:double;} Double Solid Line
P.groove {border-style:groove;}
P.ridge {Border-style:ridge;}
P.inset {border-style:inset;}
P.outset {border-style:outset;}
P.hidden {Border-style:hidden;}

Set Maximum height
max-height:50px

Set hidden
H1.hidden {Visibility:hidden;}
H1.hidden {display:none;}

Fixed
P.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative
position:relative;
left:-20px;

Absolute positioning
Position:absolute;
left:100px;
top:150px; Overlapping elements z-index:-1; Overflow:scroll; Overflow:auto;

Clear floating
Clear:both;

Descendant Picker Div p
Child element Selector Div>p
Adjacent Brother selector Div+p
Normal neighbor Sibling Selector div~p

Pseudo class
P:first-child
{
Color:blue;
}

Focus Pseudo Class
: Before
: After

A label setting display:block; The width Height property is not affected

Li is a fast element, but sets the inner chain
{
Display:inline;
}
Set Picture transparency
Img
{
opacity:0.4;
Filter:alpha (OPACITY=40); /* for IE8 and earlier */
}
Img:hover
{
opacity:1.0;
Filter:alpha (opacity=100); /* for IE8 and earlier */

, Image stitching:

IMG.AA {
width:43px;
height:44px;
Background:url (/images/img_navsprites.gif) -181px 0;
}

CSS3 New Styles
Border-radius
Box-shadow box-shadow:10px 10px 50px #888888; parameter x, y size, color
Border-image
Border-image:url (border.png) round;
Border-image:url (border.png) stretch;

Gradient
#grad {
Background:-webkit-linear-gradient (red, blue); /* Safari 5.1-6.0 */
Background:-o-linear-gradient (red, blue); /* Opera 11.1-12.0 */
Background:-moz-linear-gradient (red, blue); /* Firefox 3.6-15 */
Background:linear-gradient (red, blue); /* Standard Syntax */
}

Line break
Word-wrap:break-word;

Font
@font-face
{
Font-family:myfirstfont;
Src:url (' Sansation_light.ttf ')
, url (' Sansation_light.eot '); /* IE9 */
}

Div
{
Font-family:myfirstfont;
}

Excessive
Transition:width 0.5;
-webkit-transition:width 0.5s; /* Safari */
Div:hover
{
width:300px;
}

-webkit-transition:width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s, height 2s, transform 2s;

Animation
Div
{
width:100px;
height:100px;
background:red;
Animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes Myfirst
{
from {background:red;}
to {Background:yellow;}
}

@-webkit-keyframes Myfirst/* Safari and Chrome */
{
from {background:red;}
to {Background:yellow;}
}

Multi-column arrangement
. Newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
Column-count:3;
}

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
Column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;

CSS Learning notes