Configuring Color and Text with CSS
Configuring Color and Text with CSS
Links
Notes
3.1 Overview of Cascading Style Sheets
Style sheets are composed of style rules that describe the styling to be applied. Each rule has two parts: a selector and a declaration.
- Selector: can be HTML element name, a class name or an id name
- Declaration: indicates the CSS property setting such as color AND the value assigned to it
body{color:blue} = body(selector){color(declaration property):blue(declaration value)}
Monitors display color as a combination of different intensities of red, green and blue. The concept is known as RGB color.
Hexadecimal color values specify RGB color with numeric value pairs ranging from 00 to FF.
Web-safe colors use 00, 33, 66, 99, and FF.
Four methods of configuring CSS: inline, embedded, external, and imported
- inline: coded in body of web page as an attribute of an HTML tag. Style applies only to specific element that contains it as an attribute.
- embedded styles aka internal styles: defined with a style element in the head section of a web page. apply to entire web page document
- external styles: coded in a separate text file that is associated with the web page by configuring a link element in the head section.
- imported styles: can connect styles coded in a separate text file with a web page document
Each property is separated from its value with a colon (:). If there is more than one property then they are separated by a semicolon (;)
3.2 Using Color on Web Pages
RGB Color = monitor color display in a combination of different intensities of red, green and blue. Intensity values are from 0 - 255. There are 3 values. One each for red, green and blue. They specify the numerical value of each color. Usually hexadecimal color values are used to specify RGB colors. Hexadecimal color values specify RGB color with numeric value pairs ranging from 00 to FF. Web-safe colors ~ 216 colors that use the hexadecimal numerals 00,33,66,99,CC, FF.
The CSS Color Syntax allows configuration in a variety of ways
- color name
- hexadecimal color value
- hexadecimal shorthand color value
- decimal color value (RGB triple)
- HSL (Hue, Saturation, and Lightness)color value notation new to CSS3
3.3 Inline CSS with the Style Attribute
Inline styles are coded as an attribute on an HTML tag using the style attribute. Each property is separated from its value with a colon (:). If there is more than one property, they are separated by a semicolon (;). Won't use this technique much ~ inefficient, adds extra code to web page and inconvenient to maintain. Can be handy for a content management system, blog, etc.
3.4 Embedded Css with the Style Element
