Web Programming - Short Introduction

Adding Style

Remember that the browser reads the HTML code sequentially and renders the content accordingly. This means, if you load the page in the browser as it is now, the existing content will simply render one after (and in this case: below) the other as it is in the HTML file. We will now take control of how elements are rendered in the page, and what their behaviour and look should be, by specifying a set of styles via CSS selectors. CSS selectors are pieces of code that specify the presentation of specific elements of a page.

By default browsers apply pre-defined style definitions to most HTML elements, and that holds true for the elements in our page. If you open the contents in your browser you can clearly see the distinction between the different levels of headings, and also the standard presentation of the unordered list, etc. All of which is part of the set of default browser styles, which by the way vary from vendor to vendor (Firefox follows a different approach than Chrome or Edge). Naturally, we want to have control on the presentation of the elements of the page. So let's configure our page so that we can start applying own own styles. Proceed to modify the simple-website/index.html file as shown in Listing 1.

The link elements are used to upload the content of additional files when the page is rendered. Having separate files with specific purposes makes it easy to maintain the site and also reduces code duplication. You can load any file from your own server or from any remote location on the Web. Here we are loading two files: In line 9 we load two of the public font types available in the Google Repository (Open Sans & Baumann).

In line 10 we include the CSS file that will contain our own style specifications. To create this style definition file, first create a new folder called styles inside the simple-website folder. Then, inside this new folder, create a new file and name it main.css. We will for now leave this file empty. We just need the file to exist so that the browser does not report an error. The relative URL of this style file should be simple-website/styles/main.css

We can now proceed to format the content of the page and we will start with the so-called global rules. These are basically style rules that affect all elements in the page. So every paragraph tag or every link tag in the page receives the same treatment. Later on you can use the cascading principle of the CSS code to alter only certain instances of a tag. That is, for example, certain paragraph element inside a specific section or article element. Update the simple-website/styles/main.css file with the content in Listing 2.

One important fundamental element of CSS is the so-called selector. In this code snippet we have used the element selector of CSS: The standard HTML tagname is used to select elements to be styled,e.g. div, p, a. So for example in lines 18 21 we state that all paragraph elements on the page should have a specific margin and line separation. In lines 11 16 we specify the style for the body element. This includes the font family 12, the background color 14, and the text color 15. In line 13, we create a 5 pixels stripe at the top of the page as a style feature to separate the page from the browser menus, favourites list, etc. Try reloading the page to see the results, you will notice a purple the stripe at the top, you will also see that the font has changed, and that the links have blended in, they are no longer differentiable from other text. Study all the declarations to familiarize yourself with the style commands used. The purpose of this exercise is not to master CSS in great detail, but to guide you through its use. This means that we will not go into details on the various style declarations. You should use the reading materials and web references to get more insight into CSS.

We have already discussed the use of element selector, and in the lectures we have presented other selector options. If you check line 29, you will notice that the selector includes an element and also a property of the element, also known as a pseudo-class selector (a:hover). The pseudo-class selector specifies that the style should only be applied when the property defined by the pseudo-class is true. In this case it means that if the mouse hovers over an a element, automatically the browser will alter the text color of the element, from the default #333333 (as set in line 15), to #9164d6. The color will return to normal when the mouse no longer hovers over the element. There a many other selectors. Later on in the exercise we will use some of them, but there are many more. For an overview of the possibilities visit: CSS Selector Reference

The Header and the navigation menu

With the global styles in place we can now start to work on the individual sections of the page starting with the Header section. Insert the code below at the end of the simple-website/styles/main.css file.

Now we have added some new rules to target HTML elements belonging only to the Header section. This requires the use of a different selector technique, which is the class selector. If you check you HTML code, you will notice that the div element that the header is in has been assigned two classes container and header. Now in the style declaration we can use those two classes to target that container element for a set of styles, lines 4-12 in Listing 3. The CSS class selector uses a dot as a prefix to denote that it uses the class selector .container. The specific style rules applied to the selected container, target its background color and size. In lines 21 and 28 we used the so-called descendent selector to target paragraph and title elements that are parts of the header section. Reload the page to see the effect of the styles. The position and font size of the title should have changed and they are now render according to our design wishes or criteria.

The next component of the Header section that needs attention is the navigation menu. To apply style to the menu elements update the simple-website/styles/main.css file as follows:

Notice that all of the style declaration have the nav element type as the main selector. This guarantees that only elements inside the navigation container are affected by these style rules. In lines 1-5 we position the navigation container at the bottom-right of the header container. In lines 7-9, we remove the default bullets from the list elements. In lines 11-15, we position the menu items on the left in the navigation container, and also specify the separation between each item. In lines 17-20, we transform the text of the menu items to upper-case, and in lines 22-28, we specify the color of the menu-item that is currently active. Reload the page to see now that the menu is in place. Your page should render similarly to the image in Figure 1.

Below the Header section we insert a container to display messages and to separate the menus and title from the content of the page. Insert the code below into the simple-website/styles/main.css file to specify the styling of the Spacer container.

Here we use yet another CSS selector mechanism, the id selector. This selector mechanism is the most specific of all, as an HTML element id should be a unique id. Check the HTML code to see that we have assigned the id="spacer" to a section element. In our CSS file we use that id to specify the styles of that element. The CSS id selector uses a hash as a prefix to denote that it is an id selector (#spacer). In lines 4-11, we define the size, color and position of the container, and in lines 13-19, we specify margins and position of the paragraph element inside the spacer container. Reload the page to check the formatting of the Spacer. According to our design the Header and the Spacer elements will be rendered in all pages, that means that the HTML code of these two elements has to be included in all pages.