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>
