I think that all section headings in a web page should be purple, and that web pages should have orange backgrounds; I’m apparently not alone. Let’s do it:
The <style> tag starts the description of your
modifications to the style of the document. The value of the
type attribute in
<style type="text/css"> tells the web browser that
the language used to describe the style will be Cascading Style
Sheets, or CSS for short.
The CSS language is quite simple: it is a list of rules specifying
how elements should be displayed. Each rule starts with a
selector: a text description that selects some
elements of the HTML document. In the example, h1 in the
style section selects all h1 elements in the HTML document.
Following each selector, within a pair of curly braces {},
there is a list of style properties and the value(s) for each. Each
property has a name, and can take certain values. For example, the
color property can take on certain named color values, like
purple, or web colors
described by a hexadecimal number following a pound sign,
#.
There is a semicolon after each property assignment.
By default, HTML elements like images are displayed on the left side of the page, with nothing else on the same line:
The float property lets you specify different behavior,
and can take on values like left, right, or
none (the default behavior). If you float the
image to the right, then the image will be placed on the right-hand side
of the screen, and text that appears later in the HTML code will flow
around the image. Clever use of floats is a large part of how modern web
pages position elements on a page.
Float the image to the right, using the float
property.
Here is a solution.
id attributeThe style rules so far select all elements of a particular type. What if you had many images in the document, and only wanted one of them to float to the right? Or wanted only one heading out of many to be red? We need a way to select a particular element of the HTML page.
In order to specify a particular element, we need to use both HTML
and CSS. In the HTML, we need to give a name, called the id
to the element using the special id attribute. In the CSS,
we need to use a selector that works based on the id, rather than the
tag name. Let’s look at a simple example with some HTML h3
tags.
There are a few things to note:
redrum_heading. (Well, it might work; browsers are
forgiving. But don’t do it!)id attribute.class attributeAn id should be used to select a specific, named element
from the HTML, and each id should be unique in the HTML document. But
sometimes, you want to select several elements. For example, perhaps you
have several paragraphs in the text of your new novel, but you decide
that some of the paragraphs are warning notes, and should be typeset
differently:
The class attribute in the HTML can be used to specify
that a particular element is in a group, called a class, with
the class name given by the value of the attribute.
In the CSS, we can specify that a rule should apply to all elements of a particular class using a dot followed by the name of the class.
Note. It is tempting to overuse the
class attribute. For example, imagine you wanted to have
block quotes in a Wikipedia article about Mark Twain. It would be
tempting to use a class="myquote" tag in quoted paragraphs,
and typeset all such paragraphs using a style rule. But in fact, a
<blockquote> tag already exists, and would be a much
better choice, since using the tag would indicate more directly that
this is really a quote, and not just some class you happened to call
“myquote”. The next maintainer of the page will know exactly what is
intended by the use of the proper tag.
Where possible, it’s also good to use classes semantically, to
indicate meaning or intent. For example, we called the class above
warning rather than
red_text_with_a_box_around_it. That way, if we want to
change warnings to be orange, we can do so without having to change the
name of the class.
span tagSometimes, you’d like to give a piece of text a name or a class, but
you don’t want to put that text in its own paragraph. The
<span> tag can be used to create a new HTML element
that by default, doesn’t have any special formatting applied to it. Then
you can give the span tag an id or a class, and use CSS to style that
piece of the document. We’ll see an example in the next section.
div tagThe div tag works much the same as the span
tag: it’s a generic element that can be used to package some HTML code
into an element, and give that element a class or
id. Once an element has a class or id, it can be styled, or
as we will see soon, manipulated using Javascript.
The span and div tag are primarily
different in how they are displayed. A span element is
displayed inline: just like the <strong> tag that we
saw earlier, the location of text inside a span element
appears in the same place it would without the span tags, while a
div is a block element that, like a paragraph, appears on
its own lines in the document, unless you specify otherwise with style
rules.
Because div elements are meant to be displayed
separately as blocks, it does not make much sense to use a
<div> tag nested inside of paragraph
<p> tag pairs. (It also doesn’t make sense to nest
paragraphs inside of paragraphs. That would just be weird.)
You can think of the div tag as being used to divide the
document into large pieces, called divisions, while the span tag
isolates and identifies small pieces of the document for styling or
manipulation.
You may have noticed that there is a dot in the style rule
.important in the previous example. As mentioned above, the
dot tells CSS that important is the name of a class, not
the name of a tag: apply this style rule to all HTML elements that are
in the class important. In fact, we expect many tags,
possibly even of different types, to be labelled in the same class:
that’s the reason for using a class.
In a CSS style rule, the text before the style changes is called the
selector; remember that you use pound # to select
an element by id, dot . to select a group of elements by
class, and a tag type to select a group of elements based on tag
type.
Put the second list item in the important class. If you
are successful, the second list item (including the number 2) should
turn red.
Here is a solution.
There are some other tricks. For example, you can follow the id,
class, or tag specification with a colon and the keyword
hover to select items of that type that the mouse is
hovering over:
The hover keyword is frequently used to build navigation
menus that link to other pages or cause some action to happen when
clicked on: the change of color hints to the user that some exciting
action will happen if they click on that item.
CSS selectors can be even more complicated. For example, if you’d
like to select all list items from the class important (but
not important paragraphs or unimportant list items), you could use the
query selector li .important.
Modify this code so that only the hummingbird and the UFO are red, by putting those list items into the same class, and modifying the selector.
Here is a solution.
You can also select multiple tag types, classes, or ids with the same
selector by using commas between the components of the selector. For
example p, li:hover would select all paragraphs, and all
list items with the mouse over them, and apply the same rule to
each.
Make all paragraphs and hovered list items red.
Here is a solution.
You can select elements within elements. For example, you could use a
div tag to label a section of the document as being the
navigation bar (with id="navbar", perhaps), and then select
within that all list items within the navbar that were hovering and
color them red.
The following example uses the tools described above, together with a few new style properties, to create a navigation bar for a simple web page. Read the code together with the discussion that follows the code.
First, read the HTML code within the <body> tag
pair, near the bottom of the document. First, there is a
div with the id “navbar”. This div contains an unordered
list; each list item itself contains a link to a web page.
Following the navbar div, you’ll see a paragraph and another unordered list. They are not very interesting, and just provide some text content for the page.
The goal is to use CSS to style both the navbar div itself, and the HTML elements within the div (the list, the list items, and the links). In the navbar, we want:
Exercise: In the above example, delete or change CSS properties to experiment with spacing between elements (using padding), colors, and whether or not links are underlined.
CSS is a simple language. You have just learned the fundamental structure. However, there are a bewildering number of properties that control style. If you’d like to go further with how to style web pages, the recommended text Learn to Code HTML & CSS will be helpful.
A great way to learn to write web pages is to view the source of a favorite webpage. On Chrome, you can go to the View: Developer: View Source menu item to see the HTML code for a page you are looking at.
Some web pages are crafted by hand. Some are generated automatically by a machine. Some are simple. Some are complicated. So if the HTML you find is poorly formatted, or beyond what you can understand, look for another web page. You are welcome to look at the code for this page now. We have nothing to hide, but since these pages are partially formatted by automatic translation from yet another language (markdown), we do not hold them up as an example of pretty HTML code.