Lessons in CSS3
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
CSS Lesson 1, Style Tags
Manipulation of Text ---In order to use CSS, we need add two style tags to the head; "style" and "/style". Then we need to add an attribute to the opening style tag; type="text/css". Now, any attribute added between the two style tags will allow manipulation of the text.
Style Tags;
Text Styling
- Color - {color:X;} (X=insert color or RBG value)
- Font - {font-family:arial}
- Line Spacing - {line-height:X} (X=% value)
- Text Allignment - {text-align:X;} (X=left,right or center)
- Indentation - {text-indent:25px;}
Background Styling
- Background Color - {background-color:black;}
- Background Image, Tiled - {background-image:url(example.png)
- Background Image, Single - {background-repeat:no-repeat;}
- Background Image, Positioning - {background-position: 10px 60px}
- Background Image, Positioning - {background-position: 50% 60px}
Padding and Borders
- Text Padding - {padding:20px;} Also options to specify padding;padding-top,padding-botttom,padding-left, and padding-right
- Border Width - {border-width:4px;}
- Border Color - {border-color:green;}
- Border Style - {border-style:dashed;}
- Border Style (top,bottom,left,right) - {border-top-width:4px;}
Link Styling
- Link Color - a:link {color:#8B4646;}
- Link Underline - a:link {text-decoration:underline;}
- Link Visited Color - a:visited {color:#8B4646;}
- Link Hover Background Color - a:hover {background-color:#8B4646;}
- Link Hover Text Color - a:hover {color:white;}
- Link Active Color - a:active {color:#8B4646;}
Table Styling
- Table Border Color - table {border: 3px solid blue;}
- Table Row Background Color - tr {background-color: yellow;}
- Individual Cell Border - td {border: 2px dashed red;}
Unordered List Styling
- Built-in Bullets - ul {list-style-type: square;}
- Imported Bullets - ul {list-style-image: url(check.png);}
- No Bullets - ul {list-style-type: none;}
- List Border - ul {border: 1px solid red;}
- List Align-Left - ul {padding: 0;}