To include CSS
Inline |
As an attribute of a tag like style="color: red". Avoid this! |
Internal |
Inside head tag use this <style></style> and add your CSS. Avoid this! |
External |
Use this code in head tag to add an external CSS <link rel="stylesheet" type="text/css" href="style.css"> |
Basic ideas in CSS
|
Body is a selector, font and color are properties to be applied, 14px and navy are values, separated by semicolons. body {
font-size: 14px;
color: navy;
}
|
|
Some common units to measure in CSS, px are not necesarily pixels when zoom. px, em pt, %, pc, cm, mm, in.
|
|
Colors in hex For colors we use hex, start with # and divide in 3, 2 digits for red, 2 for green and 2 for blue. For example: #ff0000=#f00
|
|
Comments /* This is a comment*/
|
Text properties
font-family |
This is the font itself, such as Times New Roman, Arial, or Verdana. |
font-size |
Sets the size of the font. |
font-weight |
States whether the text is bold or not. Try: bold, normal, 100-900 |
font-style |
Posible: italic and normal |
text-decoration |
Posible: underline, overline, line-through |
text-transform |
Will change the case of the text. Posible: capitalize, uppercase, lowercase, none |
text-indent |
Property will indent the first line of a paragraph, lenght or percentage. |
text-align |
Will align the text inside an element to left, right, center, or justify. |
line-height |
Sets the height of the lines in an element. |
letter-spacing |
For spacing between letters. |
word-spacing |
For spacing between words. |
Properties of margins and padding
margin: |
Defines the length of margin, check box model. Use length units |
padding: |
Defines the length of padding, check box model. Use length units |
margin-top: |
can add -top, -bottom, -left and -right to any of those |
Borders
border-style: |
The values can be solid, dotted, dashed, double, groove, ridge, inset and outset. |
border-width: |
Sets the width of the border, most commonly using pixels as a value. |
border-top-width: |
Can be top, right, bottom or left. |
border-color: |
Sets the color. |
|
|
Intermedate CSS
tag.name |
This dot will define a class, tag here is optional, properties will be applied to tags with attribute class="name". |
#name |
Properties here will be applied to tags with attribute id="name". |
h1, p, h2 |
Can give properties to multiple selectors at the same time. |
#top h1 |
Can nest selectors, makes h1 have extra poperties on #top |
selector:pseudo-class |
Gives properties to selectors with special peroperties such as: "visited links"(visited) and unvisited links(link) |
s:dynamicpseudoclass |
Those apply when something happens to something, posible: active, hoover, focus. |
selector:pseudoclass_childs |
"first-child" will select only the first tag, inside another tag. |
margin: top right bottom left; |
Margin or padding properties can be grouped like that. |
padding: tb lr; |
by stating two measures, first is top bottom, second is left right. |
border: width color style; |
Not sure if width can contain top left right and left. |
font: style weight size/height family; |
For the family: start with font family of choice, then som others to choice from. |
selector:pseudo-element |
first-letter, first-line, self explanatory. |
selector:before (or after) |
A pseudoelement to add content even without touching html. |
the property "content: " |
When using pseudoelements before or after are used, you add content, can be "any string", open-quote, close-quote or url( ). Also can add style as a block. |
Specificity
If the selectors are the same then the last one will always take precedence.(if you select red, and then blue, you will see blue) |
Calculating specificity: HTML selectors value: 1. Class selectors value: 10. ID selector value: 100. Sum all the values in your selectors to know precedence. Higher value, Higher precedence |
Display
display: inline |
Like hiperlinks, makes things appear directly in the same line. |
display: block |
Gives a break before and after the block so it will fill the entire line. This allows greater manipulation of padding margins and stuff. |
display: none |
It will not appear. |
Missing tables, said they are rarely used.
|
