Christmas won't be here for another couple weeks, but this tutorial is a four-parter. Not only are we going to be using HTML, CSS and (very minimal) JavaScript, we will be using LESS.
Here's some reading about LESS. (http://lesscss.org/)
We're using LESS for this case because it's more maintainable. You'll see what I mean in due course. For this, you'll also need a pre-processor to convert the LESS file into CSS. Me, I'm just running it through my Apache server. There are other, perfectly valid alternatives, so feel free to use them.
What are we making?
It's a Christmas webpage that will change in appearance and layout depending on the option you select. We will be making three different themes - Red, Green and Blue, in keeping with the RGB color system.Setup
First, let's get your setup right. This is how it should look like, with a HTML file, index.html in the main directory and thee sub-directories: img, css and js.
In the css directory, create a file named styles.less.
In the img directory, I've placed a few images. You can pick them up here.
In the js directory, you need the less.min.js file. This one may be picked up here.
Today, you will be working only with index.html and styles.less.
Getting started
Here's some HTML. Here, we have a link to the stylesheet styes.less and the JavaScript file, less.min.js.index.html
<!DOCTYPE html>
<html>
<head>
<title>Xmas 2017</title>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script src="js/less.min.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>Xmas 2017</title>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script src="js/less.min.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
Since we're going to be dealing with three different themes, we need to ensure that the HTML and body are prepped. This won't have any visible effect on the page, not yet at least. But we'll set the padding and margin properties to zero so that they'll work better across browsers. The HTML and body's height are set to 100% of the screen height, and we set a default font size of 14 pixels.
styles.less
html, body
{
height:100%;
padding:0px;
margin:0px;
font-size:14px;
}
{
height:100%;
padding:0px;
margin:0px;
font-size:14px;
}
Now, we'll need to hit the ground running, fast. This page will be subject to many on-the-fly CSS changes, so it's important that we structure it well. Make it robust. That may mean a lot of inner and outer divs. In fact, we'll start with one big outer div with a class of container. Within are three other divs, one for your header, one for your body and one for our footer. They're all styled using appropriate CSS class names, and we will add those classes later.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Xmas 2017</title>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script src="js/less.min.js"></script>
<script>
</script>
</head>
<body>
<div class="container">
<div class="header_wrapper">
</div>
<div class="body_wrapper">
</div>
<div class="footer_wrapper">
</div>
</div>
</body>
</html>
<html>
<head>
<title>Xmas 2017</title>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script src="js/less.min.js"></script>
<script>
</script>
</head>
<body>
<div class="container">
<div class="header_wrapper">
</div>
<div class="body_wrapper">
</div>
<div class="footer_wrapper">
</div>
</div>
</body>
</html>
Within each of these, we'll have another div with a class of content_wrapper.
index.html
<!DOCTYPE html>
<html>
<div class="container">
<div class="header_wrapper">
<div class="content_wrapper">
</div>
</div>
<div class="body_wrapper">
<div class="content_wrapper">
</div>
</div>
<div class="footer_wrapper">
<div class="content_wrapper">
</div>
</div>
</div>
<html>
<div class="container">
<div class="header_wrapper">
<div class="content_wrapper">
</div>
</div>
<div class="body_wrapper">
<div class="content_wrapper">
</div>
</div>
<div class="footer_wrapper">
<div class="content_wrapper">
</div>
</div>
</div>
Now let's put some content in there. There will be more divs, each with an appropriately named CSS class.
index.html
<!DOCTYPE html>
<html>
<div class="container">
<div class="header_wrapper">
<div class="content_wrapper">
<div class="header">
MERRY CHRISTMAS!
</div>
</div>
</div>
<div class="body_wrapper">
<div class="content_wrapper">
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
</div>
</div>
<div class="footer_wrapper">
<div class="content_wrapper">
<div class="footer">
This site was produced by <i>TeochewThunder</i> © 2017. All rights reserved.
</div>
</div>
</div>
</div>
<html>
<div class="container">
<div class="header_wrapper">
<div class="content_wrapper">
<div class="header">
MERRY CHRISTMAS!
</div>
</div>
</div>
<div class="body_wrapper">
<div class="content_wrapper">
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
</div>
</div>
<div class="footer_wrapper">
<div class="content_wrapper">
<div class="footer">
This site was produced by <i>TeochewThunder</i> © 2017. All rights reserved.
</div>
</div>
</div>
</div>
That's what we have at the moment.
Now, let's put some content in the body. A random Christmas carol in the first div and some Lorem Ipsum text in the second. Leave the third one blank.
index.html
<div class="body_wrapper">
<div class="content_wrapper">
<div class="content1">
<p>
O come, all ye faithful,<br />
Joyful and triumphant,<br />
O come ye, O come ye to Bethlehem.<br />
Come and behold Him,<br />
Born the King of Angels!<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
<p>
Sing, alleluia,<br />
All ye choirs of angels;<br />
O sing, all ye blissful ones of heav'n above.<br />
Glory to God<br />
In the highest glory!<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
<p>
Yea, Lord, we greet Thee,<br />
Born this happy morning;<br />
Jesus, to Thee be the glory giv'n;<br />
Word of the Father,<br />
Now in the flesh appearing,<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
</div>
<div class="content2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor nec lectus ac eleifend. Pellentesque egestas et eros sit amet porttitor. Cras finibus tristique justo, quis fringilla mauris pulvinar sit amet. Aliquam semper, leo ut ullamcorper porta, sem arcu auctor nulla, sed elementum ex massa vitae sapien. Aliquam sit amet vestibulum orci, ut convallis ante. In hac habitasse platea dictumst. Quisque lacinia gravida velit et tempus. Vestibulum et mi quis tortor ornare blandit vitae id tortor.
</div>
<div class="content3">
</div>
</div>
</div>
<div class="content_wrapper">
<div class="content1">
<p>
O come, all ye faithful,<br />
Joyful and triumphant,<br />
O come ye, O come ye to Bethlehem.<br />
Come and behold Him,<br />
Born the King of Angels!<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
<p>
Sing, alleluia,<br />
All ye choirs of angels;<br />
O sing, all ye blissful ones of heav'n above.<br />
Glory to God<br />
In the highest glory!<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
<p>
Yea, Lord, we greet Thee,<br />
Born this happy morning;<br />
Jesus, to Thee be the glory giv'n;<br />
Word of the Father,<br />
Now in the flesh appearing,<br /><br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
O come, let us adore Him,<br />
Christ the Lord.
</p>
</div>
<div class="content2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor nec lectus ac eleifend. Pellentesque egestas et eros sit amet porttitor. Cras finibus tristique justo, quis fringilla mauris pulvinar sit amet. Aliquam semper, leo ut ullamcorper porta, sem arcu auctor nulla, sed elementum ex massa vitae sapien. Aliquam sit amet vestibulum orci, ut convallis ante. In hac habitasse platea dictumst. Quisque lacinia gravida velit et tempus. Vestibulum et mi quis tortor ornare blandit vitae id tortor.
</div>
<div class="content3">
</div>
</div>
</div>
Yep, getting there.
For the footer, let's create a drop-down list which we'll use to select the theme.
index.html
<div class="footer_wrapper">
<div class="content_wrapper">
<div class="footer">
This site was produced by <i>TeochewThunder</i> © 2017. All rights reserved.
<br />
Select Theme:
<select>
<option value="theme_red" selected>Red</option>
<option value="theme_green" >Green</option>
<option value="theme_blue">Blue</option>
</select>
</div>
</div>
</div>
<div class="content_wrapper">
<div class="footer">
This site was produced by <i>TeochewThunder</i> © 2017. All rights reserved.
<br />
Select Theme:
<select>
<option value="theme_red" selected>Red</option>
<option value="theme_green" >Green</option>
<option value="theme_blue">Blue</option>
</select>
</div>
</div>
</div>
Got all that?
This first part is a little short. But we're getting somewhere soon, promise!
Just one last thing...
Make this change to the HTML.index.html
<select onchange="change_css(this.value);">
<option value="theme_red" selected>Red</option>
<option value="theme_green" >Green</option>
<option value="theme_blue">Blue</option>
</select>
<option value="theme_red" selected>Red</option>
<option value="theme_green" >Green</option>
<option value="theme_blue">Blue</option>
</select>
And then create the change_css() function in your JavaScript. In this case, we pass in the selected value of the drop-down list as an argument. The parameter is newcss. We grab the body tag using the getElementsByTagName() method. This returns an array of all elements that are named "body". There's of course, only one body tag, so just reference the first element and set the CSS class to newcss. This causes the body to be styled differently every time you select a different value from the drop-down list!
index.html
<script>
function change_css(newcss)
{
var body = document.getElementsByTagName("body");
body[0].className = newcss;
}
</script>
function change_css(newcss)
{
var body = document.getElementsByTagName("body");
body[0].className = newcss;
}
</script>
However, since we haven't written any of the CSS classes, you will see no visible change right now...
