🖊 Sign up for a free account at Codepen.io
(not the Q&A panel)
Click Raise Hand ✋ to be promoted to panelist)
Visit us at UMaine.edu/newmedia or
or contact Jon by email or on Twitter
Visit this start page with basic HTML and CSS, and click "Fork" at the bottom of the page.
Final page (for reference)
Most of the tags in the HTML pane for our sample page are <div>s, or rectangular divisions. Some have nested content, but the most important <div>s have these ids:
The CSS pane styles the colors, fonts, and layouts on the page. Let's use CSS to make it easier to see the major <div>s listed above.
In CSS, body > div symbol means the style will only affect div tags that are immediate children of the web page body, and won't affect any nested content. So we can add red outlines to those rectangular divisions by adding this to line 18:
body > div {
outline: red solid ;
}
These outlines are just for debugging; we can delete this line later or comment it out by enclosing it in /* ... */.
Setting up rows with headers, footers, sidebars, and other shapes of different sizes is messy with older techniques like absolute or relative positioning, especially if you want the backgrounds to expand to fill the space. But CSS grid offers a nifty way to visualize your layout using "areas."
Look at the body selector on line 4. It has a property of display set to grid, and then a property called grid-template set to a kind of map made of words.
body {
display: grid ;
grid-template:
"title title title logo" 20vh
". . . logo" 5vh
"menu . blurb blurb" 50vh
"about about blurb blurb" 10vh
/ 4fr 1fr 6fr 6fr
;
...
}
This map is basically a picture of what you should see on the page. The top row shows that the title area should span three of the four columns, with the fourth reserved for the logo (a photo of a puffin).
The second row shows that the logo area should drop a little lower than the title. (The dots mean empty space).
The third row shows the menu occupying the first column, then a gap, then the blurb occupying the far right.
The fourth row shows an about section below the menu, and that it's butt up against the blurb.
⚠️ Note the quotes around the area names and the semicolon ; at the end of the entire block. CSS grid won't work without these.
Now you may be surprised that the menu takes up so much room on the page when it only occupies one position in the grid template. But look to the right and you'll see 50vh, which is CSS code for 50% of the viewport height (that is, the browser window). This number sets the height of that row, and as you can see it's much bigger than the other rows, so the menu and blurb take up a lot of vertical space.
Try adjusting the numbers on the right-hand edge to play with the height of each row in the grid. Don't worry if things overlap; you can always press Command-Z (Control-Z on Windows) to reset them.
Of course, CSS doesn't know which divs are the logo or menu areas unless you specify them. You might be tempted to think these are the ids for each HTML element, but they're not. These names are a special property, called grid-area, that you have to add to each of the items. (Remember that up to now we have only changed the CSS properties of the container.)
#my-title {
grid-area: title;
}
#my-logo {
grid-area: logo;
}
#my-menu {
grid-area: menu;
}
#my-blurb {
grid-area: blurb;
}
#my-about {
grid-area: about;
}
Once you've added these, the actual layout should look like the map. (I like to add tabs between the areas in the map so they line up nicely.)
Along the bottom of the grid template, on line 11, you'll see a series of numbers with the unit fr.
body {
display: grid ;
grid-template:
"title title title logo" 20vh
". . . logo" 5vh
"menu . blurb blurb" 50vh
"about about blurb blurb" 10vh
/ 4fr 1fr 6fr 6fr
;
...
}
That fr unit stands for "fraction." Try changing these numbers you can change the proportion of the page width allotted to each column.
One thing that's cool about the "areas" approach is that you can lay out your web page visually without using a single number. You don't really need the column width specifications, and you can get rid of the row heights too, as long as you are willing to have the heights determined by the item content.
A media query can change selected properties of CSS to adapt to smaller devices such as phones and tablets. Try shrinking the browser width to approximate the size of a tablet or phone and watch how awful the layout becomes.
One of the more noticeable problems is the title size, which is way too large for a small screen. You can see in the CSS that it's set to 5em, which means five times the size of text in a normal paragraph.
We can shrink the title for small screens with a CSS media query. Paste this code into the bottom of the CSS pane. Note the extra braces around the @media query.
@media( max-width: 800px ) {
#my-title {
font-size: 1.7em ;
}
}
Now shrink your browser window. Once the viewport gets smaller than 800 pixels, the title shrinks to a more reasonable size. We can do the same for other
We can shrink the text in other divs for smaller screens too. Try out values like the following, and test them by narrowing your browser window.
@media( max-width: 800px ) {
#my-title {
font-size: 1.7em ;
}
#my-menu {
font-size: 1em ;
}
#my-blurb {
font-size: 1em;
}
}
⚠️ Make sure to respect the double set of braces { }
Now the fonts are smaller, but the layout still looks scrunched. There's an easy way to fix this by changing the body property grid-template inside our media query to something a lot simpler.
@media(max-width: 800px) {
body {
grid-template:
"logo title"
"menu menu"
"blurb blurb"
"about about"
/ 2fr 3fr
;
}
p {
font-size: 1.4em ;
}
#my-title {
font-size: 1.7em ;
}
#my-menu {
font-size: 1em ;
}
#my-blurb {
font-size: .8em;
}
}
We've just reduced our multicolumn layout to a single column, which makes it easy to scroll on a phone. Expanding the window will bring back our more complex layout again.
It would be nice if our menu buttons were more spread out. Fortunately, we can nest a grid within a grid, and if we put this in our media query, it will only activate on small screens.
@media(max-width: 800px) {
body {
grid-template:
"logo title"
"menu menu"
"blurb blurb"
"about about"
/ 2fr 3fr
;
}
p {
font-size: 1.4em ;
}
#my-title {
font-size: 1.7em ;
}
#my-menu {
grid-template-columns: 1fr 1fr ;
gap: 2vw ;
font-size: 1em ;
}
#my-blurb {
font-size: .8em;
}
}
Find the HTML pane at left, look for text between tags, and type over it.
You can't upload an image or other assets to CodePen unless you have a Pro account. Fortunately, you can find the URL for an image on Google or Unsplash, and set it to be the background of a tag by writing CSS like this:
#my-logo {
background-image: url( https://example.com/dog.jpg ) ;
background-size: cover;
}