#Learning CSS Note
###1. Class Selector
If two class selector rules ovelap same properties, the later rule in css file will take it. So it is called css.
If rule selector select element, then more restrictive element will apply that rule. ex: div prior then body.
The precedence is more specific selector will take the higer priority.
<style type="text/css">
.rule1 { background-color: #bbb; }
.rule2 { background-color: #a94442; }
div.rule1 {}
div.rule1.rule2 {}
body {}
div {}
/*
Precedence:
Inline style takes highest priority.
inline style > id > rule2 > rule1 > div > body
With combination selectors, more specific one wins.
div.rule1.rule2 > div.rule1 > rule2 > rule1
div.rule1.rule2 => must have class name rule1 and rule2
div.rule1.rule2 === div.rule2.rule1
=> Last declared rule wins.
<body class="rule2 rule1">
=> rule2 will apply and ignore body, rule1.
*/
</style>
<body class="rule2 rule1">
<!-- background color is rule2's color -->
</body>###2. ID Selector
Id selector rule can only use once, first apply take it. The css rules effective area will include its sub elements.
<div style="font-size=18pt;">
<ul>
<!-- font size will also be 18pts -->
<li>Hi</li>
<li>Hii</li>
</ul>
<div>Because it only have one id for each element, so there is no multiple ids combine with other selectors. Just only one id with other selector to form a rule.
div#r#e {} /* invalid selectors */
div#r {}###3. Group Selector
Group selectors use comma , to group the rules. It just group selectors together, so duplicate properties will take the later rules's setting.
h1 { font-size: 24pt; }
h2 { font-size: 64pt; }
h1, h2 { background-color: #bbb; font-size: 72pt }
/* h1, h2 font size will be 72 pt */
h1, h2 { background-color: #bbb; font-size: 72pt }
h1 { font-size: 24pt; }
h2 { font-size: 64pt; }
/* h1 font size is 24pt and h2 font size is 64 pt */###4. Pseudo Element & Class Selector
Pseudo class or pseudo element selectors. To distunguish these two kinds, use :: for pseudo elements, though single : also work.
In order to appropriately style links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active.
Why bother with LVHA link styles
p::firt-line {}
p:first-line
p:before {}
p:after {}
a:link {}
/* only apply the element which support and with href attribute */
a:visited {}
a:hover {}
a:active {}
a:link:hover {} /* only apply the element with href and hovered */###5. CSS Box Model
Elements are consisit of block level containers and inline level containers.
Block level elements breaks the line and appear in next line(so called block level) such as <li>, <p>, and <h1>.
Inline level elements appears within the block level element such as <span> and <a>.
Padding is inner space between text or content. The area include background-color.
If padding out of current window's width, it will move the content or text over the content box. Which would make the screen horizontal draggable to get the content.
Margin is the space out side of the content, the space between previous or next visual elememnt.
If margin out of current window's width, it will make the space before content block.
padding: 12px 24px 32px 43px;
/* top right bottom left => TRBL */
padding: 100px 200px;
/* top down 100px right left 200px */For single page with full height set html and body to full height. body looks at its parent html, to know how to scale the property dynamically. This means the html element has to have its height set as well.
html, body { height: 100% }When you set the width and height properties of an element with CSS, you just set the width and height of the content area. But padding and margin may dynamically change the actual conten area.
case 1: If the width is set but pading-left/right over its length, then content block(background area) will extend to its padding space, actual width will be set to -0.0. So padding always over width. width over margin-right.
case 2: If padding-left + padding-right's total length greater than width, then content will be forced to display single text or content line by line. It may extend height. If height also set up, then content may top over the content block. If text without space delimiter and is long enough, then the text will over the content block to finish its display, which leads a likely margin-right() effect.
display: inline > [width | height] > [margin | padding]
case 3: If the width is set but margin-right is set or over its length, then width will maintain, and will not apply any margin-right properties. If display: inline specified, it will make sure the content still fit in the window(viewport) then margin-right applied(horizontal scroll bar may appeared).
case 4: If margin-left's length over screen width, then it will over it and apply margin-left property.
If some content's width is 500px, assume padding-left/right both are 10px, border 2px, then your actual width is to 500 + 2*10 + 2*2 = 524. If back ground image's width is 500px then the width should set to 500 - 2*10 = 480.
W3C CSS box model
Learn layout: box model
###6. Float
If float content locate over the screen, then next content will be start in next line. Because float content just float, so the next content sitll has background cover its area, but in behind layer.
Before using float, you need to set up paddin/margin/width/height to make css able to locate it.
Each time you declare an float in same block level, it will stack its position to more close to that direciton. ex, float: left two times in different elements under same block level, then the later one will be more close to right side.
If the subsequent content do not want to follow the layout, use clear: both; to bring that content to next line.
If we dont specify margin, the floating contnt will looks like floating in z axis. and cover other content's display.
float: [ left | right | inline-start | inline-end | none ]###7. Descendent Selectors
| Selector | Selects |
|---|---|
| AE | Any element which has both A and E property |
| A E | Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.) |
| A > E | Any E element that is a child (i.e. direct descendant) of an A element |
| E:first-child | Any E element that is the first child of its parent |
| B + E | Any E element that is the next sibling of a B element (that is: the next child of the same parent) |
| B ~ E | Any E element that is the sibling parsed after B element |
Combine selectors with id, class, tagName:
From broad to specific, to describe a
inputtag withclass, andid, write it astagName[name=password].class#id
Grouping Descendent Selectors:
#sidebar h1, #sidebar h2 { font-size: 72px; }
#des .des1, .des2 { font-size: 14pt; }
/* Any element is a descendent of #des, have class name des1 or des2 */###8. Image Background
background-image: url()
background-repeat: [ no-repeat | repeat-x | repeat-y | inherit ]
/* inherit its property from its parent element. */
background-attachment: [ fixed | scroll | inherit ]
/* fixed will stay in the viewport. */
background-position: [ 0% 0% | 0px 0px, center | top | bottom |
center | left | right]
/* default is set to top-left position */
/* 50px 100px => left 50px, top 100px */
/* background shorthand */
background: #ccc url() no-repeat fixed 50px 100px###9. Table Attribute
<table cellspacing="0" border="0" cellpadding="0" width="225">
<caption style="caption-side: [bottom | top | initial | inherit]">
Some Table
</caption>
<thead>
<th colspan="3"></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tobdy>
</table>###10. Position
divmust set height and weight so the background-color can display.(it means the content area has been fully defined.)
Position is similar as Float, will lift the content's z axis up for each set up, like floating effect. Nested element will add 1 more z-axis.
Static ignore top, left, right, bottom, and z-index decoration. Just Position as margin, padding, width defined. It is good for reseting position when you add new css rules.
Absolute will position relative to parent container, if no parent container, it will render in the browser window itself(body container).
In Absolute position, If the parent container does not have position value, then it will be ignored until it reach to the body container or find a parent with position value.
Every element is at least already nested in one element(body element).
Relative position will follow the page flow and adjust it.(follow the previous-visble element's location). The start location will start at previous-visible element's setup height plus some margin space. If previous-visible element set top property, it wont affect current relative element's start position.
The absolute will not take the space for page flow, so relative position which follows an absolute element will position start at absolute's start location(after its height length, instead of top, left, etc. settings).
You can think relative likes a static until it has extra property. So it will holds a page flow block as static did.
Static and relative not add z-axis, unless its nested.
Relatuve is the same to ignore top, left, right, bottom, and z-index until those properties specified.
.pos3 {
background-color: #678;
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 400px;
}
.pos4 {
background-color: #888;
width: 200px;
height: 200px;
position: relative;
top: 10px;
left: 10px;
}
.pos2 {
background-color: blue;
width: 500px;
height: 400px;
left: 200px;
top: 200px;
}
<div class="pos2"></div>
<div class="pos3"></div>
<div class="pos4"></div>
/* pos4 will after pos2, because pos3 is absolute. */If relative position is nested, then it will start at parent's location (parent's page flow), even though parent did not set up position.
Fixed position, fixed the posistion in viewport, so when you scrolling down, it will keep display on screen. Other parts is the same as relative positioning.
The subsequent element which also declare its position will increase the z-axis, it may make the previous fixed position element under it.
.pos5 { position: fixed;
bottom: 0px;
left: 0px;
}
/* pos5 will position to bottom-left with 0 margin space. */Set z-index to highest priority if you want the current element of top of the other elements. Negative value is allowed. Z-index only used with position properties.
.pos1 { z-index: 5; }Overflow occured when the text or content over the content's set up width or heght.
overflow: [ visible(default) | hidden | scroll | auto]
/*
auto gives vertical and horizontal scroll bar be set if needed(over width or height).
hidden will cut the content to show only part of it.
visible dont care about overflow with other content, just show it.
Scroll may have horizontal scroll bar, upto browser.
*/Object after floating object start at the block where first floating object start in that block, it may be undercovered by previous floating object if not set up float or clear property.
Instead of under the previous floating object, we can set subsequent object for float property too.
div is a block level element, each div is on its own block. Page flow is consisit of blocks.
More than one subsequent objects apply flow will stack from left to right if set flow to left.
If one of the object width is over the viewport's width size, then it move to next line for displaying the object. and If it has subsequent float object, it will also move to next line if the total size of two objects is over the viewport's width.
Using clear to force the current floating element down to the next line space if it stack up with previous floating element.
When set up html, and body's width and height, also setup its margin-left and margin-top to 0% for browser compatability.
Default width is 100%.
Usually sets component inside a block level container(such as div). So you can controll overall width and height.
clear: [ left | right | both ]List style type can change to ordered list style by decimal even though element is ul.
We can also use list-style-image instead list-style-type.
list-style-position will make the longer conetent for each li indent to after that bullet point(outside) or not.
ul {
list-style-type: [ circle | square | decimal | lower-roman | ... ]
list-style-image: url()
list-style-position: [ inside | outside(default) ]
}
ul {
display: [ inline | block | list-item | ... ]
/* display element by vary ways */
/* For block elemnt default value is block */
/* For inline elemnt default value is inline */
}Using :hover pseudo class to create rollover effect, and use cursor to change the cursor act like a button.
Use font-family to get the prioritized list of font family to selected element. First font type will take highest priority and so on.
body {
font-family: Genova, "Times New Roman", serif, Palatino ...
/* use double quote if font name has space */
}px(pixel) or pt(points) are referred to as absolute font size, em and % for flexible font size. 16px is equivalent to 12pt. 16px or 12pt is used for default size for 100% or 1em.
The percent and em font size will be scaled by its parent's font size. So only one change to parent element(usually body tag), then it scaled also its children element if it is set by % or em.
Setup word or letter spacing, or line height:
letter-spacing: [ px | pt | em | % ]
word-spacing: [ px | pt | em | % ]
line-height: [ px | pt | em | % ]The font-variant property specifies whether or not a text should be displayed in a small-caps font. It Make the rest of the letters in a word are all capitalized.
font-variant: [ normal | small-caps | initial | inherit ]To import another css style in a css file, use @import, and that imported file will has further away from the actual content inside the html source file. The css apply rule is the nearest style will take highest priorty to apply for duplicate rule's same properties.
inline css style > css style in html > css style in external file > css file imported to another external css file
@import url();
/* or */
@import url(list-of-media-queries);
@import url(./style/layout.css)color: rgb(155,255,255, 0.5)
/* last value is transparency value */
text-shadow: 5px 6px [5px] #666
/* horizontal-offset, vertical-offset, [blur size], color */
/* You can set negative value for v and h, shadow will at top */
box-shadow: 5x, 6px [5px] #666
/* same as text-shadow, but apply for block element. */
-webkit-box-shadow
-moz-box-shadow
/* For old browser compatability */
opacity: [ 1 - 0.0 ]
/* 0 is lighter than 1, any content inside the block also apply this. */
border-radius: [ px | pt | em | % ]
/* set round corner's radius */
border-radius: 10px 20px 11px 20px
/* set top, right, bottom, left individually. */
-moz-border-raidus
-webkit-radius
/* same for older browser compatability */###Reference
font-weight: [initiali | normal | bold | bolder | lighter | <100 - 900>]
font-style: [italic | normal | oblique]
text-decoration: [undeline | overline | line-through | blink]
text-intent: [px]
text-align: [ left | right | center ]
/* blink only work on Firefox, dont use it for browser compatability. */
border-color: [ #bbbbbb ]
border-top-color: [ #bbbbbb ]
border-style: [ solid | dotted | dashed | inset | outset | ... ]
border-width: [ px | em | thin | medium | thick ]
/* border shorthand */
border-top: #bbb solid 5px;
border: #bbb solid 5px;