1. Reasons to use CSS: DRY, Clean
Examles: 1.
<h1 style="color: #98c7d4;"> Hellow World! </h1>
2.
<head>
<style>
h1 { color: #98c7d4; }
</style>
</head>
This two way maybe will repeat numerous times, so the paragraph of code will be large. The best way is making a External sheet in the following way:
<head>
<title>CSS Cross Country</title>
<link rel="stylesheet" href="styles.css" />
</head>
This will make your codes DRY(Don’t Repeat Yourself)
2.Cascade Order(something about the code priority)
Using !important < Inline style arttribute < In the <head> < External <link>
3.Primary DOM selectors
Example:
<h1 class="intro" id="header">Hello World!</h1>
-Element selector
h1{
color:#aba4ac;
margin-bottom:10px;
}
-Class selector
.intro{
color:#abc4ac;
margin-bottom:10px;
}
-ID selector
#header{
color:#abc4ac;
margin-bottom:10px;
}
4.Float <float: left/right/none;>
when we put pictures and paragraphs in a container, we could us Float to deal with their relation.
*Floated elements stack up to the parent edge, then move down to the next available edge.
*Take care with elements that have differing heights-the first available edge isn’t always below.
Clearfix
/*Originally developed by Tony Aslett and Refined by Nicholas Gallagher */
.group:before
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;/*IE6&7*/
}
5. Inheritance & Specificity
Override parent properties: nested selector
0 ,0 ,0 ,0
inline style #if ID #of class #of element
6.BOX
Total box width = content width + padding width +border width
Box overflow:
overflow: visible /auto/hidden /scroll
↑when content beyond the container boundaries;
Positioning:<position: static/relative/absolute/fixed;>
Z-index:
z-index:1;
↑Overlaping
Example:
<article>
<img class="Green" src="Green.jpg" alt="Ski!"/>
<img class="sled" src="sled.jpg" alt="Sled!"/>
</article>
.Green, .Brown{
z-index:1;
}
.Brown{
z-index:1;
}
In these case the Brown class should be above the Green class
7. Display Types:<display: block/inline/inline block;>
block:<div><p><ul><ol><li>
inline:<span><a><em><img>
8.Horizontal Centering
In block level:
margin: 0 auto;
in inline block level:
text-align:center;
9. Image Cropping
Solutions:
Overflow:hidden;
Or we could
.cropping img {
height: 300px;
width:auto;
}