×
By the end of this chapter, you should be able to:
When we first introduced HTML, we said that it was primarily responsible for holding the content of the page, while the styling was handled by CSS. So what is CSS, anyway, and how can we use it to style our web pages?
CSS stands for Cascading Style Sheets, and it's a way to describe style rules that we'd like to set for our HTML elements. Using CSS we can alter things like colors, fonts, margins, text alignment, and much more! Here's some further reading on the background and history of CSS, if you're interested.
There are three ways to include CSS in our web pages:
style
attribute to an HTML tag. We will see shortly that this can have some unintended consequences.<style></style>
. This is done by using a style
tag and placing CSS inside of it.Since we will be using external stylesheets, we need to figure out how to link our CSS to our HTML. The answer is with a link
tag! If we have a file called style.css
in the same folder as our HTML file, we can link them with the following tag, which you should place inside of the head
element:
<link rel="stylesheet" href="style.css">
Each CSS rule consists of a selector (how we find the element/elements) to target and a pair of curly braces, a.k.a. {}
. Inside of {}
we specify properties and values; we separate the two with a :
, and after the value we add a ;
. To add multiple selectors we separate each one by a ,
. This looks something like this:
body { background-color: green; }
In this rule, we are targeting the <body></body>
element and applying a background color to it. While this works, it might be a bit too general (maybe we only want a background color of green on certain parts of the page, not the whole body). In order to be more specific, we can use attributes like class
and id
to target our elements. We'll talk more about these attributes in the next chapter; for now, you can think of them as a tool that makes it easier to find the element you're looking for on the page. The biggest difference is that id
s must be unique: two elements should never have the same id
. But you can have multiple elements share the same class
.
Let's take a look at a sample HTML file. We will call this file index.html
. Notice the <link/>
tag we are using to link to an external stylesheet,which we will call style.css
:
<!DOCTYPE html> <html> <head> <title>Learn CSS</title> <link rel="stylesheet" href="style.css"> </head> <body class="main_styles" id="container"> <header class="main_heading"> <h1>Welcome to our website</h1> <h4>We're so happy to have you</h4> </header> <section class="main"> <ul> Here are some reasons you should keep reading.... <li>You're learning things!</li> <li>CSS is fun!</li> <li>Well.....not always, but it is essential to know!</li> </ul> </section> <footer class="main_footer"> <p> Thanks for checking out this page! <a href="#">Here is a link that goes nowhere! It's for showing you stuff with CSS......we promise</a> </p> </footer> </body> </html>
We can see from this HTML that we have added some class
and id
attributes. Right now they do not alter anything about the page, but we can use them as selectors with CSS. To target a class with CSS, add a .
before the name of the class. For an id, add a #
before the name of the id.
This is what some CSS might look like for our page (imagine our filename is style.css
and is in the same directory as our index.html
:
#container { font-size: 16px; } .main_header { background-color: grey; } .main { background-color: blue; } .main_footer { background-color: green; } .main_header, .main_footer { color: red; }
After typing this code into your style.css
file, refresh the page. If you've set things up properly, you should see some big changes in the way your page looks!
One important thing to know about CSS is the C, or cascading nature of CSS. This means that your code is read top to bottom, so if you have the same level of specificity, the rule closest to the bottom wins. For example, consider the following stylesheet:
p { font-size: 16px; } p { font-size: 100px; }
These two rules conflict, but because they have the same degree of specificity, cascading will kick in, and the latter rule will overwrite the former. The text on this page will be huge!
So far we have seen a few basic properties, such as background-color
, which allows us to set the background color of an element. The value we assign to this property can either be a named color (blue
, green
, red
etc.), a hex code (# followed by six values from 0 to F), an rgb value (red, green, blue), or an hsl value(hue, saturation, lightness) value. If you don't know what these are, you can mess around with them here. These same values can be assigned to the color
property, which sets the font color on an element.
If we want to change the text on our page, we commonly use some of these rules:
font-size
- select the size of your font (we will discuss other units of measurement in the next unit)text-align
- align the position of the textfont-family
- choose what kind of font you want to useletter-spacing
- add positive or negative (less) space between characterstext-transform
- capitalize/uppercase/lowercase your textline-height
- choose the amount of height between linesfont-variant
- useful for displaying a small-caps fonttext-shadow
- add a shadow to your textcolor
- select the color of the textHere's an example of how you could set values for each of these properties:
.some_text { color: #BDBFEF; font-size: 12px; text-align: center; font-family: helvetica, sans-serif; letter-spacing: -1px; text-transform: lowercase; text-shadow: 0 2px 0 black; /* first value is horizontal/x offset */ /* second value is vertical/y offset */ /* third value is how much blur */ /* fourth value is the color */ /* you can even have multiple shadows separated by a comma! */ line-height: 1.4; font-variant: small-caps; }
There are hundreds of CSS properties, much more than we can cover here. You'll pick up more properties as you start working on your projects. If you'd like to see an exhaustive reference of CSS properties and other keywords, MDN has got you covered.
Now that we have an idea around basic color and typography, let's see how to add some space around our elements and the content inside. In order to do that, we first have to understand what the box model is. But before we explain the box model, let's make sure we understand some basic properties for adding space between elements and content.
width
- The width CSS property specifies the width of the content area of an element.
height
- The height CSS property specifies the height of the content area of an element.
margin
- used to generate space around elements. margin
is a shorthand for margin-top
, margin-right
, margin-bottom
and margin-left
.
padding
- The padding
property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. padding
is a shorthand for padding-top
, padding-right
, padding-bottom
and padding-left
.
border
- The border
property defines the space between an element's padding and margin. border
is shorthand for border-top
, border-right
, border-bottom
and border-left
.
div { /* This: */ margin: 20px; /* Is the same as: */ margin-top:20px; margin-right:20px; margin-bottom:20px; margin-left:20px; /* This: */ padding: 10px 20px; /* Is the same as: */ padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px; } h1 { /* This: */ margin: 20px 10px 5px; /* Is the same as: */ margin-top:20px; margin-right:10px; margin-bottom:5px; margin-left:10px; } h2 { /* This: */ margin: 10px 20px; /* Is the same as: */ margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; }
Now that we understand this, we can think of every single element on a web page as a rectangular box.
From MDN:
In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.
In CSS, each of these rectangular boxes is described using the standard box model. This model describes the content of the space taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.
The true width/height of an element is comprised of its width/height + padding + border. Margin is not counted when calculating the true width/height!
div { width: 200px; height: 200px; margin: 20px; padding: 20px; border: 20px solid black; } /* True width = width (200px) + padding-left(20px) + padding-right(20px) + border-left (20px) + border-right (20px) = 280px */ /* True height = width (200px) + padding-top(20px) + padding-bottom(20px) + border-top (20px) + border-bottom (20px) = 280px */
When you're ready, move on to JavaScript for Behavior