Building Your First Web Page - Learn to Code HTML and CSS: Develop and Style Websites - page 12

subdirectory named stylesheets , the href attribute value would be stylesheets/
main.css , using a forward slash to indicate moving into a subdirectory.
At this point our pages are starting to come to life, slowly but surely. We haven't delved
into CSS too much, but you may have noticed that some elements have default styles we
haven't declared within our CSS. That is the browser imposing its own preferred CSS
styles for those elements. Fortunately we can overwrite these styles fairly easily, which is
what we'll do next using CSS resets.
Using CSS Resets
Every web browser has its own default styles for different elements. How Google Chrome
renders headings, paragraphs, lists, and so forth may be different from how Internet Ex-
plorer does. To ensure cross-browser compatibility, CSS resets have become widely used.
CSS resets take every common HTML element with a predefined style and provide one
unified style for all browsers. These resets generally involve removing any sizing, margins,
paddings, or additional styles and toning these values down. Because CSS cascades from
top to bottom—more on that soon—our reset needs to be at the very top of our style sheet.
Doing so ensures that those styles are read first and that all of the different web browsers
are working from a common baseline.
There are a bunch of different resets available to use, all of which have their own fortes.
One of the most popular resets is Eric Meyer's reset ( http://meyerweb.com/eric/tools/css/
reset/ ) , which has been adapted to include styles for the new HTML5 elements.
If you are feeling a bit more adventurous, there is also Normalize.css ( ht-
tp://necolas.github.io/normalize.css/ ) , created by Nicolas Gallagher. Normalize.css focuses
not on using a hard reset for all common elements, but instead on setting common styles for
these elements. It requires a stronger understanding of CSS, as well as awareness of what
you'd like your styles to be.
Cross-Browser Compatibility & Testing
As previously mentioned, different browsers render elements in different ways.
It's important to recognize the value in cross-browser compatibility and testing.
Websites don't need to look exactly the same in every browser, but they should be
close. Which browsers you wish to support, and to what degree, is a decision you
will need to make based on what is best for your website.
In all there are a handful of things to be on the lookout for when writing CSS. The good
news is that anything is possible, and with a little patience we'll figure it all out.