Exercise 5
CSS Positioning
We have explored many aspects of CSS, but one thing we haven't done is move elements around the page. There are a few ways to do this: the first two parts of this exercise will explore them.
Copy provided HTML for style-page.html. Once again, this is the same page with minor changes: there is a subsection added (<section> within a <section>), there are three stylesheets linked, and some JavaScript code included that lets the reader switch between them.
Again, you may not change the HTML. You will create stylesheets style1.css, style2.css, and style3.css and use the widget in the upper-right of the page to switch between them.
The float property
Create a stylesheet style1.css in the same folder as style-page.html. Start by giving the top-level sections (not the subsection) a border, so we can see their extent. Hint: use a child selector to select only sections directly inside the <body>.
margin: 1em 0;
padding: 0.5em;
border: thin #ccc solid;
Use the float property (see also All About Floats) to move the <h2>s to the right. Give the heading a reasonable width and margin so it looks nice but doesn't take up too much room.
You should end up with something like this style1 screenshot. Don't worry about making it look exactly the same (it's just hard to describe the appearance of a page with words).
More floating
Create a stylesheet style2.css: when you load the page, you can use the dropdown in the upper-right of the page to switch to it.
In this style…
- Copy the border around the top-level
<section>s from the previous style. - Float the
<h2>s to the left. - Set the
width: 6emandfont-size: 150%. [Theemunit is relative to the element's font size, so these6emwill be equal to6em×150%=9emof the body font size.] - Give the section enough left padding to contain the heading (a little more than its
widthso you have a little blank space around it). - Give the
<h2>a negative left margin so it moves into the space opened up by the padding.
You should end up with something like this style2 screenshot. Again, don't worry about making it look exactly the same.
The position property
Create a stylesheet style3.css. In this one, we will get a page that's almost identical to the previous one with a different technique.
- Copy the border around the top-level
<section>s from the previous style. - For the top-level
<section>, setposition: relative, and for the<h2>, setposition: absolute. - Set the width and font size of the
<h2>to the same as the previous style.
Make sure to have a look at the page at this point: the position property is powerful, but can very easily lead to un-readable pages because you can overlap elements (especially with different-sized elements, or with different window sizes than you tested). If you're using position on your own pages, be super-aware of how big your content is, and how much room you have made for it to fit into.
Speaking of room for it to fit into…
- Give the same left padding to the
<section>as the previous style. - Set the
leftandtopproperties on the<h2>to move the heading into the space you opened up.
The result should look almost exactly the same as the previous stylesheet.
Make sure your three styles work well for different browser window and font sizes (ctrl-plus, ctrl-minus, ctrl-zero to adjust) .
Colour Codes
Save the provided HTML for colour-page.html and CSS for colour-style.css.
Your task in this question is to complete colour-style.css (without modifying colour-page.html) so that the statements are true: for each of the six parts, give a three-character numeric colour code in the CSS to match the description in the HTML.
Video: CMPT 165: RGB colours for CSS
Organizing Your Files
In your public_html, create a new folder exercise5 and upload your work there. Make sure you can find your work at URLs like:
http://cmpt165.csil.sfu.ca/~userid/exercise5/style-page.html
And submit the URLs…
Submitting
Submit the two URLs of the HTML pages to the CourSys activity Exercise 5.