| Cascading Style Sheets, the Basics and Beyond! | ||
Hello and Welcome to Cascading Style Sheets, the Basics and Beyond!Forrest J. Fisher The files used in this presentation: Download File (zip) | ||
This class will cover many aspects of CSS, such as:
| ||
In this class, you will learn about the basics of Cascading Style Sheets. From what they are, to basic syntax, how to use them, menus, and more. | ||
Our Syllabus
| ||
Cascading Style Sheets, the Basics and Beyond! | ||
| What is CSS? | ||
| Invented in 1997, Cascading Style Sheets (CSS) are now widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who are familiar with web pages know that they are eventually going to take the place of tags such as FONT, which have been deprecated (no longer improved) in HTML 4.0. | ||
| CSS Syntax | ||
When you create a style sheet, you first need to plan out your site and page design. Try to determine which selectors you are going to activate (add attributes to). Then determine the classes you will need for you site. Be certain that the syntax is correct as CSS will not "warn" you that something is wrong. It just won't work. You will find that CSS is a fairly easy language to learn and it has many applications.
| ||
| Placing CSS in a Document | ||
| Style sheets can be place in three places: within an individual tag, in a document "Head" section or in an external file. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. | ||
| An Explanation of "Cascading" | ||
Cascading is something that makes CSS even more powerful. Browser software will read in this order:
| ||
Fonts | ||
| Font vs CSS | ||
Why should we use Cascading Style Sheets when we have the FONT tag? Well, there are additional elements and controls in CSS. Also, you create a font class that is very involved and complicated and then assigned as needed with one word. You can also assign properties to links. | ||
| Font Properties | ||
There are many CSS properties to help modify the text on your pages. | ||
| Text Properties | ||
And finally, if that's not enough, these text properties will do more to your text than just change the style and face. | ||
Advanced Properties | ||
| Backgrounds in CSS | ||
With CSS, you can set a background property on more than just the Web page itself. You might be surprised at all the different ways you can impact the backgrounds. | ||
| "Box" Properties | ||
"Box" properties are called that because they refer to elements inside an invisible box. | ||
| CSS Positioning | ||
One of the most popular, if difficult, uses for Cascading Style Sheets, is positioning. This allows you to place objects on your Web page in exactly the location you want them. However, this is area that browsers struggle with the most. I don't recommend using this in most school situations. | ||
| Tips and Tricks with CSS | ||
There are some things you can do to make your CSS more effective. | ||
| Menu Example at Educational Technology Support Center at ESD 105 in Yakima, WA | ||
| Menus will require the use of a JavaScript file for Internet Explorer as it does not display CSS correctly. | ||
| Basic Tabs | ||
| Tabs With Background | ||
| Tabs With Liquid Background | ||
| Drop-Down Menu | ||
| Fall Out Menu - Custom - Large | ||
| Slide Show | ||
| Borders | ||
| Forms | ||
| Directory Finder | ||
| Calendar | ||
Books:
| ||
Software:
| ||
| Online Resources: | ||