Configuring Color and Text with CSS
Embedded styles (Head Section)
(also referred to as internal styles) are defined within a style element in the head section of a web page. These style instructions apply to the entire web page document.
Configuring Cascading Style Sheets
1.) Inline styles 2.) Embedded styles 3.) External styles 4.) Imported styles
Advantages of Cascading Style Sheets
1.) TYPOGRAPHY AND PAGE LAYOUT CAN BE BETTER CONTROLLED. 2.) STYLE IS SEPARATE FROM STRUCTURE. 3.) STYLES CAN BE STORED. 4.) DOCUMENTS ARE POTENTIALLY SMALLER. 5.) SITE MAINTENANCE IS EASIER.
CSS syntax allows you to configure colors in a variety of ways:
1.) color name 2.) hexadecimal color value 3.) hexadecimal shorthand color value decimal color value (RGB triplet) 4.) HSL (Hue, Saturation, and Lightness) color value notation new to CSS3; see http://www.w3.org/TR/css3-color/#hsl-color
web-safe colors
Back in the day of 8-bit color monitors, web page color could be problematic and it was important to use one of the 216 web-safe colors, which display in a similar manner on both the Mac and PC platforms. The hexadecimal color values of web-safe colors use the numerals 00, 33, 66, 99, CC, and FF.
Cascading Style Sheets (CSS)
CSS allows web developers to apply typographic styles (typeface, font size, and so on) and page layout instructions to a web page.
(CSS Syntax) p { color: red; }
Color name
BLUR RADIUS (OPTIONAL).
Configure a numeric pixel value. If omitted, defaults to the value 0 which configures a sharp shadow. Higher values configure more blur.
COLOR VALUE.
Configure a valid color value for the shadow.
(CSS Syntax) p { color: rgb(255,0,0); }
Decimal color value (RGB triplet)
(CSS Syntax) p { color: hsl(0, 100%, 50%); }
HSL color values
(CSS Syntax) p { color: #FF0000; }
Hexadecimal color value
RGB color
Monitors display color as a combination of different intensities of red, green, and blue, a concept known as RGB color. RGB intensity values are numerical from 0 to 255. Each RGB color has three values, one each for red, green, and blue.
(CSS Syntax) p { color: #F00; }
Shorthand hexadecimal (one character for each hexadecimal pair; used only with web-safe colors)
CSS Selectors and Declarations
Style sheets are composed of style rules that describe the styling to be applied. Each rule has two parts: a selector and a declaration:
href attribute
The value of the href attribute is the name of the style sheet file.
rel attribute
The value of the rel attribute is "stylesheet".
How do I choose a color scheme for a web page?
There's a lot to consider when you select a color scheme for a website. The colors that you choose set the tone and help to create a web presence for the company or organization that appeals to the target audience. The colors you choose for text and background need to have good contrast in order to be readable.
VERTICAL OFFSET.
Use a numeric pixel value. Positive value configures a shadow below. Negative value configures a shadow above.
HORIZONTAL OFFSET.
Use a numeric pixel value. Positive value configures a shadow on the right. Negative value configures a shadow on the left.
Cascading Style Sheets (CSS)
Web designers use CSS to separate the presentation style of a web page from the information on the web page. CSS is used to configure text, color, and page layout. CSS is not new—it was first proposed as a standard by the W3C in 1996.
feature
When setting a style for an id, place a hash mark (#) in front of the id name in the style sheet. An id name may contain letters, numbers, hyphens, and underscores. Id names may not contain spaces. The following code will configure an id called feature in a style sheet: #feature { color: #333333; }
Are there other methods to configure color with CSS?
Yes, the CSS3 Color Module provides a way for web developers to configure not only color but also the transparency of the color with RGBA (Red, Green, Blue, Alpha). and HSLA (Hue, Saturation, Lightness, Alpha) color. Also new to CSS3 is the opacity property, and CSS gradient backgrounds.
company
You will code both CSS and HTML to configure this formatting. First, create a new CSS rule above the closing style tag that configures a class called company in bold, serif font, and 1.25em in size.
text-shadow property
adds depth and dimension to text displayed on web pages. Configure a text shadow by coding values for the shadow's horizontal offset, vertical offset, blur radius (optional), and color:
External styles (linked to head section)
are coded in a separate text file. This text file is associated with the web page by configuring a link element in the head section.
Inline styles (Body)
are coded in the body of the web page as an attribute of an HTML tag. The style applies only to the specific element that contains it as an attribute.
Imported styles
are similar to external styles in that they can connect styles coded in a separate text file with a web page document. An external style sheet can be imported into embedded styles or into another external style sheet by using the @ import directive.
link element
associates an external style sheet with a web page.It is placed in the head section of the page. The link element is a stand-alone, void tag.
id attribute
code used when creating a hyperlink to a specific part of the same page.
Web-Safe Color Palette
collection of 216 colors that all computers render in the same way
font-family property
configures font typeface.
text-align property
configures the alignment of text and inline elements within block display elements such as headings, paragraphs, and divs. The values for the text-align property are left (default), right, and center.
CSS background-color property
configures the background color of an element. The following style rule will configure the background color of a web page to be yellow. Notice how the declaration is enclosed within braces and how the colon symbol (:) separates the declaration property and the declaration value. body { background-color: yellow }
font-weight property
configures the boldness of the text. Configuring the CSS rule font-weight: bold; has a similar effect as the <strong> or <b> HTML element.
text-transform property
configures the capitalization of text. Valid values for text-transform are none (default), capitalize, uppercase, or lowercase.
ext-indent property
configures the indentation of the first line of text within an element. The value can be numeric (such as a px, pt, or em unit) or a percentage.
letter-spacing property
configures the space between text characters. Valid values for letter-spacing are normal (default) and a numeric pixel or em unit.
word-spacing property
configures the space between words. Valid values for word-spacing are normal (default) and a numeric pixel or em unit.
CSS color property
configures the text (foreground) color of an element. The following CSS style rule will configure the text color of a web page to be blue: body { color: blue }
span element
defines a section on a web page that is not physically separated from other areas; this formatting is referred to as inline display. Use the <span> tag if you need to format an area that is contained within another, such as within a <p>, <blockquote>, <li>, or <div> tag.
Configure Background and Text Color
displays a web page with a white text and an orchid background. To configure more than one property for a selector, use a semicolon (;) to separate the declarations as follows: body { color: white; background-color: orchid; }
Cascading Style Sheets (CSS)
is a flexible, cross-platform, standards-based language developed by the W3C.
em unit
is a relative font unit that has its roots in the print industry, dating back to the day when printers set type manually with blocks of characters. An em unit is the width of a square block of type (typically the uppercase M) for a particular font and type size.
text-decoration property
is to modify the display of text.
style element <style> </style>
located in the head section of a web page. The opening <style> tag and the closing </style> tag contain the list of embedded style rules.
line-height property
modifies the default height of a line of text and is often configured with a percentage value.
The # symbol
signifies that the value is hexadecimal. You can use either uppercase or lowercase letters in hexadecimal color values; #FF0000 and #ff0000 both configure the color red.
white-space property
specifies the way that whitespace (such as a space character, or line feed within code) is displayed by the browser.
Hexadecimal color values
specify RGB color with numeric value pairs ranging from 00 to FF (0 to 255 in base 10). Each pair is associated with the amount of red, green, and blue displayed. Using this notation, one would specify the color red as #FF0000 and the color blue as #0000FF. The # symbol signifies that the value is hexadecimal. You can use either uppercase or lowercase letters in hexadecimal color values; #FF0000 and #ff0000 both configure the color red.
id selector
to identify and apply a CSS rule uniquely to a single area on a web page.
font-style property
typically is used to configure text displayed in italics
CSS class selector
when you need to apply a CSS declaration to certain elements on a web page and not necessarily tie the style to a particular HTML element.
descendant selector
when you want to specify an element within the context of its container (parent) element. Using descendant selectors can help you to reduce the number of different classes and ids but still allows you to configure CSS for specific areas on the web page. main p { color: #00ff00; }
CSS STYLE RULE DECLARATION
The declaration indicates the CSS property you are setting (such as color) and the value you are assigning to the property.
CSS STYLE RULE SELECTOR
The selector can be an HTML element name, a class name, or an id name.
class attribute
The styles set in the new class can be applied to any element you wish. You do this by using the class attribute, such as class="feature". Do not type the dot in front of the class value in the opening tag where the class is being applied.
