Page Layouts and Positioning with CSS
The place where magic happens
Good Morning
Welcome to Hackapalooza! I hope you’re as excited as I am to learn how to improve your website! If you need any help don’t hesitate to ask me or a mentor a question! That's what we’re here for!
A quick refresher on what HTML is
We use HTML (Hypertext Markup Language) to help our browsers understand how we want things displayed.
Think of it as being similar to the frame of a house. It holds all the other parts of a website together.
<!-- this is an example of a comment in html - tip: comments are useful for making notes! -->
<body id="css-layout">
<h1>This is a header</h1>
<p>
This is a paragraph with a <strong>strong (bold) tag within it</strong>
</p>
<p class="box">
This is a paragraph with a class of box on it</strong>
</p>
<p class="box">
This is a paragraph with a class of box on it</strong>
</p>
</body>
A quick refresher on what CSS is
CSS (Cascading Style Sheets) is what makes websites look nice. While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.
Think of it as the furniture, decor and landscaping of a house. It makes a house look nice but a house is still a house without it.
/* the following is a tag (notice no hash or period) - this will affect every "p" tag */
p {
background: green;
}
/* the following is an id (notice the hash) - you can use each id once per page */
border: 4px solid blue;
}
/* the following is a class (notice the period) - you can use each class multiple times per page */
.box {
border: 4px solid blue;
}
Alright. Now that we're all refreshed, let's get started!
Getting Started 1/3
-
First, we're going to start by renaming your
final.html to index.html
-
In the
<head> of your newly renamed index.html file we're going to add this:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Getting Started 2/3
-
Next let's create a file called
styles.css in the same folder as index.html file
-
In your
index.html file copy and paste everything in <style> to styles.css
Getting Started 3/3
Open index.html in your browser (Chrome, Firefox...)
Everything should look the same as before. The difference is now we're a little more organized. Everything html should be in index.html and everything css should be in styles.css
We're pretty organized now but I think we can be even more organized than this. Let's go back to styles.css again.
Organize styles.css further
Let's use comments to further organize styles.css. Adding comments is invaluable because they let you make notes that only you will see. They're invisible to people viewing your website from a browser.
------------------------------------------
------------------------------------------
------------------------------------------
------------------------------------------
------------------------------------------
------------------------------------------
Some examples of page layouts
You don't need to add CSS to make a website
If you open test.html and maximize your browser screen you'll notice that reading the text from left to right is a bit of a pain. The more text there is, the more of a pain it becomes. Kind of annoying, right?
It's also not going to win any awards in the looks department either. Let's fix that by learning about different ways we can adjust the "properties" of our website.
Introducing the display property
Every element has a default display value depending on what type of element (paragraph, header, bold) it is. The default for most elements is usually block or inline.
For example, this paragraph is a block element. The browser by default sets it to be display: block.
As you might imagine, the browser also sets some elements to be display: inline. This bolded sentence for example, is an inline element.
p {
display: block;
}
b, strong {
display: inline;
}
Some examples of block and inline elements
<div>Divs</div>
<section>section</section>
<footer>footer</footer>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraphs</p>
<span>Spans</span>
<strong>Bold (Strong)</strong>
<em>Italics (Emphasis)</em>
Practice time: Let's try making the list items (which is usually a block element) an inline element
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
Practice time: Let's try making the list items (which is usually a block element) an inline element
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
li {
display: inline;
}
Introducing the box model
To understand the box model, we need to understand how the browser "sees" HTML elements. To the browser, every HTML element is a rectangular box.
If we show the outlines of all the elements in an HTML document, it looks a bit like this:
CSS uses 5 properties to determine the size and spacing of these boxes:
Margin, border, padding, width, and height
Practice time: Let's try giving the unordered list a padding of 20px
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
Practice time: Let's try giving the unordered list a padding of 20px
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
ul {
padding: 20px;
}
Margin vs. Padding
Adding padding to an element makes the element bigger, whereas adding a margin adds space around the element.
If you make a 100px wide element, and then add 40px of padding to it, it will become 180px wide.
If you add a 40px margin to a 100px wide element, it stays 100px wide.
If you add a 1px border to a 100px wide element, it will become 102px wide.
If your element doesn't have a border or a background, you may not be able to see the difference between margin and padding.
margin: auto
Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, setting the left and right margins to auto will horizontally centre that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.
Practice time: Let's try giving the unordered list a max-width of 600px and a margin of auto
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
Practice time: Let's try giving the unordered list a max-width of 600px and a margin of auto
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
ul {
padding: 20px;
max-width: 600px;
margin: auto;
}
Introducing the float property
Another CSS property used for layouts is the float property.
Floating an element (such as an image) will cause it to "float" to the side and cause other elements (nearby images and text) to wrap around the floated element.
Here's an example of an image floated to the right:
Practice time: Let's try giving the list item with a class of copyright a float to the right
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
Practice time: Let's try giving the list item with a class of copyright a float to the right
<footer>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="blank.html">The void</a>
</li>
<li class="copyright">
Copyright 2014 Kevin Lee
</li>
</ul>
</footer>
.copyright {
float: right;
}
Introducing position: fixed
In order to make more complex layouts, sometimes we need to use the position property. There are a variety of positions (absolute, fixed, static) but we're going to cover one position in this lesson called position: fixed.
A fixed element always stays in the same place even if the page is scrolled.
We can get our menu to stay at the top of the screen while the user scrolls with the position: fixed; declaration.
position: fixed; requires us to set the bottom and right properties to tell the browser where to fix the menu to.
<body>
<a class="back-to-top" href="#">Back to top</a>
</body>
.back-to-top {
position: fixed;
right: 0;
bottom: 0;
background: white;
color: #333;
padding: 20px;
text-decoration: none;
}
Bonus: Introducing media queries
Getting Responsive 1/3
"Responsive Design" is the strategy of making a site that "responds" to the browser and device that it is being shown on... by looking awesome no matter what.
Media queries are the most powerful tool for doing this. Let's take our layout and have it display in one column when the browser is too small to fit the menu in the sidebar.
Getting Responsive 2/3
Let's try adding a media query:
/* this is a media query - if my browser is wider than 481px this gets ignored */
@media (max-width: 481px) {
/* css goes in here */
}
Getting Responsive 3/3
Let's try adding some CSS selectors into the media query to see how it works:
@media (max-width: 481px) {
li {
border-bottom: 1px solid whitesmoke;
display: block;
list-style: none;
padding: 20px;
}
.copyright {
float: none;
}
}
And... we're done!
Questions? Show and tell? If there's anything you're unclear about, now's definitely the time to ask!
