Now it's time to add some layout to the web page. Since HTML5 is the content, JavaScript is the behavior, we need to work with CSS to make the web page more appealing. In CSS it is possible to write comments to make the work with the CSS code easier. A CSS comment starts with /* and ends with */.
First we need to add two lines of HTML code in the head element. The first is letting the web browser know that we use a CSS file, a style sheet for the web page. We do that by adding <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> to the head element. You can use any file name for your CSS file, and you might save it in another folder, you just need to use the right path in the head element.
Second I want to use a special font for the clock and the rest of the text that we will add to the web page later on. I have selected a Google font that I think looks neat. In the head element in the HTML code we need to tell the web browser to show the font by adding this line: <link href='http://fonts..
googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
At the moment we do not have that many elements on the web page. We got a body, and we are going to add some general layout for the body, we have one paragraph that shows the clock, and we are going to add some general layout for paragraphs, and finally we want the clock paragraph to have larger letters compared to the other paragraphs that we will add later on.
In CSS the element is first given, e.g. body, and then follows the CSS code written within {}. A specific CSS code for an id is started with #nameOfId, while a code for a class is started with .nameOfClass. We want the content of the body element to be centered on the screen why we specify the margin to the left to 20%, and the width to be 60%. This will center and adjust the size of the content of the web page accordingly to the size of the screen. Finally we do not want the background color to change in visible steps why we add a fade, or transition, of 0.8 seconds to make the color change smoothly.
The paragraphs used on the web page should use the font we selected. This is made with font-family. The text should be centered within the paragraph, which is done using text-align. Then font-size sets the size of the text, and vw is the text size relative to the viewport, i.e. the size of the web browser window. This means that when the web browser window changes size, the size of the text will change accordingly. How thick or thin the characters in the text should be displayed is set by font-weight. Font-weight can for example be set to "normal" or "bold", but might also be set to a number between 100 and 900, where 400 is normal and 700 is bold. The color of the text is set with color, and might be specified with any of the HTML5/CSS3 defined color names or by a hexadecimal value.
Margin is the distance to another element on the outside of the element. If we want to use the same margin around an element we only need to specify one margin, but if we want to use different margins we might specify that as margin: top right bottom left;. Padding then is the margin inside of an element, and is specified in the same way as margin. If a border is wanted the border style, thickness, and color might be specified using border. By default the border has 90 degree corners, but to make things a bit more relaxed we want to use round borders. This is accomplished using border-radius, and the amount of rounding. As with margin and padding each corner might be specified individually. We also want to add a shadow around the clock, and we do that with box-shadow. The shadow is specified by the amount of horizontal shadow, the amount of vertical shadow, the blur distance, the size or spread of the shadow, as well as the color of the shadow. For the clock we will use 0px (pixels) for horizontal as well as for vertical shadows, then 12px blur and 6px in spread. The color of the shadow is given by the RGB value for black(0,0,0) with the alpha (transparency) specified as 0.4.
We want the paragraphs used to be slightly transparent so the background color will to some degree shine through the white background. In the best of worlds this would be achieved by using opacity and specifying the value to 0.75 (that is 25% transparency). However this doesn't work in all web browsers, why a lot of additional CSS code is needed.
Finally we want the paragraph with the id "clock" to be bigger than the rest of the text (that will be added later on).
From now on, the CSS code will not be shown in full. It is however easy to get access to the CSS source code in a web page by clicking on the appropriate CSS link in the HTML source code.
With some CSS code the web page is starting to look more interesting.
Even if the clock looks somewhat better now, there is still not much of a color clock. In step 4 we will work with the JavaScript to change the background color according to the time.