HTML and CSS Made Easy - Part Two
Introduction
In the part one of this tutorial, the focus was primarily on HTML (Hypertext Markup Language) to simplify the learning process, because HTML is like the cake while CSS (Cascading Style Sheets) is the icing on it. Obviously, you need to make the cake first before icing it. Now that you have basic understanding of HTML, it will be a lot easier for you to comprehend CSS. Hence, in this part, you’ll be introduced to CSS and spend a large part of the time discussing it. CSS is used along side HTML attributes to style web pages. It determines how HTML elements are displayed on the web page. We will start with learning CSS principles and later apply CSS to style the Poster Designs project we started in part one and also style two of the projects we had in JavaScript Made Easy - Part One. You do not need knowledge of JavaScript to understand and style the JavaScript projects. However, if you will like to learn JavaScript just click on JavaScript Made Easy - Part One to take the tutorial.
If you are new to HTML, click HTML and CSS Made Easy Part One to take part one of this tutorial before you proceed from here.
Integrated Development Environment (IDE)
In part one, we used VS Code but in this tutorial, we are going to be using Scrimba IDE for over 95% of code demonstrations because it is an easy to use web based option and does not require any download or even sign up and or login. Just open and start coding, it’s as simple as that! The only place where we used VS code is the Poster Designs project towards the end of this tutorial. That being said, you can still use any IDE of your choice for this tutorial, if you’re not new to coding. However, for ease of following along, we advise that you use the Scrimba IDE which we are using to teach this tutorial, especially if you’re new to programming.
HTML Attribute
HTML attributes are characteristics which are used to manipulate the behaviour or display of an HTML element. Attributes are specified in the opening tag of the HTML element in question. Attributes come in name-value pairs as shown below. Note that you can wrap the attribute value in either double or single quotes:
attribute name="attribute value"CSS uses the attribute values to select and control or manipulate the appearance of the relevant HTML element on a web page.
Storing Your CSS Code
There are three options available for storing and applying CSS code. These options are: in-line, internal and external. In both the in-line and internal, CSS are written within the HTML document. However, inline and internal methods are not the best approach especially for a medium to large size project.
In situations where inline and internal approaches are inappropriate, CSS should be stored in an external file with .css name extension. While there are some situations where inline and or internal approaches might be the best option, most often than not, external CSS presents a better and more organised approach. For example, it makes it possible to use one CSS file on multiple pages. Beside, it makes code maintenance and corrections a lot easier. For instance, you can change the look and feel of an entire website by updating just one file.
Now, let us discuss and practice each of the approaches in more detail.
Inline CSS
In-line CSS is best suited where you need to apply a unique style for a single element. To apply inline CSS, all you need to do is add the style attribute to the opening tag of the relevant element. The style attribute can accommodate any CSS property. The general syntax looks like this:
<htmltag style=“property1:value1; property2:value2; propertyX:valueX”></htmltag>For better understanding, let us go to our IDE and write some real code. Open Scrimba IDE, delete the code on the default HTML file and type the code below and click on Run button:
<body>
<p>This is a paragraph without CSS</p> <!--plain paragraph element withouth CSS -->
</body>The code above is a plain HTML paragraph element without CSS, when you run it on the IDE, it is just a plain text. Now, let us add some CSS properties to a copy of the paragraph as shown below to give it a little bit of style and run it again and see the difference:
<body>
<p>This is a paragraph without CSS</p>
<p style='background-color: orange; color: white;' >This is a paragraph <span style='font-weight: bold; color: black'>with</span> CSS</p>
</body>CSS Properties
Most CSS properties are self explanatory, hence, we are not going to spend time explaining them. However, in this section, we are going to explain some of the properties whose styling effect might not be too obvious from their name.
paddingis used to create space within the element. If you setpaddingwithout specifying a position, CSS automatically applies the assigned pixel value to all the positions. Padding can be any of the following:padding(in which case the value you assign will apply to left, right, top and bottom of the element),padding-left,padding-right,padding-toporpadding-bottom. Try the code below on your IDE:
<body>
<button style='padding: 30px'>Padding without Position</button>
<button style='padding-left: 30px; padding-right: 15px; padding-top: 30px; padding-bottom: 15px'>Padding with Position</button>
</body>
marginis used to create space on the external surroundings of an element. Like padding, if you use margin without specifying the position, CSS automatically applies the assigned pixel value to all the positions. Also, margin can bemargin(in which case the value you assign will apply to left, right, top and bottom of the element),margin-left,margin-right,margin-top,margin-bottom. Try the code below on your IDE:
<body>
<button>Button1</button>
<button style='margin-left: 0px; margin-right: 30px; margin-top: 15px'>Margin 1</button> <!-- margins with position values assigned -->
<button>Button2</button>
<button style='margin: 15px' >Margin 2</button> <!-- the margin without specifying the position applies 15px to the left, rigth, top and bottom of Margin 2 -->
<button>Button3</button>
</body>
border-styleis used to set the type of border you want, border-style can have any of the following values: dotted, dashed, solid, double, none, hidden etc. Practice with the example below:
<body>
<button style='background-color: white; border-color: green; border-style: solid' >Solid Border Style</button>
<button style='background-color: white; border-color: red; border-style: dotted' >Dotted Border Style</button>
<button style='background-color: white; border-color: blue; border-style: double' >Double Border Style</button>
</body>Note: If you remove border-style and its value from any of the buttons in the code above, the border color of the button will no longer be uniform. Try this with the code below to see the effect of deleting border-style and its value. If you encounter this anomaly in future, all you need is to bring in border style and everything will be fine:
<body>
<button style='background-color: white; border-color: green' >Border Style</button>
</body>
cursoris used to set the appearance of the mouse pointer when it is hovered on top of an element. It should be set such that it gives the user an idea of operations that can be performed at the current location of the mouse pointer. Practice with some examples below:
<body>
<button style='cursor: pointer' >Pointer Button</button>
<P style='cursor: help' >Help Please</p>
<p style='cursor: wait' >Please Wait</p>
<button style='cursor: not-allowed' >Stop!</button>
<h3 style='cursor: col-resize' >Resize Column</h3>
<p style='cursor: zoom-in' >Zoom-in</p>
<p style='cursor: zoom-out' >Zoom-Out</p>
</body>
border-radiusis used change the edges of the border of an HTML element. E.g to change the edges of a button element to curve or semi-circle. Depending on the button’sheightproperty, the more the pixel (px) value assigned to border-radius, the more rounded the button becomes. If you want both ends of a button to be a semi-circle, just set theborder-radiusto50px. Practice with the examples below:
<body>
<button>No Border-radius</button>
<button style='border-radius: 8px'>Border-radius only</button>
<button style='border-radius: 5px; height: 75px' >5px Border-radius</button>
<button style='border-radius: 10px; height: 75px' >10px Border-radius</button>
<button style='border-radius: 15px; height: 75px' >15px Border-radius</button>
<button style='border-radius: 25px; height: 75px' >25px Border-radius</button>
<button style='border-radius: 50px; height: 75px' >50px Border-radius</button>
<button style='border-radius: 25px; height: 50px' >25px Border-radius Reduced Height</button>
</body>CSS
displayproperty is used to set how an element is displayed on the web page. Every HTML elements have a defaultdisplayvalue of eitherblockorinline. Block elements have defaultdisplayvalue ofblock, occupies the full available width and start on a new line irrespective of their size. Examples of block elements are: <div>, <h1-6>, <p>, <form>, <header>, <footer> and <section>.On the other hand, inline elements have default
displayvalue ofinline, only take up as much width as it needs and does not start on a new line. Examples on inline elements include: <span>, <a>, <button> and <img>.We can set the display property value of a block element to inline and vice versa, this is demonstrated in the code below, where paragraph element (a block element) was changed to inline and button (an inline element) was changed to block. Practice the codes below in your IDE for better understanding of display property:
<head>
<style>
h4, p { /* the background-color is introduced to let you see that a block elements occupy the whole width */
background-color: blue;
color: white;
}
.block-to-inline {
/*to make any block element with class attribute value of block-to-inline to display inline. Paragraphs which by default are block element were made to display inline with the code below */
display: inline;
}
.inline-to-block {
/*to make any inline element with class attribute value of inline-to-block to display block. Buttons which by default are inline element were made to display block with the code below */
display: block;
}
</style>
</head>
<body>
<h4>Here is a block element </h4>
<p> Another block element</p>
<p class="block-to-inline">A block element converted to inline</p>
<p class="block-to-inline">Another block element converted to inline</p>
<button> Button is inline</button>
<button> Another button </button>
<button class="inline-to-block">Inline to block</button>
<button class="inline-to-block">Another inline to block</button>
</body>Setting the display property to none will hide the element. This can be used with JavaScript to hide and show the element.
<head>
<style>
h2 {/*this code will hide any h2 element on this web page */
display: none;
}
</style>
</head>
<body>
<h4>Hello world</h4>
<h2>Display: none;</h2>
<p>This is a paragraph element</p>
</body>Note: You don’t need to memorise CSS properties and their values, they will become part of you as you use them while practicing and in your projects. If you don’t know the CSS property to achieve an outcome, just google for what you want to do and you see plenty of solutions waiting for you.
HTML <div> Element
A <div> element consists of an opening <div> tag plus one or more other HTML element(s) which might be another <div> element(s) and a closing </div> tag. The opening and closing <div> tags are used to mark out the boundary or limit of a division or section in an HTML document. They are used as a container for HTML elements enclosed inside them and thereby make it possible to apply common CSS styling or even JavaScript manipulation to HTML elements within them. Browsers usually insert a line brake before and after <div> element by default. The next two code blocks below are designed to make it easy for you to visualise <div>s as containers and when they are nested. Try them on you IDE:
Code block 1
<body>
<div style="width: 500px; height: 350px; background-color: red; margin: auto; padding: 50px">
<div style="width: 400px; height: 250px; background-color: green; margin: auto; padding: 25px">
<div style="width: 300px; height: 200px; background-color: blue; margin: auto; padding: 25px">
<div style="width: 200px; height: 150px; background-color: black; margin: auto; padding: 25px">
</div>
</div>
</div>
</div>
</body>Code block 2
<body>
<div style="border-style: solid; border-color: red">
<p>The red div (container)</p>
<div style="border-style: solid; border-color: green">
<p>The green div (container)</p>
<div style="border-style: solid; border-color: blue">
<p>The blue div (container)</p>
<div style="border-style: solid; border-color: black">
<p>The black div (container)</p>
</div>
</div>
</div>
</div>
</body>See more examples on <div> below:
<body>
<p>First sentence NOT inside div </p>
<p>Second sentence NOT inside div </p>
<button>NOT inside div </button>
<div style="background-color: gray">
<p>First sentence inside div </p>
<p>Second sentence inside div </p>
<button>Inside div</button>
</div>
<div style="background-color: pink">
<p>Another sentence inside another div </p>
<p>Another sentence inside another div </p>
<button>Another button Inside another div</button>
</div>
</body>If you want the two <div> elements (or call them two sections on the web page) to be side by side, wrap the two of them in another pair of <div> tags (that is nested <div>), and set the CSS display property of the external <div> to flex as shown below. Practice this on your IDE to see the outcome:
<body>
<p>First sentence NOT inside div </p>
<p>Second sentence NOT inside div </p>
<button>NOT inside div </button>
<div style="display: flex">
<div style="background-color: gray; margin: 5px; padding: 8px">
<p>First sentence inside div </p>
<p>Second sentence inside div </p>
<button>Inside div</button>
</div>
<div style="background-color: pink; margin: 5px; padding: 8px">
<p>Another sentence inside another div </p>
<p>Another sentence inside another div </p>
<button>Another button Inside another div</button>
</div>
</div>
</body>Now, let us put all we have been discussing together to replicate some nice looking sample buttons shown in fig 1 below for your client to choose from:
Fig 1:
We shall take the solution step by step to simplify the tasks and make it easy for you to understand:
Step 1: Use HTML to design the content. Practice this step with sample code below. We wrapped the entire project in a main div and in addition, some sections and or components were wrapped in divs, some of them nested; this is necessary to enable us apply common CSS properties to all the elements wrapped within a particular div :
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class=btn-container>
<div>
<h3>Sample 1</h3>
<div>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div>
<h3>Sample 2</h3>
<div>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div>
<h3>Sample 3</h3>
<div>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
</div>
</body>Step 2: If you run the code above, the sections were arranged vertically on top of each other, but in the sample we are working to replicate, the sections were arranged horizontally side by side. To achieve this arrangement, we need to set the
displayproperty of the btn-container div element toflex. In addition, the display property of div elements wrapping the buttons in each of the sections is set to flex to ensure that they are side by side irrespective of the browser size:
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class=btn-container style='display: flex'>
<div>
<h3>Sample 1</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div>
<h3>Sample 2</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div>
<h3>Sample 3</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
</div>
</body>Step 3: Let us add the border line to each of the sections by applying CSS properties to divs wrapping the sections:
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class=btn-container style='display: flex'>
<div style='border-style: solid; border-color: green; border-width: 1.5px; padding: 10px; margin: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 1</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: tomato; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 2</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: blue; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 50px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 3</h3>
<div style='display: flex'>
<button>Sign-up</button>
<button>Login</button>
<button>Log out</button>
</div>
</div>
</div>
</body>Step 4: Let us style the buttons by applying CSS properties and values that will produce our desired the look and feel:
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class=btn-container style='display: flex'>
<div style='border-style: solid; border-color: green; border-width: 1.5px; padding: 10px; margin: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 1</h3>
<div style='display: flex'>
<button style='background-color: green; color: white; border: none; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: green; border-color: green; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: green; color: white; border: none; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px;margin: 5px; cursor: pointer' >Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: tomato; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 2</h3>
<div style='display: flex'>
<button style='background-color: tomato; color: white; border: none; border-radius: 5px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: tomato; border-color: tomato; border-radius: 5px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: tomato; color: white; border: none; border-radius: 5px; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px;margin: 5px; cursor: pointer' >Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: blue; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 50px'> <!-- border-width added to control the thickness of the boder -->
<h3>Sample 3</h3>
<div style='display: flex'>
<button style='background-color: blue; color: white; border: none; border-radius: 50px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: blue; border-color: blue; border-radius: 50px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; margin: 5px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: blue; color: white; border: none; border-radius: 50px; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px; cursor: pointer' >Log out</button>
</div>
</div>
</div>
</body>Step 5: Finally, let us style the h2 and h3 elements to arrive at the final copy:
<body>
<div>
<h2 style='color: grey'>Buttons Samples</h2>
</div>
<div class='btn-container' style='display: flex'>
<div style='border-style: solid; border-color: green; border-width: 1.5px; padding: 10px; margin: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3 style='color: green; font-size: 20px'>Sample 1</h3>
<div style='display: flex'>
<button style='background-color: green; color: white; border: none; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: green; border-color: green; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: green; color: white; border: none; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px;margin: 5px; cursor: pointer'>Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: tomato; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 5px'> <!-- border-width added to control the thickness of the boder -->
<h3 style='color: tomato; font-size: 20px'>Sample 2</h3>
<div style='display: flex'>
<button style='background-color: tomato; color: white; border: none; border-radius: 5px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: tomato; border-color: tomato; border-radius: 5px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: tomato; color: white; border: none; border-radius: 5px; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px;margin: 5px; cursor: pointer'>Log out</button>
</div>
</div>
<div style='border-style: solid; border-color: blue; border-width: 1.5px; padding: 10px; margin: 5px; border-radius: 50px'> <!-- border-width added to control the thickness of the boder -->
<h3 style='color: blue; font-size: 20px'>Sample 3</h3>
<div style='display: flex'>
<button style='background-color: blue; color: white; border: none; border-radius: 50px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px'>Sign-up</button>
<button style='background-color: white; color: blue; border-color: blue; border-radius: 50px; padding: 5px; font-weight: bold; font-size: 14px; height: 38px;width: 75px; margin: 5px; border-style: solid; margin: 5px'>Login</button>
<button style='background-color: blue; color: white; border: none; border-radius: 50px; padding: 10px; font-weight: bold; font-size: 14px; height: 38px; width: 75px; margin: 5px; cursor: pointer'>Log out</button>
</div>
</div>
</div>
</body>If you adopted all the CSS properties and values we used in code above, you should have exactly the same image as the sample provided in fig 1 at the beginning of this exercise.
Comments in CSS
Before we move further, let us discuss comments in CSS. A comment is a single or multiple none-executable statements which give more information about the code. Comment can also be used to disable a line or multiple lines of code to make browser ignore them. In CSS, comments are made by starting the statement; either single line or multiple lines with “/*” and ending it with “*/”. Practice with the example below:
<head>
<style>
p { /* if you don't want the background color to show on the web page and you don't want to delete the line of code, all you need to do is to wrap the line of code inside /* */ /*as shown below: */
/*background-color: blueviolet;*/
color: black; /* To set paragraph text color to red*/
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>Internal CSS
So far, we have been using inline approach to write and store our CSS. This is not the best approach as it makes the HTML document cluttered and untidy. This in turn makes reading and maintaining our code difficult. We can avoid cluttering our HTML codes and make it a lot easier to read and maintain by adopting Internal CSS approach for writing and storing our CSS code. To achieve this, we are going to introduce style element into the head section of our HTML document. All our CSS code can then be written and stored inside the style element.
Internal CSS might be more appropriate in situations where a single webpage in a multi-page website has a unique style requirement. The general syntax follows the format below:
<head>
<style>
Selector {
declaration1; declaration2; declarationX
}
</style>
</head>Selector points to the HTML element you intend to style. You can select or target an HTML element using its name, id, class or combination of two or more of name, id or class.
A declaration consists of a CSS property and its value separated by a colon and terminated with a semicolon. For example:
declaration1 = property1: value1;
Therefore, the general syntax can be broken down further as follows:
<head>
<style>
Selector1 {
property1:value1;
property2:value2;
propertyX:valueX;
}
Selector2 {
property1:value1;
property2:value2;
propertyX:valueX;
}
SelectorX{
property1:value1;
property2:value2;
propertyX:valueX;
}
</style>
</head>To make it practical and enhance your understanding, practice on your IDE with the lines of code below:
<head>
<style>
body {
background-color: rgb(245, 206, 200);
padding: 35px;
}
h1 {
color: white;
background-color: black;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<h1>HTML-CSS Made Easy- Part Two </h1>
<p>This is HTML-CSS Made Easy by <span>Tutorialsnote.</span> </p>
<p>Learning HTML-CSS is fun.</p>
</div>
</body>Here is a brief explanation of the example above:
body is a selector, it targets all the elements in the body
background-coloris a CSS property with valuergb(245, 206, 200)for the body element. rgb code is a means of setting colors using combination of red, green and blue in different proportions. The maximum value any of the colors can have is 255, while the minimum value is zero. If you set all the values to zero i.e rgb(0, 0, 0), you will have black color and if you set all the values to rgb(255, 255, 255), you will have white color. In addition, we set thepaddingfor the body element to35px.h1is the selector, it points to all the <h1> element only. In this case,colorandbackground-colorare the CSS properties we want to manipulate and they were assignedwhiteandblackvalues respectivelypis another CSS selector, it applies only to all the <p> elements on the web page. In this case, we set its CSScolorproperty tored
Now, let us apply Internal CSS approach to the button samples project we did earlier. To do this, we need to:
Step 1: assign id or class attribute to all the HTML elements that has style attribute and
Step 2: move all the CSS code into the
<style>tags in the<head>section of the HTML file.
Note this: the name of the value you assign to HTML’s class and id attributes is at your discretion. Though it is best practice to give them meaningful name.
The HTML file of the buttons samples project will look as shown below after performing steps 1 and 2 above. This way our HTML code looks more compact, easy to read and maintain and the output of the code remain as it was when the CSS were stored inline. If you take away all the explanatory comments we used to explain, it will even look more compact:
<head>
<style>
.btn-container {
display: flex;
}
h2 {
color: grey;
}
#sample1 { /* Note that id selectors are preceeded by # */
border-style: solid;
border-color: green;
border-width: 1.5px; /*border-width added to control the thickness of the boder*/
padding: 10px;
margin: 5px
}
#sample2 { /* Note that id selectors are preceeded by # */
border-style: solid;
border-color: tomato;
border-width: 1.5px; /*border-width added to control the thickness of the boder*/
padding: 10px;
margin: 5px;
border-radius: 5px
}
#sample3 { /* Note that id selectors are preceeded by # */
border-style: solid;
border-color: blue;
border-width: 1.5px; /*border-width added to control the thickness of the boder*/
padding: 10px;
margin: 5px;
border-radius: 50px
}
#h3-sample1 {
color: green; font-size: 20px
}
#h3-sample2 {
color: tomato; font-size: 20px
}
#h3-sample3 {
color: blue; font-size: 20px
}
.btns{
display: flex
}
#signup-btn1 {
background-color: green;
color: white;
border: none;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px
}
#login-btn1 {
background-color: white;
color: green;
border-color: green;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
border-style: solid;
margin: 5px
}
#logout-btn1 {
background-color: green;
color: white;
border: none;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
cursor: pointer
}
#signup-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px
}
#login-btn2 {
background-color: white;
color: tomato;
border-color: tomato;
border-radius: 5px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
border-style: solid;
margin: 5px
}
#logout-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
cursor: pointer
}
#signup-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px
}
#login-btn3 {
background-color: white;
color: blue;
border-color: blue;
border-radius: 50px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
border-style: solid;
}
#logout-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
cursor: pointer
}
</style>
</head>
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class='btn-container'> <!--Note that the name of the value you assign to class and id attributes is at your discretion. We assigned btn-container to the class attribute here, we could have called it anything e.g sugar and it will still work. Replace btn-container with sugar both here and where it appears in the <style> and everything will still work well -->
<div id='sample1'>
<h3 id='h3-sample1'>Sample 1</h3>
<div class='btns'>
<button id='signup-btn1'>Sign-up</button>
<button id='login-btn1'>Login</button>
<button id='logout-btn1'>Log out</button>
</div>
</div>
<div id='sample2'>
<h3 id='h3-sample2'>Sample 2</h3>
<div class='btns'>
<button id='signup-btn2'>Sign-up</button>
<button id='login-btn2'>Login</button>
<button id='logout-btn2'>Log out</button>
</div>
</div>
<div id='sample3'>
<h3 id='h3-sample3'>Sample 3</h3>
<div class='btns'>
<button id='signup-btn3'>Sign-up</button>
<button id='login-btn3'>Login</button>
<button id='logout-btn3'>Log out</button>
</div>
</div>
</div>
</body>The code above can be made more efficient by eliminating code repetition in the CSS code. We broke it down that way to make it simple for you to understand. For example, there are plenty of CSS code repetition in #sample1, #sample2 and #sample3. If you check further down the code, you will see plenty of repetitions in the styling for all the 9 buttons.
To make the code more efficient, we introduced common class attribute to all the HTML elements having the same CSS codes (the same styles) to modify the code. In the modified version of the code, we introduced a class with assigned value of btn-sample to all the relevant <div> elements for #samples. Also, we introduced another class with assigned value of my-buttons to all the <buttons> elements. See and practice with the modified and more compact version of the code below:
<head>
<style>
.btn-container {
/* Note that class selectors are preceded by "." */
display: flex;
}
h2 {
color: grey;
}
.btn-sample {
/* the common styles for the div wrapping each of the samples were brought together using class value btn-sample to eliminate their repeatition */
border-style: solid;
border-width: 1.5px; /*border-width added to control the thickness of the boder*/
padding: 10px;
margin: 5px;
}
#sample1 {
/* Note that id selectors are preceded by # */
border-color: green;
}
#sample2 {
border-color: tomato;
border-radius: 5px;
}
#sample3 {
border-color: blue;
border-radius: 50px;
}
#h3-sample1 {
color: green; font-size: 20px;
}
#h3-sample2 {
color: tomato; font-size: 20px;
}
#h3-sample3 {
color: blue; font-size: 20px;
}
.btns{
display: flex;
}
.my-buttons {
/* all the common styling for buttons were brought together using class value my-buttons which made it possible to reduce the number of lines of code we need to write */
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
}
#signup-btn1 {
background-color: green;
color: white;
border: none;
}
#login-btn1 {
background-color: white;
color: green;
border-color: green;
border-style: solid;
}
#logout-btn1 {
background-color: green;
color: white;
border: none;
cursor: pointer;
}
#signup-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
}
#login-btn2 {
background-color: white;
color: tomato;
border-color: tomato;
border-radius: 5px;
border-style: solid;
}
#logout-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#signup-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
}
#login-btn3 {
background-color: white;
color: blue;
border-color: blue;
border-radius: 50px;
border-style: solid;
}
#logout-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class='btn-container'>
<div id='sample1' class='btn-sample' >
<h3 id='h3-sample1'>Sample 1</h3>
<div class='btns'>
<button id='signup-btn1' class='my-buttons'>Sign-up</button>
<button id='login-btn1' class='my-buttons'>Login</button>
<button id='logout-btn1' class='my-buttons'>Log out</button>
</div>
</div>
<div id='sample2'class='btn-sample'>
<h3 id='h3-sample2' style=''>Sample 2</h3>
<div class='btns'>
<button id='signup-btn2' class='my-buttons'>Sign-up</button>
<button id='login-btn2' class='my-buttons'>Login</button>
<button id='logout-btn2' class='my-buttons'>Log out</button>
</div>
</div>
<div id='sample3' class='btn-sample'>
<h3 id='h3-sample3' style=''>Sample 3</h3>
<div class='btns'>
<button id='signup-btn3' class='my-buttons'>Sign-up</button>
<button id='login-btn3' class='my-buttons'>Login</button>
<button id='logout-btn3' class='my-buttons'>Log out</button>
</div>
</div>
</div>
</body>Grouping CSS Selector
Grouping CSS selector is used to target and style multiple HTML elements with the same style definitions. Each of the elements are separated by comma. This approach helps to avoid code duplications and write more compact code. Practice with the examples below:
<head>
<style>
p, #btn1, #btn2, #btn3 {
color: white;
background-color: orange;
padding: 5px;
margin: 5px;
text-align: center;
border: none;
width: 50%
}
</style>
</head>
<body>
<p>This is a demo of grouping CSS selector</p>
<button id="btn1">Click 1</button>
<button id="btn2">Click 2</button>
<button id="btn3">Click 3</button>
</body>Universal Selector
Universal selector which is denoted by start (*) is used to target all the HTML elements on a web page. Practice with the example below:
<head>
<style>
*{
color: blueviolet;
padding: 5px;
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<h3>CSS Universal Selector</h3>
<p>This is to demonstrate universal selector</p>
<button>Click</button>
</body>External CSS
In this approach, the CSS code is taken out of the HTML file outrightly. Like internal approach, when you store your CSS in an external file, the codes are written in blocks with each block enclosed in curly brackets. Each declaration in the curly bracket consists of a CSS property and its value separated by a colon and terminated with a semicolon. However, you need to note that:
You do not wrap the code inside a style tag like the internal CSS approach
You need to link the file to the HTML document.
How to link CSS file to an HTML document
This is achieved by following the steps below:
Inserting <link> element in the head section of the HTML document. Note <link> is an example of void HTML element.
Void Elements - These are HTML elements that have only the opening tag. They cannot have closing tag and also cannot have child nodes (that is, nested elements or text nodes). Other examples of void elements are: <input>, <br>, <img>, <hr>, <col> etc
Add two attributes, namely:
relandhrefin the <link> element.Finally, assign
stylesheetas therelattribute value and the name of the CSS file as thehrefattribute value.
For example, if the name of the CSS file is index.css and it is located in the same folder (directory) with the HTML file, here is what you should do to link the CSS file to your HTML document:
<head>
<link rel='stylesheet' href='index.css'>
</head>Let us apply the concept to our buttons samples project to make it clearer. To accomplish this, follow the steps below:
Step 1: On the Scrimba IDE, create a new file and name it index.css (Note that you can name it whatever you like as long as you end the name with .css extension). To create the new file, hover your cursor on the EXPLORER on the top left corner of the Scrimba IDE => Click on the three dots “…” to the right side at the front of EXPLORER => Select New File option => Enter index.css in the dialog box and click OK
Step 2: Move all the CSS code in the head section of the HTML file to a file named index.css as shown below:
.btn-container { /* Note that class selectors are preceded by "." */
display: flex;
}
h2 {
color: grey;
}
.btn-sample {
border-style: solid;
border-width: 1.5px; /*border-width added to control the thickness of the boder*/
padding: 10px;
margin: 5px;
}
#sample1 { /* Note that id selectors are preceded by # */
border-color: green;
}
#sample2 { /* Note that id selectors are preceded by # */
border-color: tomato;
border-radius: 5px;
}
#sample3 { /* Note that id selectors are preceded by # */
border-color: blue;
border-radius: 50px;
}
#h3-sample1 {
color: green; font-size: 20px;
}
#h3-sample2 {
color: tomato; font-size: 20px;
}
#h3-sample3 {
color: blue; font-size: 20px;
}
.btns{
display: flex;
}
.my-buttons {
padding: 5px;
font-weight: bold;
font-size: 14px;
height: 38px;
width: 75px;
margin: 5px;
}
#signup-btn1 {
background-color: green;
color: white;
border: none;
}
#login-btn1 {
background-color: white;
color: green;
border-color: green;
border-style: solid;
}
#logout-btn1 {
background-color: green;
color: white;
border: none;
cursor: pointer;
}
#signup-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
}
#login-btn2 {
background-color: white;
color: tomato;
border-color: tomato;
border-radius: 5px;
border-style: solid;
}
#logout-btn2 {
background-color: tomato;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#signup-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
}
#login-btn3 {
background-color: white;
color: blue;
border-color: blue;
border-radius: 50px;
border-style: solid;
}
#logout-btn3 {
background-color: blue;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
}Step 3: Link index.css to the HTML file (the index.html file). Remove the <style> element in the head section of the HTML file and replace it with <link> element as shown below:
<head>
<link rel='stylesheet' href='index.css' >
</head>
<body>
<div>
<h2>Buttons Samples</h2>
</div>
<div class='btn-container'>
<div id='sample1' class='btn-sample' >
<h3 id='h3-sample1'>Sample 1</h3>
<div class='btns'>
<button id='signup-btn1' class='my-buttons'>Sign-up</button>
<button id='login-btn1' class='my-buttons'>Login</button>
<button id='logout-btn1' class='my-buttons'>Log out</button>
</div>
</div>
<div id='sample2'class='btn-sample'>
<h3 id='h3-sample2' style=''>Sample 2</h3>
<div class='btns'>
<button id='signup-btn2' class='my-buttons'>Sign-up</button>
<button id='login-btn2' class='my-buttons'>Login</button>
<button id='logout-btn2' class='my-buttons'>Log out</button>
</div>
</div>
<div id='sample3' class='btn-sample'>
<h3 id='h3-sample3' style=''>Sample 3</h3>
<div class='btns'>
<button id='signup-btn3' class='my-buttons'>Sign-up</button>
<button id='login-btn3' class='my-buttons'>Login</button>
<button id='logout-btn3' class='my-buttons'>Log out</button>
</div>
</div>
</div>
</body>Step 4: Run the code and you will have the same output as we had when we used the inline and internal approaches.
CSS Specificity
When there are more than one CSS selector pointing to an element, the selector with the highest specificity value prevails and its style get applied to the HTML element. CSS specificity has order of precedence as follows:
Inline style has the highest priority
Second on the priority level is id selector
Then, followed by classes, pseudo-classes and attribute selectors
And the least in priority are elements and pseudo-elements
Psuedo-Classes
Psuedo-classes set the behaviour of an element upon occurrence of an event on the web page. Example of such event, include user mouses over an element, when an element get focused or a link is visited. Practice with the examples below:
<head>
<style>
div {
border: solid 1.5px orange;
padding: 10px;
width: 60%;
}
input {
border: solid 1px black;
text-align: center;
width: 92%;
background-color: white;
}
#inpt1:focus { /*to set the input field style when the cursor is active inside it */
outline: none;
background-color: orange;
}
#inpt2:hover { /*to set the submit button style when it is hovered on */
outline: none;
background-color: orange;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<p>This is a demo of psuedo-classes</p>
<input id="inpt1" placeholder="Click here to get focus">
<br> <br>
<input id="inpt2" type="submit" value="Mouse Over Me">
</div>
</body>Projects
In this section, we are going to apply CSS to the Poster Designs web page we built in part one of this tutorial to enhance its look and feel. In addition, we are going to style two of the apps we built in JavaScript Made Easy - Part One.
Poster Designs Project
In this project, a single web page was built with HTML. See the HTML code below. Create a replica of this file on your IDE and name it index.html (you can give it any name, just ensure it ends with .html extension).
Note: We have to use VS code as the IDE to style this project because we could not save our images on Scrimba IDE. The index.html we made reference to above was created on VS code. If you need guidance on using VS code, please refer to part one of this tutorial where we explained how to download and use VS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poster Designs</title>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<div>
<div>
<div>
<div>
<h1>Welcome to Poster Designs</h1>
<p>Contact us for your different types of
posters.
<br>
We’ll give you the best,
because <span>we are simply
<br>
the best!</span></p>
</div>
<div>
<table>
<caption>Meet our designers</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Years of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Taylor</td>
<td>15 years</td>
</tr>
<tr>
<td>Paul</td>
<td>Reed</td>
<td>10 years</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<img src="images/main-image.png" alt="Image not available">
</div>
</div>
<div>
<div>
<h3>Meet our clients</h3>
<p>Here are a few of our numerous happy clients:</p>
<div><p>Amanda Int’l <img src="images/logo_1.jpeg" alt="Image not available" ></p></div>
<div><p>Cbar Inc <img src="images/logo_2.jpeg" alt="Image not available" ></p></div>
<div><p>Circle Global <img src="images/logo_3.png" alt="Image not available" ></p></div>
<div><p>GMT Group <img src="images/logo_4.png" alt="Image not available" ></p></div>
<div><p>Tomhack Holdings <img src="images/logo_5.jpeg" alt="Image not available" ></p></div>
</div>
<div>
<h3>Enquiry Form</h3>
<form>
<label for="">Company name</label>
<input type="text" placeholder="Company name"> <br>
<label for="">Contact person first name</label>
<input type="text" placeholder="First name"> <br>
<label for="">Contact person last name</label>
<input type="text" placeholder="Last name"> <br>
<label for="">Contact phone no</label>
<input type="text" placeholder="Phone No"> <br>
<label for="">Contact email</label>
<input type="email" placeholder="Email"> <br>
<label for="">Enquiry Description</label>
<input maxlength="350" class="enquiry-desc"> <br><br>
<input type="submit">
</form>
</div>
</div>
</div>
</body>
</html>To style the page in the index.html file above, we did the following:
Step 1 - We created a folder named “images” for all our images on VS code and moved all the images into the images folder.
Step 2 - We added id and class attributes to the HTML elements we want to style and assigned values to them as shown below. Besides, we also applied CSS styling using the HTML element’s name in some instances. We have quite a number of comments in the code below to explain what we are doing, please pay attention to them. Open two sessions of your IDE, copy and paste the code into one for ease of reading and used the second session for practicing. You can adopt this approach whenever you have many comments in our example codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poster Designs</title>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<div>
<div class='section1'>
<!-- class attribute with assigned value of section1 used to manage the styling of elements insidde this div. -->
<div>
<div>
<h1>Welcome to Poster Designs</h1>
<!-- id="first-p" introduced to manage the styling of <p> elementgs -->
<p id="first-p">Contact us for your different types of
posters.
<br>
We’ll give you the best,
because <span>we are simply
<br>
the best!</span></p>
</div>
<div>
<table>
<caption>Meet our designers</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Years of Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Taylor</td>
<td>15 years</td>
</tr>
<tr>
<td>Paul</td>
<td>Reed</td>
<td>10 years</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<!-- For image element below, we introduced a class attribute with assigned value main-image-->
<img class="main-image" src="images/main-image.png" alt="Image not available">
</div>
</div>
<!-- class attribute with assigned value of section1 was introduced to manage the styling of elements inside the next div below -->
<div class="section2">
<div class="our-clients"> <!-- class attribute with assigned value of our-clients used to manage the styling of our client sub-section -->
<h3>Meet our clients</h3>
<p>Here are a few of our numerous happy clients:</p>
<!-- class attribute with assigned value of my-class was introduced to all of the div wraping each client's detail -->
<div class="my-client" ><p>Amanda Int’l <span><img class="client-logo" src="images/logo_1.jpeg" alt="Image not available" ></p></span></div>
<div class="my-client"><p>Cbar Inc <span><img class="client-logo" src="images/logo_2.jpeg" alt="Image not available" ></p></span></div>
<div class="my-client"><p>Circle Global <span><img class="client-logo" src="images/logo_3.png" alt="Image not available" ></p></span></div>
<div class="my-client"><p>GMT Group <span><img class="client-logo" src="images/logo_4.png" alt="Image not available" ></p></span></div>
<div class="my-client"><p>Tomhack Holdings <span><img class="client-logo" src="images/logo_5.jpeg" alt="Image not available" ></p></span></div>
</div>
<!-- class attribute with assigned value of enquiry-form was introduced to the div wrapping the form manage common styling of the form -->
<div class="enquiry-form">
<h3>Enquiry Form</h3>
<form>
<!-- class attribute with assigned value of f-label was introduced to all the label elements to manage their CSS styling -->
<!-- class attribute with assigned value of input-f was introduced to all the input elements to manage their CSS styling -->
<label class="f-label" for="">Company name</label>
<input class="input-f" type="text" placeholder="Company name"> <br>
<label class="f-label" for="">Contact person first name</label>
<input class="input-f" type="text" placeholder="First name"> <br>
<label class="f-label" for="">Contact person last name</label>
<input class="input-f" type="text" placeholder="Last name"> <br>
<label class="f-label" for="">Contact phone no</label>
<input class="input-f" type="text" placeholder="Phone No"> <br>
<label class="f-label" for="">Contact email</label>
<input class="input-f" type="email" placeholder="Email"> <br>
<label class="f-label" for="">Enquiry Description</label>
<input type="text" maxlength="350" class="enquiry-desc"> <br><br>
<input type="submit" class="submit-btn">
</form>
</div>
</div>
</div>
</body>
</html>Step 3 - We created index.css file on the IDE for our CSS code (you can call it any name as long as it ends with .css extension). If you decide to give it another name, you need to change href attribute value in <link rel='stylesheet' href='index.css'> inside <head> section of your html file (in our own case index.html) from index.css to whatever name you it.
Then we wrote our CSS codes inside index.css as shown below. Please pay attention to the comments. While reading and practicing this step, write your CSS codes one block after the other and one line of code after the other within the block. Save and or refresh your web page upon completion of each line of codes to see their impact on the web page:
.section1 {
display: flex;
}
h1 { /* to target and style all the <h1> elements on our web page */
font-family: roboto;
font-size: 75px;
color: rgb(5, 180, 203);
margin-left: 15px;
width: 100%;
margin-top: 50;
margin-bottom: 45;
}
h1:hover { /*this code set the style when you put the cursor on an h1 element in the web page */
background-color: rgb(5, 180, 203);
color: white;
}
h3 { /* to target and style all the <h3> elements on our web page */
font-size: 35px;
margin-top: 45px;
margin-left: 15px;
color: rgb(5, 180, 203);
}
p { /* to target and style all the <p> elements on our web page */
margin: 15px;
margin-top: 20px;
font-family: Arial;
font-size: large; /* large is equivalent of 18px. The default font-size is medium which is 16px.
You can also set font-size to xx-small (9px), x-small (10px), small (13px), x-large (24px), xx-large (32px) */
}
#first-p, span { /* to target and style all the <span> elements and the element with id attribiute of first-p
on our web page. You can target multiple CSS selectors by separating them with comma as we did here */
font-size: 25px;
}
span {
font-family: -apple-system;
color: rgb(5, 180, 203);
font-weight: bold;
}
table {
width: 100%;
margin: 15px;
margin-top: 75px;
margin-right: 30px;
margin-bottom: 15px;
border-collapse: collapse; /* Used to remove the vertical column lines in the table */
}
caption {
font-weight: bold;
font-size: 20px;
color: gray;
margin-bottom: 15px
}
th, td {
border-bottom: solid 1px gray; /* You can specify multiple values to a CSS property */
padding: 5px;
text-align: left;
}
tr:hover {
background-color: rgb(5, 180, 203);
color: white
}
.main-image {
width: 525px;
margin: 50px;
margin-top: 50px;
}
.section2 {
display: flex;
margin-top: 75px;
}
.our-clients {
margin-right: 60px;
}
.my-client {
display: flex;
}
.client-logo {
width: 68px;
object-position: bottom;
object-fit: contain;
/* object-position is used to set how an <img> or <video> should be positioned within its container.
object-fit property is used to state how an <img> or <video> should be resized to fit its container
the value can be:
fill - this is the default, the image is resized to fill the given dimension,
contain - keeps the image aspect ratio but resized to fit within the specified dimention
cover - keeps the image aspect ratio and fits into the specified dimension
none - the image is not resized
scale-down - scales down the image to the smallest version of 'contain' or 'none'*/
}
.enquiry-form {
margin-left: 150px;
background-color: rgb(169, 220, 226);
padding: 0;
}
.input-f {
width: 75%;
margin-left: 50px;
margin-bottom: 5px;
padding: 10px;
box-sizing: border-box; /* box-sizing make css to include the padding and the border in element's
width and height. To achieve this goal, just set box-sizing to border-box as we did above */
border-style: solid;
border-color: rgb(169, 220, 226);
border-width: 1.5px;
}
.f-label {
margin-left: 50px;
}
.enquiry-desc {
width: 75%;
height: 120px;
padding: 10px;
box-sizing: border-box;
border-style: solid;
border-color: rgb(5, 180, 203);
border-width: 1.5px;
border-radius: 4px;
font-size: 16px;
text-align: top left;
margin-left: 50px;
}
.input-f:focus, .enquiry-desc:focus {
outline: none;
border-color: rgb(5, 180, 203)
}
.submit-btn {
background-color: gray;
color: white;
border-style: solid;
border-color: rgb(169, 220, 226);;
border-width: 2px;
width: 75%;
height: 40px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
margin-left: 45px;
}
.submit-btn:hover {
background-color: rgb(5, 180, 203);
color: white;
}Styling JavaScript Tutorial’s Projects
We had three projects in JavaScript Made Easy - Part One. Two of the projects will be styled in this section. The first set of lines of code you will see for each of the projects contain the app without any CSS styling. In this state all the apps performed the function they were designed to do but their look and feel are not desirable. The second set of code for each of them contains the CSS codes to make the apps looks more attractive and desirable. If you have not gone through JavaScript Made Easy - Part One and you are not conversant with JavaScript, you may not understand the JavaScript part of the code. But that will not in any way affect your ability to learn and understand the HTML and CSS part of the project. You can easily learn JavaScript afterwards by going through our JavaScript tutorials.
To style each of the app and make them look better, we did the following:
Wrap the whole of the HTML portion of the code in a <div> container with class attribute value of container.
Inserted
<link rel='stylesheet' href='index.css'>tag in the <head> section of the HTML file to link to the CSS fileWe created index.css file for each of the project where we wrote the applicable CSS code.
Voting Eligibility App
This is a very simple app that confirms if a user is old enough to vote or not based on defined minimum voting age. The code below contain the plain HTML and Javascript.
<head>
<link rel="stylesheet" href="index.css" >
</head>
<body>
<div class="container">
<h4>Confirm Your Voting Eligibility</h4>
<form onsubmit="checkEligibility()">
<label for="name">Name:</label>
<input type='text' placeholder='Please enter your name' id='name' required>
<label for="age">Age:</label>
<input type='number' placeholder='Please enter your age' id='age' required>
<input type="submit" value="Submit">
</form>
</div>
<script>
function checkEligibility() {
let myName = document.getElementById('name').value;
let myAge = document.getElementById('age').value;
if (myAge >= 18) {
alert('Congratulations ' + myName + '! You\'re ' + myAge + ' years old and hence, eligible to vote');
} else if (myAge >= 14) {
alert(myName + '! You\'re ' + myAge + ' years old, you will be eligible to vote next election');
} else {
alert(myName + '! You\'re ' + myAge + ' years old, you\'re too young to vote');
}
}
</script>
</body>Next below is the CSS code to style the app. We inserted comments where necessary for your better understanding:
.container {
background-color: tomato;
padding: 15px;
/* to position the container (<div>) at the center, we set the margin to auto and width to 50% (the width property value must be something < 100% for the container to be centralised) */
margin: auto;
width: 50%;
}
h4 {
color: black;
margin-bottom: 40px;
text-align: center;
}
input[type=text], input[type=number] { /* We used grouping selector to style 2 elements with common style definition */
width: 100%;
padding: 12px 20px;
margin: 5px 0;
display: inline-block;
border: 1px solid tomato;
box-sizing: border-box;
}
input[type=text]:focus, input[type=number]:focus {
outline: none;
border-color: red;
}
input[type=submit] {
width: 100%;
background-color: red;
padding: 12px 20px;
margin: 8px 0;
border: none;
color: white;
}
input[type=submit]:hover {
cursor: pointer;
font-weight: bold;
}To Do List App
Here is the HTML file, index.html containing the bare bone HTML and JavaScript codes for the To Do List app:
<head>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<!--design the layout of your app with HTML -->
<div class="container">
<h2>My ToDo List</h2>
<div class="user-input">
<p>Enter Task:</p> <input id="enteredtask" type="text" placeholder="Enter a task">
<button id="addtask" onclick="addTask()"> Add Task </button>
</div>
<div class="to-do">
<ol id="mylist"></ol>
</div>
</div>
<script>
const enteredTask = document.getElementById('enteredtask');
const myList = document.getElementById('mylist');
function addTask() {
if (enteredTask.value == '') {
alert('You cannot add a blank task. Please enter a task!');
}
else{
let newTask = document.createElement('li');
newTask.innerHTML = enteredTask.value;
myList.appendChild(newTask);
let delButton = document.createElement('button');
delButton.innerHTML = 'Delete';
newTask.appendChild(delButton);
}
enteredTask.value = '';
}
myList.addEventListener('click', function(e){
if (e.target.tagName == 'BUTTON') {
e.target.parentElement.remove();
}
}, false);
</script>
</body>Below is the index.css file to style the todo app:
.container {
background-color: rgb(214, 188, 239);
padding: 15px;
/* to position the container (<div>) at the center, we set the margin to auto and width to 50% (the width property value must be something < 100% for the container to be centralised) */
margin: auto;
width: 80%;
color: white;
}
h2 {
text-align: center;
}
.user-input {
display: flex;
margin: auto;
width: 95%;
}
input {
font-size: 15px;
color: gray;
width: 70%
}
input:focus {
outline: none;
border-color: none;
font-size: 18px;
}
button {
background-color: rgb(186, 126, 241);
border: none;
color: white;
cursor: pointer;
width: 15%;
font-size: 18px;
}
p {
font-size: 18px;
font-weight: bold;
width: 15%;
margin-left: 10px;
}
ol li {
font-size: 20px;
margin: 15px;
}
ol li button { /* to style the butten in the list item*/
position: absolute;
right: 172px;
height: 30px;
}
.to-do {
color: blueviolet;
}Conclusion
Thank you for following through to the end. We hope you enjoyed and found the content of this tutorial useful and helpful. We shall teach and discuss more HTML and CSS concepts in part three of this tutorial, watch out for it. Finally, feel free to share the link to Tutorialsnote with your friends and colleagues.