CSS Fundamentals

Getting Started with CSS

• Determine the separate roles of HTML and CSS
• Toggle a web page view to see it with or without its stylesheets
• Avoid HTML techniques that hinder accessibility for disabled users
• Insert CSS inside HTML
• Specify color properties

Setting Basic Styles for a Web Page using CSS

• Craft an embedded stylesheet that controls the entire HTML document
• Design a basic “rule” to set the color for all the paragraphs on the page
• Define what a CSS “selector” is and how it works
• Set the default colors for the document and its various headings
• Add comments and notes to your stylesheet
• Validate HTML and CSS formatting using online tools

Using CSS to to Set Font Styles for an Entire Web Site

• Create an external stylesheet for global site design and link to it from your HTML files
• Specify whether the stylesheet should be used for screen, print or both
• Define the preferred font for the various elements on your pages, and experiment with different font styles, such as italics, bold, and small caps

Styling Links & Other Design Elements

• Assign colors and font information to unclicked links
• Highlight a link as a user moves their mouse over it
• Provide feedback as a user clicks a link
• Alter the appearance of the first letter of headings and the first line in a paragraph

Text Formatting Techniques

• Define a default font size for the page that can be read easily in different browsers
• Experiment with text spacing and alignment to achieve the look you want
• Indent text according to traditional print style guidelines, if that’s what you need to do
• Determine the style of bulleted and numbered lists

Images for Design Effects

• Assign an image to be used as a bullet
• Choose a background image for your web page and position it in the document
• Fix the background image so that it doesn’t scroll with the rest of the page

Modifying Specific Items

• Give an element a unique identifier
• Draft a rule that affects only members of a specific class, such as paragraphs of legal information
• Control the appearance of an identified page element, such as a column of text

Designing with Boxes

• Unveil an item’s box in the browser window
• Discern margins from padding
• Remove the default document spacing between various page elements
• Add margins to an item on a single side to create an indent
• Add a borders to an object
• Select between different border styles
• Finagle border properties to create underlines and pseudo-bullets

Common Design Problems & Their Solutions

• Recognize common design problems
• Circumvent spacing differences in various browsers
• Alleviate font size disasters
• Further investigate bugs and hacks

Text Wrapping

• Attributes to wrap text around an image or table
• CSS rules for text wrapping
• Wrap text around images on a web page
• Restrict the width of a flow item such as a paragraph so text can wrap around it

Simple Layout Options

• Organize and identify the basic page elements in your HTML
• Establish a single column design with a header, main content and footer
• Toggle the page design on and off with a browser toolbar to verify accessibility
• Detail the advantages and disadvantages of fixed versus flexible designs
• Specify a minimum width the page design must maintain

Transforming Lists Into Navigation Bars

• Remove the bullet from a list
• Make a list vertical or horizontal
• Use a background image to display the list items with custom bullets or backgrounds
• Disguise a list item, so that it looks like an navigation image or button
• Alter the linked list item when the mouse hovers over it to create a rollover effect
• Take advantage of the visited state to indicate followed links to a user

Tables and Forms

• Legible, usable, multi-device, table structures
• Common table styles including border and alternate row designs
• Control the layout of form fields without employing a table
• Establish a presentation for a user form
• Stylize custom submission and reset buttons

Print Stylesheets

• Difference between screen and print stylesheets
• Designate a print stylesheet for your web page
• Select print-friendly colors and backgrounds
• Implement print-appropriate units of measurement including inches and points
• Direct which page elements should be hidden in the print version
• Supervise where page breaks should occur