HTML's role in our websites is to provide structure, content, and link resources (e.g. CSS files). Its role in describing the style ("presentation") of content is minimal. HTML's ability to style is pretty much limited to "pretty good" defaults.
In order to further customize the style, appearance, and interactive behavior of our websites, we turn to Cascading Style Sheets, or CSS. In this lab, we will work on implementing CSS declarations in our HTML.
- Import a CSS file in our HTML
- Implement CSS declarations
First things first: we need to make sure our HTML is loading our stylesheet.
We have two options that are considered "best practice":
- Write CSS rules inside of a
<style>tag ("internal CSS"), which tells HTML "Hey, I want to define some CSS styling here - Write CSS rules in an external file that is specified with the
<link>tag ("external CSS").
In our case, we want to provide a link to our stylesheet, instead of writing
all of our CSS code directly in the <style> tag. This allows us to only have
to write styles for the entire site once, instead of repeating every <style>
element on every page. A common workflow is to see developers work on CSS
inside of the <style> tag until their styling is done. At that point they
move it to their external file and remove the <style> element from the HTML
page. Feel free to try it out!
In index.html, provide a <link> tag which correctly sources the CSS file
located in this directory. The <link> tag will link to our file with an
href attribute, like so:
<link rel="stylesheet" href="relative path to CSS file">The href attribute should point to the file style.css which is located in
this directory using a relative path. The rel attribute is used to note
that the file which is being linked has a relation of being a "stylesheet."
Now, what is a relative path? You could write href="style.css" and the
content of style.css would change your index.html file. But we want to
teach you to require external resources (like CSS or JavaScript) by using
relative paths. Relative paths make it crystal clear which file is being
used. Relative paths start with ./ which means "from the directory I am
currently in." So, when we use link to associate with a stylesheet and we
write href="./style.css" we're saying: "From the directory in which I, the
index.html file live, look for a file called style.css and use it. This
pattern will help you and other developers remove any possible confusion.
<link rel="stylesheet" href="relative path to CSS file">Links to stylesheets should go at the end of the <head> section! Make sure you
provide a relative path to the stylesheet.
Hint: Open index.html in the browser. You can test whether your link is working or not by the color of your headline. If it's red, it's working! If it's black, keep going - you'll get it.
Now, we are going to create some CSS declarations and add styling to our
document! First, open index.html in the browser to get a good idea of what
our un-styled page page looks like.
What we would really like is something a little more jazzed up! Let's
work towards that. Set the following properties to specific values. Make
sure to, after each update, look at index.html in the browser to see how it has
changed:
- Set the
backgroundof the<body>element (whole document) to#00b3e6(light blue) - Set the
<div>elements:widthto700pxmargintoauto(centers our element)font-familyto"Helvetica Neue"backgroundtowhitepaddingto30px(creates an invisible space around the element)
- Set the element with the id of
#main-headerto afont-sizeof22px - Set the elements with the class of
.perspective-questionsto afont-styleofitalic
Run learn to test your work and learn submit once you've passed all the
tests.
CSS allows us to easily separate our 'styling' logic into separate files that follow the 'cascading' ruleset. This enables us to keep our HTML clean and simple to read, without sacrificing the customization that we have come to expect on websites.
View Introduction to CSS Lab on Learn.co and start learning to code for free.