Creating your base styles

When you create a new style sheet, one of the first things you're going to want…to do is to create your base style.…Sometimes these are called the reset styles.…These are the styles that will be used to build the other styles upon.…In other words, as I go through building my style sheet, I'm going to be…building styles around say paragraph tags and heading tags.…I want to create base starting points for those tags, so I don't have to put all…that base information in each style.…

I give you an example here.…Let's say for paragraphs, I want to set a margin.…Now the standard margins are something like this.…What that means is that there is a top margin of zero, a right margin of zero, a…bottom margin of 1em.…EM for em is a unit that means the size of the font, for example.…So if you've got a 12 point font, then this would be 12 points and a zero…for the left margin.…

So, these measurements go clockwise, top, right, bottom and left.…So that would be the standard and if I save that and go and reload over…

Resume Transcript Auto-Scroll

Author

Released

2/13/2010

CSS for Developers is designed to give a working knowledge of CSS to web developers and coders who already have a firm grasp of XHTML/HTML and want to harness the power of style sheets to take their web sites to the next level. Instructor Bill Weinman reviews CSS fundamentals, including the benefits and limitations of the language, and then dives straight into creating styles. This course covers how to format text, images, and backgrounds; how to position elements on the page; and how to apply styles, both inline and via an external style sheet. CSS best practices and browser support issues are also addressed. Exercise files accompany the course.

Topics include:

Adding borders and backgrounds

Choosing fonts

Changing the color of elements

Working with sprites

Positioning with CSS

Creating a menu bar

Skill Level Beginner

4h 1m

Duration

1,150,136

Views

Show MoreShow Less

Q: I want to use one style sheet for a header and a menu item, one for the body, and another for the footer. Can I use a Main.css document and import header.css, body.css, and footer.css?

A: The most common way to use multiple style sheets is to use multiple <link> tags in the HTML file. If you prefer to have one <link> tag you may use CSS @import rules to import style sheets. - Keep in mind that @ rules must come before any CSS statements in your style sheet. It may be a good idea to have a .css file dedicated to @import rules only. Be aware of CSS cascading rules. Whether you are using <link> or @import, styles defined later will override earlier styles..