Cascading Style Sheets Color and Font Properties CS 1150 Fall 2016

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

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

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;

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;

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

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;

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;

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

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

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

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

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

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

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

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