Introduction to CSS Lab

Problem Statement

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.

Objectives

Import a CSS file in our HTML
Implement CSS declarations

Import a CSS File in Our HTML

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.

Implement CSS Declarations

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 background of the <body> element (whole document) to #00b3e6 (light blue)
Set the <div> element's:
- width to 700px
- margin to auto (centers our element)
- font-family to "Helvetica Neue"
- background to white
- padding to 30px (creates an invisible space around the element)
Set the element with the id of #main-header to a font-size of 22px
Set the elements with the class of .perspective-questions to a font-style of italic

Run learn to test your work and learn submit once you've passed all the tests.

Conclusion

CSS allows us to easily separate our 'styling' logic into different 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.

Resources

W3 Introduction to CSS

View Introduction to CSS Lab on Learn.co and start learning to code for free.

learn-co-students / introduction-to-css-lab-london-fe-082018 Goto Github PK