|Home | Testimonials | Accommodations | Location | Development | Contact|
Cascading Style Sheets (CSS) Fundamentals
2 Days: $750.00
Web developers have relied upon awkward tricks and excess code to craft web page appearance using HTML alone. Now, with the adoption of Cascading Style Sheets (CSS) those days are gone, and HTML can go back to doing what it does best: organizing and structuring web page content.In web design work CSS is used to set text styles, colors and even layouts for your web pages. Incorporating CSS into your site development simplifies your HTML, eases the burden of managing multi-page websites, and empowers you to create engaging, attractive page designs. It is an essential, not optional. technology for creating web sites today.
This CSS class builds upon your HTML skills and covers everything from basic text manipulation to simple page layouts. By the end of this CSS training class, you will be designing like a seasoned professional.
Knowlege of html would be helpful but not required.
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 propertiesSetting Basic Styles for a Web Page using CSSThe 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 toolsUsing CSS to to Set Font Styles for an Entire Web SiteAlthough 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 capsStyling Links & Other Design Elements with CSSCSS 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 paragraphText Formatting Techniques with CSSCompelling 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 listsCSS: Images for Design EffectsIn 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 pageCSS: Modifying Specific ItemsIn 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 textCSS: Designing with BoxesThe 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-bulletsCSS: Common Design Problems & Their SolutionsAll 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 hacksCSS: Text WrappingAlmost 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 itSimple Layout OptionsCrafting 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