CSS Set Up
Objectives:
Review
HTML
Set up a link to the
CSS
file in HTML head.Set up a simple wrapper.
File Location
For this lesson you'll be working in the following files:
javascript-library
└── 0-PreWork
└── 1-HTML-Basics
└── 2-CSS-Basics
└── 00-setup.css
└── 00-setup.html
└── 3-JavaScript-Basics
└── 4-assets
Description
CSS
(Cascading Style Sheets) is the language we use to tell the browser what elements in our HTML
document should look like. It's common to hear HTML described as the skeleton of our document and CSS described as the skin. This is because HTML defines where elements are rendered, and CSS defines the characteristics of those elements.
Using the id
and class
attributes, we can use CSS to target a single specific element (id
), or apply a style to all of the elements of a group (class
).
You can use CSS to do the following:
Give the outside of the site a unique look and feel.
Alter colors, fonts, backgrounds, etc.
To implement some effects and light animations.
In the sample code, note that we're using a <link>
tag inside of the <head>
to tie a CSS file to our HTML. This is done in the <head>
so that the browser will load the CSS file before it renders the HTML elements. Because the browser reads line-by-line, if we loaded the CSS file at the bottom of the page, then the HTML will have already rendered and the result may be a negative experience for our users. This is especially evident on a slow connection, because all of the processes (including loading CSS) simply take longer to make their way down the wire.
At this point, let's go ahead and grab another image to visualize how a .css
statement is written. Go here and save the image to your 4-assets
folder.
Sample Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Notes</title>
<link rel="stylesheet" type="text/css" href="00-setup.css" />
</head>
<body>
<h1>CSS Notes</h1>
<div class="wrapper">
<h2>CSS Statements</h2>
<p>Four main components include the following: </p>
<ol>
<li><b>Declaration: </b>the statement as a whole with curly braces.</li>
<li><b>Selector:</b> the name of the part you want to style.</li>
<li><b>Property:</b> properties to edit(e.g., width, height, background, etc.)</li>
<li><b>Value:</b> numbers, colors, urls - values that we assign. </li>
</ol>
<p>Here's a photo to illustrate these items:</p>
<img src="../4-assets/anatomy_css_rule.gif" id="css-photo" >
</div>
</body>
</html>
In the above code, we've assigned a class
.
Adding CSS
In the 00-setup.css
file, add the following code:
body {
background-color: #D3D3D3;
}
.wrapper {
border: 10px solid red;
}
You should see a different background color, and you should see an awesome red border after you save both files and load the HTML to your browser.
Comments in CSS
Here's how to do a comment in CSS:
/*This is a CSS comment*/
body {
background-color: #D3D3D3;
}
/*This is another CSS comment*/
.wrapper {
border: 10px solid red;
}
Discussion
In this lesson, we've introduced the concepts of class
and id
, as well as shown how (and just as importantly, why) to add a CSS file to the head of an HTML document. We've also made you aware of class
and id
, which we'll explore in greater depth in the following lessons.
Challenge
Investigate hex colors here and try changing the background-color
attribute that you defined in the .css
file. Experiment with the border
attribute in the .wrapper
selector.
Last updated