Adding CSS
To link to our CSS, we will add a link element to the head of our HTML files. There are two required attributes on this tag: the href and the rel. The href attribute should be set to the path to your stylesheet. This should be a relative link, and if your CSS is in the same folder as your HTML, you just need to use the name of your CSS file. The rel attribute tells the browser what the relationship of that file is to your HTML, and it should be set to a value of "stylesheet". Both attributes need to be included correctly in order for your CSS to load.
<link rel="stylesheet" href="styles.css">
The CSS Reset
As we saw in our lecture, browsers include their own stylesheet that adds some very basic CSS to your pages. We also saw that those stylesheets differ between browsers. To help ensure that our styles are consistent in different browsers, we can add some code referred to as the CSS Reset to our stylesheets.
The CSS Reset code targets your HTML elements and removes any default margin, padding, font sizes, font weights, and borders. You will always need to add this to your CSS before you write any styles of your own. Our files are read from top to bottom by the browser, so adding this to the top of the file resets all of the browser styles before your styles are applied.
You can find the CSS Reset code below, or can view it on the web on Eric Meyer's website.
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Dev Tools for CSS
When writing code for the web in any language, you should have your page open in the browser as you work and should also have your dev tools open to allow you to spot any errors or issues. When writing CSS, the dev tools are especially helpful.
The Chrome Dev tools are a great way to test out different CSS settings, they will help you spot places where you've included invalid values for your properties (and how to fix them!), and they show you exactly how your styles are being applied. You can turn styles on and off, change their values, add new styles, and even set interactive elements to hover, focus, and other states to allow you to test styles for those properties.
Remember: you can easily open the dev tools by right-clicking on your page and choosing "inspect" from the menu that appears.
Validating CSS
Just like our HTML, we will be validating our CSS files to ensure that we haven't caused any errors or other issues with the file. The CSS Validator website works just like the HTML validator by checking your CSS to ensure that property values are valid and that the syntax is correct. It will not catch all types of issues, but that is why we also test our sites.
As we learn more about CSS, you will be using CSS variables to add color, fonts, and other styles to your pages, so you will see some warning messages related to these in validation. That is totally fine, it is just saying that it doesn't test CSS variables for functionality or value because they can change. Any other errors or warnings should be corrected, though.