This preview shows page 1. Sign up to view the full content.
Unformatted text preview: les hold true, do not rely
on them in your CSS. It leads to brittle code where re-ordering files or compressing
them together can break your styles.
Finally, inline CSS inside HTML attributes win over CSS declared in the <head> which wins over
CSS linked to in external stylesheets. Topic 4: CSS Box Model
So we now have a relatively good understanding of how CSS is used and how it's processed.
Let's focus on a specific, often-used case of applying CSS: positioning, aligning elements, or
giving elements certain degrees of margin/padding. But these properties can be tricky to work
with. Trying to set these properties with CSS without an understanding of the model underlying
these properties can lead to problems when debugging your layout (e.g. why won't this element
center? why can't I align all these input elements? etc). So let's learn about this model!
In terms of rendering, every HTML element is constrained within a rectangular box. Here, inspect
the elements of any webpage with a browser's element inspector to show students the
Here's the box model in a nutshell: Margin vs padding: margin and padding seem to be very similar - they add "space" around an
HTML element. There are some important differences, though. As you can see from above, a
larger padding will push the border out. Additionally, the background will still appear in the
"padding" of the box. So think of padding as part of the element, whereas margin is space
The width/height attributes of an HTML element only correspond to the content box, which
contains text/images/etc. To get the full dimensions of an HTML element, you'll have to add the
width/height of the content plus the padding plus the border plus the appropriate margins.
You can add margins in several ways:
margin: 5px; // Adds margin on all sides margin-top: 7px; // Only top
margin: 3px 5px; // Sets top and
margin: 3px 5px 6px 7px; // Sets
margin: 3px 5px 6px; // Sets top // Similar for other sides
bottom to 3px, left and right to 5px
top right bottom left (clockwise order)
to 3px, left and right to 5px, and bottom to 6px Modify the #welcome presentation rule in whale.css to:
Then inspect the "Welcome to my page..." element in the whale page in the browser. Note how
all four components of the box model for the #welcome element are highlighted. Topic 5: Linking CSS to Rails Templates
Cool. So that's a good amount of CSS background. Before we do some practice exercises, let's
go over how you'd actually link a Rails template to a CSS file.
1) Place the appropriate CSS file in your app/assets/stylesheets directory.
2) In your layout file, use the following Rails code:
<%= stylesheet_link_tag "main", "/photos/columns" %>
This will link your layout file to app/assets/stylesheets/main.css and
And that's it! Topic 6: Additional Notes
• In Rails, SCSS/SASS provide simple but useful extensions like variables and mixins to
CSS which help "DRY"
• There are many useful stylesheets available online. http://cssgrid.net/ is a nice one which
is available for free! Next Tutorial: JQuery...
View Full Document
This document was uploaded on 03/18/2014 for the course EECS 6.170 at MIT.
- Spring '13