CSS: Color, More Selectors and Backgrounds
Color Values
- Keywords - 140 and growing
- w3schools color by keywords
- rgb function rgb( )
- number p { color: rgb(255, 0, 50); }
- percentage p { color: rgb(100%, 0%, 33%); }
- also, alpha or opacity p { color: rgba(255, 0, 50, .5); }
- Or, hexidecimal numbers
- #RRGGBB
- p { color: #FFCC00; }
Foreground Colors
- Use color property to define text and border color of an element
- p.style1 { color: #FFCC00; }
- tables don't inherent, so it's typical to see
- body, table, td, th { color: #FFCC00; }
Background Colors
- body { background-color: #FFFF66 ; }
- other values
- transparent (default)
- hex
- rgb function
- First-line
- p:first-line { letter-spacing: 8px; }
- other properties
- color
- word-spacing
- font
- letter spacing
- text-decoration
- background
- line-height
- letter-spacing
- text-transform
- Exercise 5: First Line
- Try changing the letter spacing in the first line of your customer quote.
- First-letter
- p:first-letter { color: lime; }
- other properties
- color
- word-spacing
- font
- letter spacing
- text-decoration
- background
- letter-spacing
- text-transform
- Exercise 6: First Letter
- Try changing the color and the size of the first letter in your customer quote.
- Simple
- targets element with a specific attribute (property) regardless of value
- img[title] {border: 3px solid; } selects all images with a title
- Exact
- targets element with a specific attribute value
- img[title="first grade"] {border: 3px solid; } selects all images with first grade in the title
- Partial
- targets element with a part of an attribute value
- img[title~="grade"] {border: 3px solid; } selects all images with grade in the title
- Background-image
- can be positioned anywhere with CSS!
- uses the background-image property and url function
- body { background-image: url(star.gif); }
- Exercise 8: Colors
- Download and save this folder to your desktop.
- Open cabbage.html in DW.
- Using an embedded style sheet, make the background color for the document light green
- Make all h1's purple, #993399 or #939.
- Make all h2's a orange-brown, #c60.
- Make the entire page light green, #d2dc9d.
- Make the header div white with 50% transparency, (R:255, G:255, B:255, .5)
- Make links not underlined.
- Make links the same purple as h1.
- Make visited links muted purple, #937393.
- Make hovered links bright purple; #c700f2 and add a white background color.
- Use the same style rules as above when the links are in focus.
- As the mouse is being clicked, add a white background color and make the text turn a vibrant purple, #ff00ff.
- Make sure all your link rules are in the correct order.
- Now make the background-image cabbage_A.jpg
- Background-repeat
- for tiling options
- options
- repeat (default x & y)
- repeat-y (vertical)
- repeat-x (horizontal)
- body { background-repeat: repeat-x; }
- Exercicse 9: Background-repeat
- Take the image out of the background of the main doc and try titling it in the titlepage div.
- Background-position
- changes the position of the orign image (where you are starting your image tile from)
- keyword options
- left
- center
- right
- top
- (center)
- bottom
- examples - always list horizontal first, then vertical
- body { background-position: right bottom; }
- body { background-position: left; } assumes center if no second value is passed
- Can pass % and px values too
- body { background-position: 15px 200px; }
- Exercise 10: Positioning Backgrounds
- Put a non-repeating image in the top left corner of the page. Use cabbage_C_topleft.gif.
- Try topright.gif and float the non-repeating image to the right and 100 px down. {background-position: right 100px}
- Try cabbage_C.gif centered and 85 px down.
- Now add the same image to the shaded div centered and 75 px down.
- Since background images don't inherit, this could be useful!
- Background-attachment
- background stays in a fixed position on the screen
- body { background-attachment: fixed; }
- values
- scroll (default)
- fixed
- inherit
- Exercicse 11: Background-attachment
- Try making the cabbage images from the document and the titlepage fixed...what happened?
- Shorthand background properties
- any order works and all properties are optional
- body { background: lime url(cabbage_A.jpg) no-repeat right top fixed; }
- Exercise 12: Shorthand background
- Try using the shorthand method of determining background settings
- Making a style sheet external
- add to the head tag, before title is best
- <link rel="stylesheet" href="path/main.css" type="text/css" />
- style sheets must have the .css extension.
- Exercise 13: External Style Sheets
- Make your embedded style sheet external
Psuedoelement Selectors
Attribute Selectors
Background Properties
Homework
No homework this week. Enjoy!