Reset Stylesheet

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. All browsers have presentation defaults, but no browsers have the same defaults. For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding.

Your reset.css file is meant to be a document that you change for your particular needs. Fill in your preferred colors for the page, links, the default styles that you want to use on your Website.

The reset file is the first thing your browser sees. So it needs to be at the top of the <head> tag.

Eric Meyers has put together a reset stylesheet and placed it in the public domain as a starting point for you. See CSS Tools: Reset CSS.

You can use the one Eric proposes as a starting point for your own.

Save the file as reset.css into your Content folder.

You might use a more sophisticated HTML5 page template, you can reference HTML5 boilerplate.

When I get done, I have text. Lots of text.

Setting up Text for CSS

Now I can begin styling my text.

I can do this by applying style sheets to the HTML5 itself.

I’ve added some background color so we can see where each item is placed.

Floats. In the float model, which is how we did the aside, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

And each of section appear in order as part of an article.

Supporting Small Screens Using Media Queries

What happens when I go to display this on a mobile device? To display the aside, the CSS makes the minimum width of the page 600 pixels, wider the most smartphones.

Remedy this, we can have CSS determine the width and call the right style sheet by doing a query into the media, then selecting the right sheet.

Custom Fonts

Font embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. For browsers that font embedding, fonts can be temporarily installed on a user's computer so that a Web page is displayed exactly as the you intend.

Microsoft has been supporting font-embedding since IE4 in 1997. And the feature is getting special attention in CSS3.

Browsers that don't support font embedding ignore the code that links the font objects to the page. Those using browsers that support font embedding will see text displayed in the selected font if it's installed. Since Goudy Stout and Garamond come with Office, it's possible the fonts may be installed. If the first-choice font isn't available, the browser displays the text using the second- or third-choice fonts, if they are installed. Users of older browsers see all the text displayed using their default font.

In my case I want my h1 tag in my header to show off a custom font. My code takes this format.

Most fonts are licensed from their original publishers, who may place additional restrictions on their use and distribution. For information about licensing arrangements for a given font, contact the original publisher. You can use a font like Pfennig which is licensed under the SIL Open Font License, Version 1.1 http://scripts.sil.org/OFL

You can now embed fonts for IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac) and Opera 10. More than 97.5 percent are now"cross-browser". Truetype fonts work in IE7 and up, including IE9. For more legacy IE browsers you might want to use OpenType font file (having an EOT extension).