CSS stands for Cascading Style Sheets. These style sheets give a powerful and elegant way to handle the presentation of HTML documents. While HTML formerly had to include presentational parts to its code, that was primarily because there was no alternative. In today's lecture we'll start with a single HTML webpage - one similar to what most of you made for the first lab assignment. Then we'll add just 33 CSS rules to spice up the presentation. The rules used in this example should cover the main presentational properties you can change with CSS. First, look the example webpage before CSS and after CSS.
First insert the CSS with the <style> tag inside the head element. Specifically, we should use the tag along with the type attribute, like this
<style type="text/css"> /* CSS Here! */ </style>.
Now the first CSS rule. The form is element { property:value; }. For the first rule let's try:
p { color: #115511; }
This CSS rule sets all of the text inside <p> elements to be a green-ish color, given by the RGB value #115511. Since this webpage is about gardens, maybe this green text color will make sense to have green text.
In addition to changing the text color, we might also like to change its side. This can be done with the font-size property.
p {
color: #115511;
font-size: 0.8em;
}
For the font-size property we give it the value we want for the height of the text. The units for the value above are em, which you can think of as a percentage of the default size the text would normally have. In the case above 0.8em corresponds to 80% of normal text height. If we want to be more exact we can use px for pixel units. This will set how many pixels tall the text will be.
Finally, for our paragraph elements we might also like to change the text-indent and text-align properties. The text-indent property merely states how far in the first line of text is indented. We can use this property for the text in any HTML element, not just paragraph elements. Similarly, the text-align property sets whether the text is pushed to the left, right, is centered, or is justified. Justified simply means that the text is spaced to fill all of its available space on each line (to give straight-line margins on both sides).
p {
color: #115511;
font-size: 0.8em;
text-indent: 1.5em;
text-align: justify;
}
One more thing for changing text: the font family. Until now your webpages have probably been using the default text font that a web browser will give it. Any simple HTML webpage will do this. So, a good way to make your webpage stand out is to use the font-family property to change the font of your text. Note that it's possible that not all computers that view your site will have your favorite font. So, you can give the font family values as a list of preferred choices. The last choice should probably be either serif or sans-serif to say if you want any font that adds details to the tips of letters (like Times) or a sans-serif one without those details (like Arial).
body { font-family: arial, sans-serif; }
In addition to changing the look of your webpage's text, we can also change some style elements around it. The most basic way to do this involves the box model.
In the example above, the white area represents the space taken up by just the text in an HTML element. Around the text, the green area gives the padding area around the text. Outside of that we have the border of this HTML element. Finally, the blue area gives the margin space around this HTML element. By default, other HTML elements will not overlap any of these spaces.
In the CSS code below I'm setting the top and left borders around my HTML body element. A single rule, such as that for the border-top property, gives the border thickness, it's look (solid, dashed, dotted, etc.) and finally its color.
body {
font-family: arial, sans-serif;
border-top: 5px solid #337733;
border-left: 7px solid #337733;
}
After setting the border of just the top and left sides, I'm now going to set the padding area width on all sides. Note that the basic way to do this for the 3 parts of the box model is with the padding, border, and margin CSS properties. If we instead want to set just a specific side of one of these regions, then we use something like margin-top to set the top margin width, for example.
body {
font-family: arial, sans-serif;
border-top: 5px solid #337733;
border-left: 7px solid #337733;
padding: 1em;
}
While the sans-serif font looked good for the small text, for my larger text in the header elements I'm going to put a serif font back in. I can do this for the <h1> and the <h2> elements at the same time with a single rule. I can target as many HTML elements as I like in a given rule, I just have to separate them with commas.
h1, h2 { font-family: times, serif; }
So far all of the HTML elements are layed out in the basic top-down way. I'm now going to change that for a couple of my top elements. Typically, HTML elements are either have a block display or an inline display. A block display element is put on its own horizontal line, while a single line will take as many inline elements as will fit. We can change the display type of any HTML element with the display property, which you would you could then give the value block or the value inline.
Another display change you can make, and one we'll make in this example webpage, is to turn on the float property. This takes an HTML element out of the normal top-down flow and floats it in a certain direction. If you give it the value left the element will float to the left side, while a value of right will send it to the right side.
In the line of code below, I'm going to float my div element to the left. A div element is a great way to put a container around several other HTML elements. In this case, my top h1 element and my top img element were contained in a single div element. the span HTML element has the same effect, but by default a div element has block display while a span element has inline display.
div#top { float: left; }
Last thing on the above CSS rule: the #top part is referencing the id value I gave to the div element. An id is just another attribute you can add to any HTML opening tag. It gives you a way to specifically identify one HTML element rather than all instance of one type of HTML element.
One more change I'll make is for the position property. By setting the position to absolute I can position the element exactly where I want. Other options would be values of relative, static, or fixed.
h1 { position: absolute; }
Here we're just setting the background-color property so that this h1 header will have a dark background. Then I give it white text to make it stand out.
h1 {
position: absolute;
color: #ffffff;
background-color: #337733;
}
I'm now setting the top and left margins to get the element positioned where I want.
h1 {
position: absolute;
color: #ffffff;
background-color: #337733;
margin-left: 5em;
margin-top: 0.1em;
}
Now, a little bit of padding is put in around the text in this header to make it easier to read.
h1 {
position: absolute;
color: #ffffff;
background-color: #337733;
margin-left: 5em;
margin-top: 0.1em;
padding: 0 0.3em 0 0.3em;
}
As one last thing for this header element, I'm giving it a dark left and bottom border to help separate it from the image its overlapping.
h1 {
position: absolute;
color: #ffffff;
background-color: #337733;
margin-left: 5em;
margin-top: 0.1em;
padding: 0 0.3em 0 0.3em;
border-bottom: 2px solid #000000;
border-left: 2px solid #000000;
}
The images below in my table are much larger than I'd like. I can use either the height property or the width property (or both) to set them to a better size. I can target just the images in the table (and not my top image) by stating in the rule that I want to look for a table HTML element and then any img element within a table.
table img { height: 150px; }
Just a small border around the table to (hopefully) make it look nicer.
table { border: 1px solid #337733; }
Some color and padding to make my h2 headers fit in better.
h2 {
color: #003300;
padding-left: 1em;
border-bottom: 1px solid #337733;
}
The paragraph text in my document looks good wrapped around my h1 title and my top image. However, the h2 header immediately following that probably should be put beside that top photo. So, I can set the clear property to have those HTML element clear anything that was floated left, right, or left and right (using the both property).
h2 {
color: #003300;
padding-left: 1em;
border-bottom: 1px solid #337733;
clear: both;
}
Now for my list of links at the very bottom of the page. Using the list-style-type property I can set each list entry to be numbered, to have circle bullet points, square bullet points... or nothing at all. "Nothing" is what I'm choosing here. I'm all using a little padding to give my list some space.
ul {
list-style-type: none;
padding-left: 0.5em;
}
A list doesn't always have to be vertical. Here I'm changing the display property with the value of inline so the list elements are given horizontally. Next, a thing border around those list elements helps make them stand out.
li {
display: inline;
border: 1px solid #000000;
}
We're almost done. For my links contained inside the list entries I'm going to remove the underline with the text-decoration property. Then I put in a little bit of padding to make the text easier to read and change the color to match the rest of my green-ish page.
a {
padding: 0 10px;
text-decoration: none;
color: #337733;
}
Last thing: I want my links to change styles when the mouse "hovers" over them. So, I'm using the hover pseudo-class. This set of CSS rules will only be applied to <a> anchor elements that have a mouse pointer hovering over them.
a:hover {
color: #ffffff;
background-color: #337733;
}
That completes the CSS code for modifying this example webpage!