Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
Heaving done at this point, roughly half of our design, we're now going to move on to styling the sidebar, which is actually kind of invisible at the moment, but if we scroll down we can find it all right here. What we're going to do is pull in the part that makes the sidebar go where it goes. Here we are floating the sidebar to the left and giving it a certain width and then using the negative margin trick. What we have a negative left margin that is larger than the width of the floated element. So in this case to a width of 17em and I'll give it a negative left margin of 18em. If the width had been a 200 pixels, I could've given it a negative left margin of 201 or a negative of 210 pixels or even negative of 200 pixels. The goal here is to get the sidebar width to be mathematically zero, even though it has a width of 17em.
The margin is subtracted from that, the side margins just are subtracted from that to get a sort of a mathematical layout width and so your goal here in order to get this floated sidebar to sit next to the other one, is to have a layout with a zero or less. Here is going to be less. When we hit Reload, there it is, it drops in place right next to the main content column. And it's sitting over top of the 20em right padding in the content column that we added in a previous video. The next thing to do really is to set up some background colors quickly.
The form, which is the search form, and all the h3s in the sidebar actually have the same background color, so use the group selector here to say any form in the sidebar div and also any h3s which are inside of divs, which are themselves inside of the sidebar div, give these a background color. And so when we hit Reload, there's that background color. The next bit takes care of the form. You might have noticed that the form background color is very closely sort of shrink-wrapped to the things in that form.
That's because forms by default don't have any padding. On the other hand they do by default have margin at least in today's browsers. So, we're going to get rid of that margin and we're going to give it a little bit of padding to the form and then if we hit Reload, there you go. The padding helps provide some space between the content, which is, in this case is the form element and the average of the background and by removing the margin, then we don't have to worry about those margins causing strange effects elsewhere.
For example pushing the tea of the day two far away or in the pushing down the entire sidebar column by having the top margin of the form stake out of the floated sidebar div, which is a one of the things can happen with margin collapsing. Now, there is one more thing, which is that we have the search box and the search button, the text input box and the search button sitting on basically two different lines because the, by default text input box is white enough that the search button has to rap to the next line.
So, in the markup we're to take a quick look using Firefox as the source, we can take a look down here and the input has a type of text and it also has a class of text. I added that for a reason actually, because I knew that I was probably going to have to style this, at least in some way. CSS does offer a way to simply style, for example text inputs without affecting other kinds of inputs, like the input button, the submit button, but unfortunately, Internet Explorer for Windows doesn't support this particular bit of CSS. It's what's called an attribute selector, which we didn't cover anywhere else in this title because of the support problems.
What I almost always do, what I'm putting in form elements is whatever type they are, I give them the same class. Ideally I wouldn't have to do that, but if I'm ever going to want to style for example, just text inputs or just check boxes, I'm going to need that class in order for whatever I want to do, to take effect in Internet Explorer for Windows, which if you're like me, you have at least a few people who visit your website using Explorer for Windows. So, what we're going to do here is use that, an element with a class of text, which is the text input, that's inside the form that is inside this sidebar div, give it a width of 9em, which is a figure I arrived at just by trying it out and when we hit Reload, you see that the text simply gets smaller, and there's room for the search button to go next to it.
Styling form elements is kind of an inexact science, in part because there are certain things that you can do to form elements and certain things that you can't and certain browsers are more restrictive than others which are more permissive. Generally, if you can possibly avoid styling a form element, you want to do so. But in cases where you just- there's no other way around it, then you do things like this, where you set a width in order to make your text input box smaller, or maybe you put margins on a form element in order to push it away from other things.
The whole subject of forms, form elements and styling is actually a very sort of complicated an abstract one. So that's another reason why we didn't really tackle it in this title. Generally speaking, though, there's a limited set of things that you can do, specially across browser and so, as I say, if you can all avoid styling form elements you really want to do so, you want to avoid trying to be too cutesy with your form elements, because they are just some things that you can't change, as an example the search button in Safari is not styleble, at least not as of this recording.
That's why I say try not to style these form elements.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.