We published an article on how to make HTML websites. If you read through the article, your next step is to learn how to add CSS to HTML websites.
If you have not gone through the post, here is a link to quickly check it:
A website is made up of a structure and a layout.
From its inception, it was the goal of HTML to separate structure from the layout. The battle to accomplish this became a reality in December 1996 when W3C recommended CSS level 1.
CSS was created to separate the content of a website from its layout. This will make the website more accessible and flexible to manage.
In this article, we are going to learn how to add CSS to HTML. We will use the codes we used in making an HTML website here.
If you do not have access to the codes, you can download them here.
You will learn the following in this article:
What is CSS?
CSS means cascading Stylesheets. It is a means of separating the website structure from its presentation. According to Wikipedia, CSS is one of the cornerstone technology of the World Wide Web.
Stylesheets are site presentation and layout codes that takes care of the overall look and beauty of your website. It includes the website colors, fonts, layouts, and presentations.
When we created our HTML website last month, we used the table element to lay out our web page. Modern web design uses CSS for layout and presentations because of its numerous benefits.
Benefits of Using CSS in Web Designing
There are numerous benefits of adding CSS to HTML web pages. Some of the benefits are highlighted below for your knowledge.
- Better site management: One major benefit of adding CSS to HTML is to make site maintenance easy and simple. When the stylesheet is separated from the HTML file, you can edit each individually. You can easily locate each section and apply your anticipated changes without wasting much time. Also, changes that will affect the entire website can be applied in one location.
- Smaller file size: When you add CSS to an HTML file, you tend to reduce the file size of the entire website. Especially, when you use the external method to add CSS to websites. The smaller file size is important to SEO as it reduces load time.
- Faster load time: One implication of using tables to create websites is that it slows down the site. One of the major Google ranking factors is site speed. Using a table to create layouts may be good, but it negatively affects site speed, hence, SEO in general. When you learn how to add CSS to HTML files, you overcome the negative impact of using the table element.
- Boosts SEO: SEO is important to boost organic search results, which is the cheapest way to drive sales. CSS makes coding a website easier and simpler. This simplicity is enhances crawling by Google bots and other search engines. In addition, when you learn how to add CSS to HTML, you understand how to better structure websites. A better site structure boosts SEO because search bots can easily crawl and index information on the website.
- Better all-around accessibility: CSS provides accessibility options for different forms of disabilities to ease their use of your website. Options for screen readers can only be made available using CSS. This builds on the advantages of adding CSS to HTML.
When you learn how to add CSS to HTML in your web pages, you can discover other benefits. Please, feel free to share some of these benefits for others to learn.
Using CSS in Website Designing
Before adding CSS to HTML pages, you need to understand the basics. In this section, we will introduce you to the basics of using CSS.
The DOM tree
DOM means Document Object Model. It is an Application Programming Interface (API) that interacts with the HTML document.
In web designing, the HTML and CSS codes are processed by the browser and display the content to users. This is done in the following ways:
- The browser combines the content of HTML and CSS.
- Contents are converted to a DOM
- The HTML DOM is placed in the computer memory
- The browser displays the content of the HTML DOM to the user.
The HTML DOM represents data in a tree-like structure to form parents and children. The branches from the parent form the HTML DOM nodes. These DOM nodes are used to represent the elements, attributes, and texts in a DOM tree.
Let us illustrate using the HTML below.
<html> <head> <title>This is my First Title</title> <head> <body> <section> <h1>My First Section</h1> </section> </body> <html>
The above HTML when loaded creates a DOM tree shown below.
In the code above, the HTML is the root or parent, while the head and body are its children. The head becomes the parent of the title element. The title element may have a text or not.
Also, the section is the child of the body element, and h1 the child of the section element. The h1 element may have a text which becomes the child of the h1 element.
To style a child element, we usually select the parent element. For example, a style applied to the section element will affect all its children. A style applied on h1 will affect the text attached to the h1 element.
CSS Syntax
When an element is selected for styling, we create the style definition using syntax. The CSS syntax has the following components.
- Properties and values
- Declarations
- Declaration block
- Selectors
Properties and values: Properties and values are the major building blocks of styling HTML elements. Property is the attribute of an HTML element that should be affected. E.g. font-family, color, etc. Value refers to the change that must be applied to the property. E.g. if you specify a color property, you must specify a value for the color, say, blue, or red.
Declaration: When a CSS property is combined with a CSS value, it forms a declaration. CSS declaration brings the actual effect to the selected HTML element.
| A colon “:” is used to separate the property from the value. And a semi-colon “;” is used to terminate a CSS declaration within a declaration block. |
Look at the following property: value example:
| Background: green; |
- Declaration block: A declaration block refers to all CSS property-value pair applied to a selector. Each declaration block is enclosed in an open and closing brace bracket “{…}”. Each declaration within a declaration block must be terminated with a semi-colon “;”. Let’s see the following declaration block example:
| Selector { Color: blue; Font-weight: em; } |
In the above example, each line of code is a declaration, i.e. a property: value pair. The entire code block is a declaration block.
In actual CSS code, the last declaration may not have a semi-colon “;”.
CSS Selectors
A selector is an element or a prefix before the opening brace bracket in a declaration block. There are six (6) classes of CSS selectors you should know when adding CSS to HTML. They are as follows.
- Simple selectors: This type of selector is used to match any of the following:
- HTML element, e.g. <h1>,
- Id: ids are unique titles given to an element.
E.g. <h1 id=main-heading>.
To use an id selector in CSS code, you prefix the title with #.
E.g. #main-heading{…}
- Class: class is a title given to an element in HTML. Classes are not unique, hence, more than one element can have the same class.
E.g. <section class=role-play>
To use a class selector in CSS code, you prefix the title with a dot (.).
E.g. .role-play{…}
- Attribute selectors: This type of selector is used to match HTML elements based on their attributes and their values. For example, checked.
- Pseudo-classes selectors: This type of selector is used to match the state of an element. For example, hovered.
- Pseudo-elements selectors: This type of selector is used to select a part of the content of an element. For example, first paragraph.
- Combinators: This is used to combine group of sibling selectors together. For example, h1 h2 span {…}
- Multiple selectors: This type is used to select more than one element at the same time, by separating them with a comma. For example, h1, h2, {…}
In this article, we shall work with the simple selectors only. We will discuss other selectors at a later time.
How to add CSS to HTML Website
In this section, you will learn how to add CSS to HTML web pages. There are three main methods of adding CSS to HTML, they include:
- Inline method
- Internal method, and
- External method
Let us illustrate each of this method using our HTML code.
Please, visit: https://github.com/kckamac/kckamac.github.io/ to download the HTML code required to complete this lesson.
Add Inline CSS in HTML
To add inline CSS in HTML web pages, simply use the Style attribute on each HTML element.
Let us illustrate how.
| If you did not complete the lessons on how to make HTML websites, download the source code here. Create a Github account.Log into your account and create a new repository. Upload all the source code to the new repository. |
| If you completed the lessons on how to make HTML website, then you should have the source code. |
Do the following:
- Log in to your Github account.
- Select the repository where you saved your previous HTML work
- On the window that appears, click add file >> Create new file.
- Name the file inlinecss.html, click the Commit new file button.
- Click index.html to open the file. Select edit file icon (the pencil icon on the top right). Copy all the codes in this file.
- Open inlinecss.html, click edit, and paste the codes.
- Remove all the table elements and replace them with the codes shown below.
- Commit changes.
- Go to index.html and change the following:
- Change the href attribute in Home to /index.html
- Change the href attribute in About us to /inlinecss.html
- Change the About us to Inline` CSS.
- Commit all changes.
- Go back to the inlinecss.html and change the href attributes as shown in 6 (a-c).
- Commit all changes.
The Code: This is a practical example of how to add CSS to HTML files using the inline method.
<!doctype html>
<html class="no-js" lang="us-en">
<!--Codes on this file show how to add CSS to HTML web pages using the inline method. Notice that you must add CSS to HTML elements using the 'style' attribute.-->
<head>
<meta charset="utf-8">
<title>Add Inline CSS in HTML Pages</title>
<meta name="description" content="This page is used to illustrate how to add css to HTML web pages using inline method.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--This is the site heading section where the logo and page title appears-->
<header style="background-color:#c1c1c1; padding: 20px">
<div style="float: left; padding: 20px">
<img src="logo.png" width="75" height="75">
</div>
<div style="padding-left: 25px">
<h1 style="color:darkblue;">Learn How to Add CSS to HTML Website</h1>
<h2 style="color: #ffffff">Simple Ways to Create HTML Websites with CSS</h3>
</div>
</header>
<!--This is the site navigation section-->
<nav style="background: orange; padding: 10px; height: 40px;">
<div style="float: left; background-color: red; padding: 10px;"><a href="/index.html" style="text-decoration: none; color: white; font-size: 1.2em">Home</a></div>
<div style="float: left; background-color: red; padding: 10px; margin-left: 10px"><a href="/inlinecss.html" style="text-decoration: none; color: white; font-size: 1.2em">Inline CSS</a></div>
<div style="float: left; background-color: red; padding: 10px; margin-left: 10px"><a href="#" style="text-decoration: none; color: white; font-size: 1.2em">Courses</a></div>
<div style="float: left; background-color: red; padding: 10px; margin-left: 10px"><a href="#" style="text-decoration: none; color: white; font-size: 1.2em">Contact us</a></div>
</nav>
<!--Main website content. Here we removed all table elements and used CSS to create two columns for the website contents on each side. -->
<section class="container">
<article style="background: #f1f1f1; font-family: sans-serif; font-size: 1.2em; padding:20px; width: 60%; height: 400px; overflow: auto; float: left;">
<h2>Create HTML Website</h2>
<p>
Every web designer should know how to make an HTML website. This is the starting point of a web designing course, especially, for those new to website designing.
In today's world of web designing, you can make great websites without understanding what is Html or coding. This is because we have platforms that make things easy.
<br>
Becoming a professional web designer requires knowledge of HTML, CSS, and JavaScript.
Though codeless platforms can help you make a website easily and speedily, adding codes can make a difference. To add code to your design, the knowledge of HTML, CSS, and JS is invaluable.
</p>
<p>
Today, we are going to take you through the journey of how to make HTML websites.
In the end, you should be able to make an HTML website and host it. Basically, this is the sketch of the webpage you will make using HTML at the end of this post.
</p>
</article>
<aside style="background: #cccccc; font-family: sans-serif; font-size: 1.1em; padding:20px; width: 33%; height: 400px; overflow: auto; float: right;">
<h3>What is HTML?</h3>
<p>
HTML is an acronym for the term Hyper Text Mark-up Language. It is a language used to define the structure of a webpage. This simple language is represented with tags, also called elements.</p>
<p>The language begins with an opening tag and closes with a closing tag as shown below.</p>
<h1>This is a heading</h1>
<p>Within the opening and closing tags is a page content that will be rendered in a browser.
HTML uses hypertext to link out to other web pages within and outside the same domain. When a link is within the same domain, it is called an internal link.
</p>
</aside>
</section>
<!--This section mimics the recent post section as seen in blog posts.-->
<section class="posts" style=" clear: both; margin-top: 15px;">
<h2 style="padding-top: 20px;">Recent Posts</h2>
<article style="display: flex; flex-flow: nowrap;">
<div style="flex: 400px; padding: 20px;">
<h3><a href="#">EtherCal: The Ultimate Free Spreadsheet</a></h3>
<img src="EtherCalc 1.png" width="300" height="250">
<p>EtherCalc is a great spreadsheet for anyone seeking to do analysis. It is free and can help you connect with others</p>
</div>
<div style="flex: 400px; padding: 20px;">
<h3><a href="#">Google Sheets' an Awesome Spreadsheet App</a></h3>
<img src="Google sheets.png" width="300" height="250">
<p>Google sheet is an awesome spreadsheet for anyone seeking to do analysis. It is free and can help you collaborate with others</p>
</div>
<div style="flex: 400px; padding: 20px;">
<h3><a href=#>Zoho Sheet is the Most Excellent Free Spreadsheet</a></h3>
<img src="Sales analysis - zoho.png" width="300" height="250">
<p>Zoho sheet is an excellent spreadsheet for anyone seeking to do analysis. It is free and can help you connect with your colleagues</p>
</div>
</article>
</section>
<hr style="border: solid 3px red;">
<hr>
<!--Leave or delete this section to avoid confusion-->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
<!--This is the footer section -->
<footer style="background-color: orange;">
<p style="text-align: center; padding: 15px;">Copyright@2021. <a href=https://www.kmacims.com.ng style="text-decoration: none; color: grey; font-weight: 900;">KmacIMS | Education Annex</a>. All rights reserved.</p>
</footer>
</body>
</html>Notice that we added the same style to different elements. This will make our total file size to be larger. To solve this problem, we can use either of internal/ embedded method or external method.
Add Internal CSS to HTML
Here, we will copy all the CSS codes to the head section of the HTML page. And then use the style element to wrap them.
This will reduce our file size because we will use the class selector to combine similar codes. Do the following:
- Create another file with the name internalcss.html.
- Copy the code below into this file.
- Visit the index.html page and do the following:
- Change the href in the Courses navigation to /internalcss.html
- Change Courses to Internal CSS.
- Commit all changes
The Code:
<!doctype html>
<!--Codes on this file show how to add CSS to HTML web pages using the internal method. Notice that you must add the following CSS codes in the head section. Use <style> CSS codes here </style> as show below.-->
<html class="no-js" lang="us-en">
<head>
<meta charset="utf-8">
<title>Add CSS to HTML Pages: Embedded method</title>
<meta name="description" content="This page is used to illustrate how to add css to HTML web pages using internal method.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!--This is where we placed the CSS codes using the style element. We used simple selectors only to avoid confusion.-->
<style type="text/css">
/*The codes below styles the header section*/
header{background-color:#c1c1c1; padding: 10px; display: flex;}
header img{padding: 20px}
#pageTitle{padding-left: 25px}
#pageTitle h1{color:darkblue; text-transform: uppercase;}
#pageTitle h2{color: #ffffff; font-style: italic;}
/*The codes below styles the navigation*/
nav{display: inline-flex; padding: 10px;}
nav div{padding: 20px;}
a{color: grey; font-weight: 900; text-decoration: none}
a:hover{background: red; color: #ffffff; padding: 20px}
/*The codes below styles the main website content*/
.container{display: flex;}
.container article{background: #f1f1f1; font-family: sans-serif; font-size: 1.2em; padding:20px; flex: 600px;}
aside{background: #cccccc; font-family: sans-serif; font-size: 1.1em; padding:20px; flex: 200px}
/*The following codes will code the posts section*/
.posts{padding: 20px; background: #fffff1}
.posts article{display: flex; flex-flow: nowrap}
.post{padding: 20px; justify-content: space-around;}
hr{border: solid 6px red;}
/*This is the footer section codes*/
footer{background-color: orange;}
footer p{text-align: center; padding: 15px}
footer a:hover{background: none;}
</style>
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--This is the site heading section where the logo and page title appears-->
<header>
<div>
<img src="logo.png" width="85" height="85">
</div>
<div id="pageTitle">
<h1>Learn How to Add CSS to HTML Website</h1>
<h2>Simple Ways to Create HTML Websites with CSS</h3>
</div>
</header>
<!--This is the site navigation section-->
<nav>
<div><a href="/index.html">Home</a></div>
<div><a href="/inlinecss.html">Inline CSS</a></div>
<div><a href="/internalcss.html">Internal CSS</a></div>
<div><a href="#">Contact us</a></div>
</nav>
<!--Main website content. Here we removed all table elements and used CSS to create two columns for the website contents on each side. -->
<section class="container">
<article>
<h2>Create HTML Website</h2>
<p>
Every web designer should know how to make an HTML website. This is the starting point of a web designing course, especially, for those new to website designing.
In today's world of web designing, you can make great websites without understanding what is Html or coding. This is because we have platforms that make things easy.
<br>
Becoming a professional web designer requires knowledge of HTML, CSS, and JavaScript.
Though codeless platforms can help you make a website easily and speedily, adding codes can make a difference. To add code to your design, the knowledge of HTML, CSS, and JS is invaluable.
</p>
<p>
Today, we are going to take you through the journey of how to make HTML websites.
In the end, you should be able to make an HTML website and host it. Basically, this is the sketch of the webpage you will make using HTML at the end of this post.
</p>
</article>
<aside>
<h3>What is HTML?</h3>
<p>
HTML is an acronym for the term Hyper Text Mark-up Language. It is a language used to define the structure of a webpage. This simple language is represented with tags, also called elements.</p>
<p>The language begins with an opening tag and closes with a closing tag as shown below.</p>
<h1>This is a heading</h1>
<p>Within the opening and closing tags is a page content that will be rendered in a browser.
HTML uses hypertext to link out to other web pages within and outside the same domain. When a link is within the same domain, it is called an internal link.
</p>
</aside>
</section>
<!--This section mimics the recent post section as seen in blog posts.-->
<section class="posts">
<h2>Recent Posts</h2>
<article>
<div class="post">
<h3><a href="#">EtherCal: The Ultimate Free Spreadsheet</a></h3>
<img src="EtherCalc 1.png" width="300" height="250">
<p>EtherCalc is a great spreadsheet for anyone seeking to do analysis. It is free and can help you connect with others</p>
</div>
<div class="post">
<h3><a href="#">Google Sheets' an Awesome Spreadsheet App</a></h3>
<img src="Google sheets.png" width="300" height="250">
<p>Google sheet is an awesome spreadsheet for anyone seeking to do analysis. It is free and can help you collaborate with others</p>
</div>
<div class="post">
<h3><a href=#>Zoho Sheet is the Most Excellent Free Spreadsheet</a></h3>
<img src="Sales analysis - zoho.png" width="300" height="250">
<p>Zoho sheet is an excellent spreadsheet for anyone seeking to do analysis. It is free and can help you connect with your colleagues</p>
</div>
</article>
</section>
<hr>
<!--Leave of deleting this section to avoid confusion-->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
<!--This is the footer section -->
<footer>
<p>Copyright@2021. <a href=https://www.kmacims.com.ng>KmacIMS | Education Annex</a>. All rights reserved.</p>
</footer>
</body>
</html>Add External CSS to HTML
Here, we will copy all the CSS codes on the head section of the HTML page to a separate file.
Do the following:
- Create another file with the name externalcss.html.
- Copy the HTML code below into this file.
- Visit index.html page and do the following:
- Change the href in the Contact navigation to /externalcss.html
- Change Contact us to External CSS.
- Commit all changes
- Create another file with the name main.css
- Copy the codes in the CSS code below into this file
- Commit all changes.
HTML Codes:
<!doctype html>
<!--Codes on this file show how to add CSS to HTML web pages using the external method. Notice that you must add the following in the head section: <link rel="stylesheet" href="main.css">. Where main.css is the name of the file containing the CSS codes-->
<html class="no-js" lang="us-en">
<head>
<meta charset="utf-8">
<title>Add CSS to HTML Pages: External method</title>
<meta name="description" content="This page is used to illustrate how to add css to HTML web pages using external method.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="main.css">
<!--This is the where we placed the CSS codes using the style element. We used simple selectors only to avoid confusion.-->
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--This is the site heading section where the logo and page title appears-->
<header>
<div>
<img src="logo.png" width="85" height="85">
</div>
<div id="pageTitle">
<h1>Learn How to Add CSS to HTML Website</h1>
<h2>Simple Ways to Create HTML Websites with CSS</h3>
</div>
</header>
<!--This is the site navigation section-->
<nav>
<div><a href="/index.html">Home</a></div>
<div><a href="/inlinecss.html">Inline CSS</a></div>
<div><a href="/internalcss.html">Internal CSS</a></div>
<div><a href="#">Contact us</a></div>
</nav>
<!--Main website content. Here we removed all table elements and used CSS to create a two columns for the website contents on each side. -->
<section class="container">
<article>
<h2>Create HTML Website</h2>
<p>
Every web designer should have the knowledge of how to make HTML website. This is the starting point of web designing course, especially, for those new in website designing.
In today's world of web designing, you can make great websites without understanding what is Html or coding. This is because we have platforms that make things easy.
<br>
Becoming a professional web designer requires knowledge of HTML, CSS, and JavaScript.
Though codeless platforms can help you make a website easily and speedily, adding codes can make a difference. To add code to your design, the knowledge of HTML, CSS, and JS is invaluable.
</p>
<p>
Today, we are going to take you through the journey of how to make HTML websites.
In the end, you should be able to make an HTML website and host it. Basically, this is the sketch of the webpage you will make using HTML at the end of this post.
</p>
</article>
<aside>
<h3>What is HTML?</h3>
<p>
HTML is an acronym for the term Hyper Text Mark-up Language. It is a language used to define the structure of a webpage. This simple language is represented with tags, also called elements.</p>
<p>The language begins with an opening tag and closes with a closing tag as shown below.</p>
<h1>This is a heading</h1>
<p>Within the opening and closing tags is a page content that will be rendered in a browser.
HTML uses hypertext to link out to other web pages within and outside the same domain. When a link is within the same domain, it is called internal link.
</p>
</aside>
</section>
<!--This section mimics the recent post section as seen in blog posts.-->
<section class="posts">
<h2>Recent Posts</h2>
<article>
<div class="post">
<h3><a href="#">EtherCal: The Ultimate Free Spreadsheet</a></h3>
<img src="EtherCalc 1.png" width="300" height="250">
<p>EtherCalc is a great spreadsheet for anyone seeking to do analysis. It is free and can help you connect with others</p>
</div>
<div class="post">
<h3><a href="#">Google Sheets' an Awesome Spreadsheet App</a></h3>
<img src="Google sheets.png" width="300" height="250">
<p>Google sheet is an awesome spreadsheet for anyone seeking to do analysis. It is free and can help you collaborate with others</p>
</div>
<div class="post">
<h3><a href=#>Zoho Sheet is the Most Excellent Free Spreadsheet</a></h3>
<img src="Sales analysis - zoho.png" width="300" height="250">
<p>Zoho sheet is an excellent spreadsheet for anyone seeking to do analysis. It is free and can help you connect with your colleagues</p>
</div>
</article>
</section>
<hr>
<!--Leave or delete this section to avoid confusion-->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
<!--This is the footer section -->
<footer>
<p>Copyright@2021. <a href=https://www.kmacims.com.ng>KmacIMS | Education Annex</a>. All rights reserved.</p>
</footer>
</body>
</html>The CSS Codes:
/*Codes on this file show how to add CSS to HTML web pages using the external method. Save this file with the name, main.css*/
/*The codes below styles the header section*/
header{background-color:#c1c1c1; padding: 10px; display: flex;}
header img{padding: 20px}
#pageTitle{padding-left: 25px}
#pageTitle h1{color:darkblue; text-transform: uppercase;}
#pageTitle h2{color: #ffffff; font-style: italic;}
/*The codes below styles the navigation*/
nav{display: inline-flex; padding: 10px;}
nav div{padding: 20px;}
a{color: grey; font-weight: 900; text-decoration: none}
a:hover{background: darkblue; color: #ffffff; padding: 20px}
/*The codes below styles the main website content*/
.container{display: flex;}
.container article{background: #f2f1f2; font-family: sans-serif; font-size: 1.2em; padding:20px; flex: 600px;}
aside{background: #c0c0c0; font-family: sans-serif; font-size: 1.1em; padding:20px; flex: 200px}
/*The following codes will code the posts section*/
.posts{padding: 20px; background: #fffff1}
.posts article{display: flex; flex-flow: nowrap}
.post{padding: 20px; justify-content: space-around;}
hr{border: solid 6px red;}
/*This is the footer section codes*/
footer{background-color: orange;}
footer p{text-align: center; padding: 15px}
footer a:hover{background: none;}Conclusion
There are three methods to add CSS to HTML pages. They include Inline, Internal/embedded, and external methods.
As you are learning how to add CSS to HTML web pages, stick to the external method. The external method has all the benefits of using CSS in web pages.
The internal method is cumbersome ad more difficult to manage, while the embedded method increases the HTML file size.
You might encounter series of questions and problems as you practice through this lesson. Always use the comment box whenever you encounter difficulties.
Download the entire codes here: https://github.com/kckamac/kckamac.github.io
View all the changes made using this link: https://kckamac.github.io/
