CSS Course

HTML and CSS Together

HTML and CSS go hand in hand and work together to construct and display professional quality web pages, but they are two separate languages. HTML can include or reference the CSS a number of ways all of which we will investigate in this portion of the class. After this exercise you will be able to:

• explain what 'Cascading Style Sheets' means
• set up an HTML document to accommodate styles
• place CSS in the appropriate areas of HTML
• what a property assignment is - and how to define fonts and colors for the elements on your page
• change the appearance of color and fonts for select items
• manipulate font styles, weights and variants
• validate your HTML and your CSS

Styling Your Entire Page in One Fell Swoop

Once we are prepared to incorporate CSS in our HTML, we turn our attention to controlling multiple items simultaneously using style rules. Using a style sheet in the head of our document, we can specify fonts, colors, backgrounds, type treatment and more for the entire document. You will know how to:

• create a style guide for an HTML document
• define a 'rule' that tells the browser how some type of element should appear
• modify paragraph properties like line height and letter spacing
• change the bullet used by lists using CSS
• define an image to be used as a bullet in a list
• reference a background image
• restrict the repetition of the background image to one axis or altogether
• position the background image in the document

Styling Your Entire Site in One Fell Swoop

Although it is handy to be able to control page designs on an individual basis, it is often the case that several pages of a website share the same design. CSS allows you to create a stylesheet that one or more HTML files can employ. While we explore the usefulness of working with external stylesheets, we will also discuss finer selection controls for modifying items on the various web pages. We first explore modifying the link states (link, visited, hover, active) as well as different design elements such as the first letter or first line of some text content. In this training exercise we:

• create an external stylesheet for global site design
• link to the stylesheet from our HTML file
• modify the presentation of the link in different states
• alter the appearance of the first letter of all of the paragraphs
• learn about font-sizing and the different units of measurement that CSS supports

Exceptional Styles

In our exercises with CSS we have created global rules - that is we have defined the way all paragraphs look or how all bulleted lists appear. In the this exercise, we will learn about mechanisms for dealing with exceptions, for instance modifying one paragraph to look different from the other paragraphs. You will :

• learn about the differences between idenfitiers and classes
• discover what the requirements for class and id names are
• indicate that something belongs to a class
• learn how to give elements unique identifiers
• use CSS to modify paragraphs by making them members of a class
• remove a bullet image from a certain bulleted list

Spacing Properties

Among the most useful properties in CSS are the properties that control the amount of space around an object in the browser window. Sometimes this spacing is provided by the browser and needs to be removed like the space around the whole document that keeps tables from touching the top most corners of a web browser. Other times the browser spacing is insufficient, for instance when you want an indent on a paragraph or more. In this exercise we will

• discuss the box properties of margins and padding
• show several tricks for displaying the box around any element
• learn how to remove default margins or padding on a document and on an element
• add margins to an element on a single side to create an indent
• add borders to elements

Advanced Selection

While ids and classes provide a good mechanism for selecting specific items, it is advantageous sometimes to take utilize some of the techniques CSS provides for advanced selection of items. Using these advanced selectors can cut down on the number of classes and or ids that you need to use and generally cut back on the amount of code you have to write. This course concludes with this exercise in which we will:

• group multiple selectors together
• discuss precedence and conflicting rules
• create identified containers in HTML to facilitate selection
• select something based upon its parentage
• use a universal selector to specify a wild card selection

Prerequisites:

• HTML Fundamentals or Equivalent previous experience with HTML
  • core HTML elements : paragraphs, headings, lists
  • how to insert an image
  • how to hyperlink between documents
  • how to create a basic 2 row 2 column table

keywords: html training san francisco bay area (HTML Fundamentals) css classes san francisco bay area (CSS Advanced)