Build Your First Website (And Thwack Zombies with HTML and CSS) – Part 5

ApocalyptiCSS

To add CSS, we need one more HTML element, the <style> element. The <style> element can technically go anywhere on your page, but within the head element is a good choice, since the CSS code is not so much what is being displayed as how it’s being displayed. So, we’ll add a style element there and, for the moment, we’ll leave it empty because we’ll add our CSS to it once we’ve discussed that.

<style></style>

CSS lets us make changes to all kinds of things, but, for the purposes of this book, we’ll focus on color changes, font/text changes, and some basic layout.

When we want to make a change to an HTML element, such as changing the <h1> element to an orangey red (the actual color keyword we’ll use is orangered), we must first select the element (i.e., tell the browser what element to make changes to). The easiest way to select an element is to use the name of the element (e.g., p for selecting all p elements). Once we know what we’re selecting, we have to tell it what we’re changing, so we put the properties within curly brackets. In this instance, h1 is the selector, color is the property for changing the text color, and orangered is the value we’re changing the text color to. Between the property and the new value, we place a colon, and after each property/value pair, we’ll add a semicolon.

h1 { 
    color: orangered; 
}

Add that between the style tags on your HTML page. Then save it, and open your HTML page in a browser to see your changes take effect. (If the file is already open in a browser, be sure to hit the refresh button. Browsers don’t automatically update.)

Now change the size of the <h1>‘s text using the font-size property. Set it to 50px (that’s fifty pixels).

h1 { 
    color: orangered; 
    font-size: 50px;
}

Let’s change the color and style of the byline. We’ll make <span> elements italic, using the font-style property, and gray with the color property. (If you are British, are feeling British, wish you were British, or are a zombie attempting to infiltrate the British, “grey” also works, though, oddly, “colour” does not.)

span {
    font-style: italic;
    color: gray;
}

Next let’s work on the navigation. It’s standing out like a zombie without a horde. First, let’s remove the bullets. We do that by setting the list-style-type property to none and applying it to the ul selector:

ul { 
    list-style-type: none;
}

But if we do that, it will affect any ul element on the page. While we don’t have an unordered list on the main page, we do have one on the bio whose bullets should be kept intact. So, we need to localize it. We could add a class attribute to the <ul> (more about those shortly), but, in this case, we can use a simple descendant selector.

nav ul { 
    list-style-type: none; 
}

This tells the browser to only make changes to <ul> elements that are within (also called children of, hence “descendant” selector) a <nav> element. Since the <ul> in the bio is not a child element of the <nav>, it won’t be affected by this CSS statement.

<li> elements are block-level elements, and, as such, they clear space above and below themselves. (Phrase or inline elements do not clear space above and below themselves—for example, adding an <i> element around a word doesn’t put that word on a new line, but adding a <p> element would.) However, in this instance, we don’t want the list elements to be stacked vertically; we want them to lay out horizontally. So, select the <li> elements within a <nav> and set them to display: inline;. This should make them lay out horizontally.

nav li {
    display: inline;
}

You’ll notice that the <li>s, even while displaying inline, are still quite a distance from the side of page, even more so than the <h1> or paragraphs are. This is because <ul> elements have some default margin and padding settings. Margin is a CSS property that determines the distance between two HTML elements, like a zombie’s B.O. force-field that keeps anyone from getting too close. Padding determines the distance between an HTML element’s content and its edge or border, like the distance between the outer wall and the dwellings in a human resistance camp. We’ll set the nav ul’s padding and margin both to 0.

nav ul { 
    list-style-type: none;  
    padding: 0;
    margin: 0;
}

You’ll notice that the <li> elements are now right up against each other. We can use padding to give them a little space. Set a padding on <li> elements in a <nav> of 10 pixels, like this:

nav li {
    display: inline;
    padding: 10px;
}

That puts a ten-pixel padding on all four sides of each <li> in the <nav> section. (We can also set different paddings or margins on individual sides of an element all at once, but that’s beyond the scope of this book.)

Now that the <li> elements are inline, they can be affected by text-direction. Within the nav ul declaration block (the part between the curly brackets), add text-align: right;. This will send your navigation links all the way to the right of the page.

nav ul { 
    list-style-type: none;  
    padding: 0;
    margin: 0;
    text-align: right;
}

To Be Continued in Part 6