Chapter 3 Computer Applications

Is there a quick way to apply the same styles to more than one HTML tag or more than one class?

p, li { font-size: 2em; }

Serif

- Have small embellishments on the end of letter strokes; often used for headings ex. Times New Roman, Georgia, Palatino

Id Selector

- Identifies and applies a CSS rule uniquely to a single area on a web page - Place # in front of id name - May not contain spaces ex. #feature { color: #333333; }

Descendant Selector

- Indicates an element within the context of its container (parent) element - List container selector (selector, class, id) followed by specific selector you are styling. ex. main p { color; #00ff00; }

CSS Style Rule Declaration

- Indicates the CSS property you are setting (ex. color) and the value you are assigning to the property

Line-Height Property

- Modifies default height of a line of text - Often configured with percentage value ex. line-height: 200%; double spaced

Text-Decoration Property

- Modifies display of text - Values: none, underline, overline, and line-through ex. a { text-decoration: none; }

RGB Color

- Monitors display color as a combination of different intensities of red, green, and blue - RGB intensity values are numerical from 0 to 255 - Each RGB color has three values, one each for red, green, and blue - These values are always listed in the same order (red, green, blue) and specify the numerical value of each color used.

Href Attribute

- Name of the style sheet file

Blur Radius (Optional)

- Numeric pixel value - No value configures sharp shadow, higher values configure more blur

Vertical Offset

- Numeric pixel value - Positive value configures shadow below - Negative value configures shadow above

Horizontal Offset

- Numeric pixel value - Positive value configures shadow on right - Negative values configures shadow on left

Semicolon

- Separates declarations ex. body { color: white; background-color: orchid; }

Font-Size Property

- Sets the size of the font - em unit: relative font unit

Verdana, Tahoma, Georgia Font Typefaces

- Specifically designed to display well on computer monitors.

White-Space Property

- Specifies the way that whitespace (such as a space character, or line feed without code) is displayed by the browser - Values: normal (default), nowrap (text will not wrap to the next line), and pre (preserves all whitespace in the browser display)

Hexadecimal Color Values

- Specify RGB color with numeric value pairs ranging from 00 to FF (0 to 255 in base 10). - Base-16 numbering system (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)

General Cascade

- Style rules applied to more local elements (such as a paragraph) take precedence over those applied to more global elements (such as a <div> that contains the paragraph).

Order of Precedence

- The "cascade" in which CSS is applied in order from outermost {external styles) to innermost (inline styles).

Web-Safe Color Palette

- The 16 colors that display in a similar manner on both Mac and PC platforms - Limited - Due to technological advancement, not as important

Reasons to use CSS

- greater control of typography + page layout - separation of style from structure - potentially smaller web page docs - easier site maintenance

Rel Attribute

- "stylesheet"

Write the code to configure a web page to associate with an external style sheet called mystyles.css.

- <link rel="stylesheet" href="mystyles.css">

Text-Shadow Property

- Adds depth and dimension to text displayed on web pages. ex. text-shadow: 3px 2px 5px #667788

Span Element

- Allows you to isolate a specific section of a larger element. - Defines a section on a web page that is not physically separated from other areas; this formatting is referred to as inline display

If also containing inline styles,

- Any external and embedded styles are applied first as just described, and then the inline styles are applied.

Class Attribute

- Applies CSS configured for the named class to an HTML element - class="feature" ex. <li class="feature">Usability Studies</li>

Id Attribute

- Applies CSS configured for the named id to an HTMl element - id="feature" ex. <div id="feature">This sentence will be displayed using styles configured in the feature id.</div>

Class Selector

- Applies CSS declaration to certain elements on a web page and not necessarily to a particular HTML element - May not contain spaces - Place a dot in front of the class name in the style sheet - Can be applied multiple times on a web page ex. .feature { color: #c70000; }

Link Element

- Associates an external style sheet with a web page - Located in head section of the page - Used with rel and href ex. <link rel="stylesheet" href="color.css">

When designing a page that uses colors other than the default colors for text and background, explain why it is a good reason to configure both the text color and the background color.

- Because visitors may set their browsers to certain colors, it is a good idea to configure both the text color and background color properties to provide good contrast between text and background.

Cascade

- Browser Defaults - External Styles - Embedded Styles - Inline Styles

Inheritance

- CSS properties are passed down to elements nested within a container element, such as a <div> or <body> element

CSS Style Rule Selector

- Can be an HTML element name, class name, or id name.

Describe a reason to use embedded styles. Explain where embedded styles are placed on a web page.

- Can be used to configure text + color formatting for an entire web page - Placed in head section of web page - <style> tag used to contain CSS selectors and properties that configure the embedded styles

Describe a reason to use external styles. Explain where external styles are placed and how web pages indicate that they are using external styles.

- Can be used to configure the text and color formatting for some or all of the pages on a website in one file. - Single file can be changed, all the web pages associated with it will display the new styles the next time they are rendered - Placed in separate text file that uses a .css file extension - Web pages us the <link> tag to indicate they are using an external style sheet

Imported Styles

- Can connect styles coded in a separate text file with a web page document - Can be imported into embedded styles or into another external style sheet by using the @ import directive

CSS Validation

- Checks CSS code for valid syntax

Using both external and embedded styles

- Code the link element (for external styles) before the style element (for embedded styles). - External styles will be applied first, and then the embedded styles will be applied.

External Styles

- Coded in separate text file - Text file is associated with the best page by configuring a link element in the head section

Inline Styles

- Coded in the body of the web page as an attribute of an HTML tag. - Applies only to the specific element that contains it as an attribute - Inefficient, adds extra code, inconvenient to maintain

Web-Safe Colors

- Colors with hexadecimal color values of the numerals 00, 33, 66, 99, CC, and FF

Color Value

- Configure a color value for the shadow

Margin-Left and Margin-Right Properties

- Configure the space in the left and right margins, respectively - Values: 0, pixel units, em units, percentages, or auto (browser calculates amount of space available and divides evenly)

Background-Color Property

- Configures background color of an element ex. body { background-color: yellow }

Font-Weight Property

- Configures boldness of text

Text-Transform Property

- Configures capitalization of text - Values: none (default), capitalize, uppercase, or lowercase. ex. h3 { text-transform: uppercase; }

Font-Family Property

- Configures font typeface

Font-Style Property

- Configures italic font

Text-Align Property

- Configures the alignment of text and inline elements within block display elements such as headings, paragraphs, and divs. - Left, right, and center values ex. h1 { text-align: center; }

Text-Indent Property

- Configures the indentation of the first line of text within an element - Can be numeric (px, pt, or em unit) or percentage ex. p { text-indent: 5em; }

Letter-Spacing Property

- Configures the space between text characters - Values: normal (default) and a numerical pixel or em unit. ex. h3 (letter-spacing: 3px)

Word-Spacing Property

- Configures the space between words - Values: normal (default) and a numeric pixel or em unit. ex. h3 { word-spacing: 2em; }

Color Property

- Configures the text (foreground color of an element. ex. body { color: blue }

Width Property

- Configures width of a block display element ex. #wrapper { width: 960px; margin-left: auto; margin-right: auto; }

Embedded Styles (Internal Styles)

- Defined within a style element in the head section of a web page. - Apply to entire web page document

Sans-Serif

- Do not have serifs; often used for web page text ex. Arial, Tahoma, Helvetica, Verdana

Fantasy

- Exaggerated; use with caution; sometimes used for headings; may be difficult to read on web page ex. Jokerman, Impact, Papyrus

Monospace

- Fixed-width; often used for code samples ex. Courier New, Lucida Console

Style Element

- HTML element located in the head section of a web page - Contain embedded styles applied to the entire document

HTML tag vs. Styles

- HTML tag or attribute will override styles

Cursive

- Hand-written style; use with caution; may be difficult to read on a web page ex. Lucida Handwriting, Brush Script, Comic Sans MS

Style Attribute

HTML attribute that configures inline styles ex. <h1 style="color:#cc0000">This is displayed as a red heading</h1>