recitation5 notes

Trying to set these properties with css without an

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

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 rectangular boxes. 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 around it. 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-[bottom|left|right]: 3px; 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: #welcome { font-size: 36px; text-align: center; padding: 10px; border: solid; } 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 app/assets/stylesheets/photos/columns.css. 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.

Ask a homework question - tutors are online