1. Cascading Style Sheets Color and Font Properties
CS 1150 Fall 2016

2. How CSS Rules Cascade
If two or more rules apply to the same element, some take precedence
If two selectors are identical, the latter of the two will take precedence
If one selector is more specific, the more specific rule will take precedence
You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element
Example: cascadingrules.html, cascadingrules.css

3. Inheritance
If you specify the font-family or color properties on the body element, they will apply to most child elements
If you specify the background-color or border properties, they are not inherited by child elements
You can force most properties to inherit values from their parent elements by using inherit for the value of the properties
To have any element with an href attribute inherit from its parent, you must specify inherit
Example: parentchild.html, parentchild.css

4. Foreground Color
The color property allows you to specify the color of text inside an element
You can specify any color in CSS in one of three ways
RGB values – these express colors in terms of how much red, green and blue are used to make it up. For example: color: rgb(255,165,0);
Hex codes – these are six-digit codes that represent the amount of red, green and blue in a color, preceded by a hash sign. For example: color: #FFA500;
Color names – There are 147 predefined color names that are recognized by browsers. For example: color: orange;

5. Background Color
CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box
You can specify the background color in one of three ways
RGB values – these express colors in terms of how much red, green and blue are used to make it up. For example: color: rgb(128,128,128);
Hex codes – these are six-digit codes that represent the amount of red, green and blue in a color, preceded by a hash sign. For example: color: #808080;
Color names – There are 147 predefined color names that are recognized by browsers. For example: color: gray;

6. Opacity
The opacity property allows you to specify the opacity of an element and any of its child elements
The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity)
Example: opacity: 0.5;
The rgba property allows you to specify a color and an opacity. This value is known as an alpha value.
The rgba value will only affect the element on which it is applied, not any child elements
Example: background-color: rgba(128,128,128,0.5);
Example file: opacity.html, opacity.css

7. Specifying Fonts
The font-family property allows you to specify the font that should be used for any text inside the element
The value of this property is the name of the font you want to use
You can specify a list of fonts separated by commans so that if the user does not have your first choice of font installed, the browser can try to use an alternative font from the list
Example: font-family: Verdana, sans-serif;

8. Size of Font
The font-size property enables you to specify a size for the font
There are several ways to specify the size of a font
Pixels are commonly used because they allow web designers very precise control over how much space their text takes up. Example: font-size: 32px;
Percentages – The default size of text in browsers is 16px. So a size of 75% would be the equivalent of 12px and 200% would be 32px. Example: font-size: 200%;
Ems – An em is equivalent to the width of a letter m. Example: font-size: 1.3em;

9. Bold The font-weight property allows you to create bold text
There are two values that this property commonly takes
normal – This causes text to appear at a normal weight
bold – This causes text to appear bold

10. Italic The font-style property creates italic text
There are three values this property can take
normal – This causes text to appear in a normal style
italic – This causes text to appear italic
oblique – This causes text to appear oblique

11. Uppercase and Lowercase
The text-transform property is used to change the case of text, giving it one of the following values
uppercase – This causes text to appear uppercase
lowercase – This causes the text to appear lowercase
capitalize – This causes the first letter of each word to appear capitalized

12. Underline and Strike
The text-decoration property allows you to specify the following values
none – This removes any decoration already applied to the text
underline – This adds a line underneath the text
overline – This adds a line over the top of the text
line-through – This adds a line through words

13. Line Height
In CSS, the line-height property sets the height of an entire line of text
Increasing the line-height makes the vertical gap between lines of text larger

14. Letter and Word Spacing
The letter-spacing property controls how much horizontal space occurs between letters
The word-spacing property controls how much horizontal space occurs between words
The values for these properties should be specified in ems, and will be added on top of the default value specified by the font

15. Text Alignment
The text-align property allows you to control the alignment of text
This property can take one of four values
left
right
center
justify

16. Font Examples
Example file: text.html, text.css