03 Demo Instructions | Web Design Basics

In class demonstration for week three: introduction to CSS. Finished file.

pick up the HTML5 template from the class portal
Give it a title.
There is an embedded style sheet that we will not use.
```
<style type="text/css">
.example {
}
</style>
```

There is a link to an external style sheet.

 <link rel="stylesheet" href="CSS/styles.css" media="all">

We will use an external style sheet. Create a folder called “CSS” and a file called “style.css” External style sheets are just blank files, filled with css rules attached to selectors that target the elements in the HTML document.
If we were to start adding rules, we would be adding our rules on top of the default rules of the browser. Since we do not want to depend on the rules of this or that browser, we neutralize them with a browser reset.
After the Browser reset, we begin by writing that this is where the user style sheets starts.
```
/*USER STYLES*/
```
We start by targeting the most general tags, and slowly work our way to more specific tags.
The most general tag is the <body> tag. Do we want to keep the white background? What fonts do we want, etc? How about:
```
body {
background: hsla(0,100%,70%,1);
font:  400 1.5em/1.6em  "Times New Roman", Georgia, Serif;
}
```
Be careful with this font property, as it combines a number of properties, and you need to execute it exactly as it is here. 400 refers to the weight of the font. 400 is normal. 700 is bold. 1.5/1.6 provides us with both the font size and the line height. I then name the font family, were Times New Roman is requested, and if that is not available , Georgia, then any serif font. See Class 6 for more font information.
Since every other tag will be written inside the body tag, they will inherit some of these properties. The font property is inheritable, the background property is not.
The next strategy is to limit the width of the window when looking at the website on a computer screen, and to center it in the middle. We limit the width to 940px and place it in the middle by using the CSS property margin with value auto like so: margin: auto;.
```
section {
width: 940px;
margin: auto;
background: hsla(30,100%,98%,1);
}
```
The background of the section tag is only as large as the information inside of the tag. Right now it takes on the size of the picture. Let’s swap the picture with the text that one of you has written. The section expands to contain the new content.
The CSS reset has reset most properties, so we need to define all of our CSS. We start by providing the section tag with 40px padding. This keeps the content from hitting the edges of the section tag.
Save the document, make the browser window active by clicking on it and hit command-R to refresh the browser.
We can keep the top from touching the top of the window by giving it a positive top and bottom margin. This is done by adding 40px before the auto. margin: 40px auto;
CSS always starts on top, then goes clockwise, to the right, bottom, and finally left. If you only have one value, all sides take on that number. If you specify two numbers, the first signifies the top and bottom, the second the right and left sides. If there are three numbers, you can give different values to the top and bottom, and the sides stay the same. With four values all the sides are specified separately.
Let’s define the section by adding a #444 border. We can do that with a shortcut that allows us to specify width, kind and color at the same time; border: 3px solid #444;

The entire code for the section now looks like this:

 section {
width: 1100px;
margin: 40px auto;
padding: 70px 30px;
background: hsla(30,100%,98%,1);
border: 3px solid #444;
}

What if I were to give the header a background color? If I color the header, it looks kind of clumsy, because of the padding I gave the section. I want to counteract that by giving the header negative margins for each side, but not the top or bottom. That is accomplished by margin: 0 -60px; Giving it a little extra makes it stick out over the section, and has the effect of raising the header above the rest of the document, which helps define its importance in the visual hierarchy. I also want a little space between the header and whatever comes next. 30px should do it. margin: 0 -60px 30px; I give it a border border: 1px solid #444; and 20px of padding to finish it off.
```
header{
background: hsla(0,100%,90%,1);
margin: 0 -60px 30px;
padding: 20px;
border: 1px solid #444;
}
```
Next up is to style the h1 header. If we make it 2em (that is a size based on the width of an em dash). OK, that is not brash enough. Lets go with 4em. The serif font does not work and I change it to Helvetica. There are more interesting fonts available, but for now, lets keep it simple.
The navigation is a list. Lists items by default act like blocks. That means they go down like paragraph returns. We want them to go across, so we need to target the list items in the header and change the display from block to inline-block. With a little margin we can separate the menu items. We can go further, but lets leave that till class 5.
```
header li {
display: inline-block;
margin: 0 10px;
}
```
It is easy to have paragraphs display one below the other. It is more difficult to display them side by side. Going vertical is natural, going horizontal is what will give you your headaches.
To give us some practice, I will demonstrate the float technique to place items horizontally. This is the technique used by the NYTimes.com to create their layout. You can see this for yourself by installing the Plugin. Click on the bug that is installed to the right of your address bar, select outline in the pop-up and select outline frames. You will see almost every box in the layout light up.
The float technique was originally used for floating pictures, but five years ago it was adopted by the NYTimes to float layout elements. Tables were used for layout before that time.
The first step is to float an image to the right. Create a figure, img and figcaption and link to an appropriately sized picture. Since I may want to move pictures to the right more often, I create a class called pict-r, and use the class attribute in the figure class="pict-r" . A selector for the class is placing a period before pict-r in the CSS style sheet .pict-r . I also specify a smaller font for the caption, and align it to the right, and put a border on the image, though I offset it by 2px using padding.
```
.pict-r {
float: right;
margin-left: 40px;
}
img {
border: 3px solid silver;
padding: 2px;
}
figure {
}
figcaption {
font:  400 .7em/.7em  Helvetica, san-serif;
text-align: right;
}
```
The picture moves to the right. The caption is flush right. The picture has a border around it, and the text runs around that picture.
We use the same idea, but now we float a layout element to the left. THe layout element is created by introducing a div in the markup that encloses the text I want to float to the left.
This time I use an ID to target the div. An ID can only to used once on a page. The id attribute is placed in the div tag: id="left" and in the style sheet, a hashtag is used as the selector: #left
```
#left {
float: left;
width: 44%;
margin-right: 3%;
padding-right: 3%;
border-right: 2px solid silver;
margin-bottom: 10px;
}
```
I used percentages as an easy way to figure out the width. It is always a percentage of the width of the parent element. I could have figured out the pixels values and done it that way as well.
When I decided to put a top and bottom holding line it, a problem arose, and I needed to push the last paragraph below the float. There is a CSS property to do this, called clear, meaning clear float. That allowed me to put the last paragraph below the two columns.

To finish it off, I gave the paragraphs a 13px spacing at the bottom.

 .bottom {
border-bottom: 2px solid silver;
padding-bottom: 10px;
margin-bottom: 20px;
}
.top {
clear: left;
border-top: 2px solid silver;
padding-top: 10px;
margin-top: 20px;
}