CSS Fundamentals Training

Web Design with CSS (Cascading Style Sheets)

HTML and CSS work hand in hand to construct and display accessible, searchable, and flexible web pages. If you follow the W3C's guidelines for HTML, CSS and accessibility, your web content will become more available to your audience, whether they are reading your page using a desktop browser, voice browser, or mobile phone. After this introductory lesson, you will be able to:

• 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

The power of CSS lies in its ability to define the default appearance of all page elements, without tagging them individually. Plus, CSS separates content from presentation to give you incredible flexibility over your designs. In this section of the CSS training, you will learn how to:

• 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

Although it is handy to be able to control page designs on an individual basis, multiple web pages in a site often share colors, type settings and even page designs. CSS offers site-wide design control with external stylesheets that several HTML files can reference. To explore the benefits of "global" stylesheets, we show you how to:

• 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 with CSS

CSS lets you go beyond HTML and add design features that HTML leaves out. For example, there is only one HTML tag that determines the appearance of a hyperlink, but you may want to change the link's color when a user mouses over it. With CSS, you can! In this section of our CSS training class, we explore how to:

• Remove the default underline from hyperlinks
• 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 with CSS

Compelling websites use text in many creative ways - for navigation, links, paragraphs, headings, data, labels, lists, and more. In this CSS training section, you discover the power of CSS to make your site's text come alive. You will learn how to:

• 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

CSS: Images for Design Effects

In addition to offering flexibility with text, CSS allows you to explore the potential of images. Whether you want to stamp a watermark on the background of a web page or replace ordinary bullets with a particular icon, you can use images with CSS to maximum effect. In this CSS training session, you will master the techniques needed to:

• 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

CSS: Modifying Specific Items

In the preceding exercises, we created global rules - that is, we defined the way all paragraphs appear or how all bulleted lists look. In the real world, there are always exceptions to the rule: one list that needs to be styled differently or a set of paragraphs that need to be separated from the rest. After this lesson, you will be able to:

• Differentiate between identifiers (unique items) and classes (groups or families of 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

CSS: Designing with Boxes

The browser window and CSS see everything through box-colored lenses - giving you finely detailed control over your web page layouts. Every object on a web page - whether it's a paragraph, word, column, row, image, or list - displays in a box with properties that control the box's width, height, borders, and spacing. Using CSS box features, you can govern the amount of empty or white space on any side of an object's box. No more extra or insufficient spacing between objects! After trying hands-on exercises with boxes, you will know how to:

• 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

CSS: Common Design Problems & Their Solutions

All markup and programming languages have their quirks, and CSS is no exception. Sometimes different browsers interpret CSS properties differently. Other times there are unexpected behaviors when you implement your design. Bugs come and go and certain techniques become outdated. So how do you manage the idiosyncrasies of CSS? In this important section of our CSS training, you'll learn about the common issues CSS developers encounter and come away with expert strategies for resolving browser differences. You'll find out how to:

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

CSS: Text Wrapping

Almost from its inception, HTML included the ability to wrap text around an image. Later, browsers also let you wrap text around a table. For years, developers worked within these constraints, including tables upon tables to do even the simplest things like adding captions to images. The creators of CSS considered these issues and made allowances for wrapping so that anything could be pulled aside or floated. In this session, we show you how to:

• Stop using HTML attributes to wrap text around an image or table
• Create a couple of core CSS rules for text wrapping
• Arrange for CSS to 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

Crafting the overall page layout is probably the most difficult part of web design. Whether you're trying to use outmoded tables to lay out the page elements or working with a CSS stylesheet, you'll encounter various challenges. Our CSS training course will take you step-by-step through the process of creating a simple page using CSS, so by the end of this session, you'll have the skills to:

• 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

Prerequisites:

• HTML Fundamentals or equivalent previous experience with HTML: understanding of paragraphs, headings, lists, images, links, and tables

CSS Training offered at four locations::

• CSS training San Francisco
  
• CSS training Los Angeles
  
• CSS training San Jose
• CSS training Sacramento