Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 6
Published on November 23, 2021 at 7:01 am by LEWIntroduction
It is time to jump into the CSS part of this project. In the last post we created the basic HTML structure, now we need to style it with CSS. This is going to be somewhat long, so I am going to cover it in two posts.
As we walk though our HTML code, we will create the various CSS styles that will modify how they are displayed on the web page. So make sure you have reviewed the HTML code from the last post.
Adding CSS Styles
To style our HTML, we need to link our CSS style sheet. Assuming we name our CSS file “default.css”, and it is in the same directory as our HTML file, then in the header of our HTML file we need to add the following text.
<link rel=”stylesheet” href=”default.css”>
If the file is named differently or located someplace else, you will need to change the “href” variable to reflect the path and name of your file.
I should also note that you can create an internal style sheet by using the <style></style> tags in the header. So we could technically add everything we are about to do directly to the header. Below is an example of this.
<style>
p {
color:blue;
text-align:center;
}
</style>
A final option is inline styles. This is adding the style elements directly to our HTML tags. Below is an example of this.
<p style=”color:blue;text-align:center;”>
This is centered blue text
</p>
Commenting CSS Code
The first thing I like to do is add some comments to my CSS file. In CSS anything between the “/*” and “*/” tags are comments. The following is an example of information you might want to put at the top of your CSS file.
/**********************************
* Title: Your Title *
* Author: Your Name *
* Version: 0.0.0 *
* Date: Today’s Date *
* Purpose: Some notes here *
**********************************/
Body Level Styling
Our first task is to minimize differences between browsers. To do this we need to style the body tag. For this project I found it sufficient to only reset a few styles in the body tag. The below is what I used for this project.
body {
background-color: #000;
margin: 0;
padding: 0;
}
A note on CSS color. In some cases you may see six hexadecimal numbers or even a color name. I am using the three hexadecimal notation, though not as common as six, is still it is still legitimate.
Top Level Container
A further step to minimize browser differences is to add a class to our top level container, “displaybox” in our example. We want to use flex to make positioning the analog and digital containers easier. Any content to big for the div we want to hide with overflow. And we want a small bit of space so content is not up against the edge of the window, so we give it a margin. Note the in line comment.
.displaybox { /* top level div */
display: flex;
overflow: hidden;
padding: 1em
}
A note about the em unit of measure, it is the font size of the container which is inherited from the document in this case.
Digital Clock Box
Lets tackle the digital clock first, as that is fairly straight forward.
.digitalclock { /* Top digital clock div */
margin: auto;
}
#digitaltime { /* Digital clock time div */
position: relative;
font-size: 3rem;
color: #f80;
}
#digitaldate { /* Digital clock date div */
position: relative;
font-size: 3rem;
color: #8f0;
}
At the top level we use auto for the margin. This basically centers everything in the container. The time and date containers use position relative. We are not actually setting a relative position, but this keeps them stacked, even when the window is quite large. We could use em for the font size. Using rem forces reference to the html element. Since there are no changes in font size, they are the same at this point. Color is for the text color.
Conclusion
We have covered basic ways of inserting CSS into your web page, along with the digital clock part of our project. Next post we will go over the analog clock part of our CSS.
Analog/Digital Clock – JavaScript – Part 1
Analog/Digital Clock – JavaScript – Part 2
Analog/Digital Clock – JavaScript – Part 3
Analog/Digital Clock – JavaScript – Part 4
Analog/Digital Clock – JavaScript – Part 5
Analog/Digital Clock – JavaScript – Part 6
Add New Comment