Join Justin Putney for an in-depth discussion in this video Creating the default slide appearance, part of HTML5 Projects: Creating a Responsive Presentation.
- View Offline
So let's take a look at what the HTML looks like so far with no styling. going to take the index file and open it up in Chrome, and see we have all of our content here, but it just flows along in a row. So take the same file, which is the start file, the index file for 0203 in the Chapter 2 folder. And I've got it opened up in Dreamweaver here. So, in the head tag, I'm going to have you go ahead and add links to two style sheets neither of which exist at the moment but they will shortly.
There's going to be a lot of typing in this video, so hang in there. Let's create a link tag for the first style sheet. I'm going to set the rel attribute to style sheet. And the type to text/css. And then the location of this will be in a CSS folder that we're about to create. And the first one is going to be a standard CSS file that's used in a lot of sites called Normalize. Essentially, Normalize will restyle a lot of the defaults for basic tags that are used in almost every HTML document. And then we're going to add one more link tag here, and I'm going to go ahead and just copy the beginning of this and I'm using my keyboard shortcuts here to paste it in.
It'll be in the CSS folder again and let's give this a name of Styles. I'm going to create that momentarily. And you can go ahead and save this document and if you don't have the access to the exercise files, you can get the Normalize file by going to Google and typing in normalize CSS, and it'll be the first hit. If you have access to the exercise files, I suggest creating a new folder in your start folder, calling it CSS and copying the Normalized file from the CSS in the final folder.
Let's go back to Dreamweaver, and create the styles.css file. So up go up to File, and choose New, and select css from the page type and click Create. Go up to File and choose Save As, then save it as Styles.css and make sure it's in the same folder with your normalized.css file. Let's start by styling the top level tag in the HTML document, which is the body.
We're going to add a font size that's going to trickle down to all of the tags within the body. And here we want to use a relative measure of font so that we can control it at a global level as the size of the screen changes. So, let's set font size to 2.5em. Em is a relative measure. 1 is sort of the default of a 100%. We're going to make this quite a bit bigger, because in the case of a presentation, it's probably going to be given on a large screen that people are looking at from a distance.
It's going to have less content than most HTML documents. At least on a per screen basis and on mobile devices they're relatively small screens so the type there has to be reasonably big too so that it can be read easily. So close the body tag and let's set that font size property for our first heading as well. And that's going to be set to a relative value of 2.25ems. So that's relative to the body, it's actually going to be 2.25 times bigger than the body size.
And then one more property and this came about because of trial and error. I want everything after that big headline to actually sit a little closer to the headline itself than it does by default. I'm going to set a negative value for the margin bottom property. It's going to be negative 0.25em. And then let's set a font size property for the second heading as well. And that's going to be about half the size of the big heading.
So let's make that 1.2em. Now recall from the HTML file, which I'll switch over here, that all of the slides are contained within a div tag with a class of slides. So we're going to style that entire container by using the class selector, which is a dot. And then we're going to set the position to absolute. So, this is a little bit different than most HTML is designed, where it kind of flows together. We actually want to treat the browser window like a canvas and have kind of specific values here.
So we want the entire content of the slides to sit in the upper left-hand corner, no matter what. So we're going to give it a position, which is absolute, and set the width and the height to 100%. That way the slide container will fill the entire window and we're going to add a background to that momentarily so let's actually make the color of the text white. So you can do that by setting the color property and I'm just going to use the short-hand for the hex, which is 3 f's. And then there may be, as the screen gets scaled up or down, content that gets pushed off the edge.
We don't want to accidentally trigger scrolling or have something display in an odd way. So, we're actually going to limit what's displayed to the size of the screen and the way we're going to do that is to set the overflow property of the slide container to hidden. And then let's add a simple gradient to the container itself. That way, it'll sit behind all of the slides. Let's set the background property to a linear gradient, which will start at the bottom and then go from black. Just 3 zeros for the short hand.
And it'll go to kind of a middle gray. So 3 6's there. And then I'm going to copy this whole line because this is a newer property that hasn't been completely adopted into the standard or it's in the standard, but it hasn't necessarily been adopted by the browsers the same way. I'm going to use the browser prefixes. So actually I want one more in here. Let's start by adding the dash o dash prefix, for Opera browsers. And then the moz for Mozilla Firefox, and WebKit, and then one more for Internet Explorer which is just MS for Microsoft. So I'm going to close that, save this CSS file.
Let's take a look at how the HTML appears right now, refresh this. And you see the background has taken effect. The larger point sizes in the white type is there and the content just sort of ends wherever the screen does. And that's because we have that overflow set to hidden. So now what we want to do is actually break these slides apart so they're not all displaying together. So remember each slide is a section node, so let's add some CSS to the section tag itself.
So we're going to do the same thing here. We're going to have an absolute position. So that we pick that up from the slide container and the width and the height are going to be 100% again. So that the slide fills the screen no matter what. Now we're going to add a little bit of padding so that the content doesn't hit the edges of the screen. And it's going to be a relatively large value. Let's just say 36 pixels. And here, we run into something that is a little bit of a browser quirk. So, at least in the case of Firefox, the default display is a little bit different than you'd expect it to be.
And actually, we can see this here in Chrome. I've got just a jsfiddle here. Jsfiddle is just a quick way to test code in kind of a live environment. So here, if I run the code as it is right now, I have this box. I have the height and width set to 100%, just as we're doing in our code. I've got a border, so you can see it, and 36 pixels of padding, just like we have. And what you can see is that no matter how big this window is, this box actually gets pushed off the edge of the screen.
And so what I have here are these box sizing property and a version for Mozilla as well. And so if I just un-comment these lines of the CSS and I run this again, you can see that the box now fits inside of the container here. And the word content gets pushed in based on the padding. And so what we're effectively telling the display with this code is that we want the padding to come inward from the height and width that we've set. We don't want the padding to push the height and the width bigger. So that's an important item to add in our code here. So let's go ahead and add the box sizing property, and we'll set that to border box and then I'm going to copy that and paste it twice and add a prefix here. One for Mozilla Firefox, that's moz.
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout