An aspiring web developer learns HTML and CSS as part of their tech career training.In this article, we look at the difference between the two languages and two examples: one using HTML, the other using HTML and CSS. The hope is that you see the advantage to using CSS to make your markup more readable.
What is HTML?
HTML stands for Hypertext Markup Language. It is the building block of web pages and web applications. An HTML document consists of two parts: the head and the body.
The head of an HTML document contains all of the information needed for a web page to load or be listed on search engines – all of which are meta information you won’t directly see on a webpage.
The body is everything the client or user sees. It is made up of HTML that provides the structure to your web page. Here is an example of a web page structured with just HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sample HTML page</title>
</head>
<body>
<div>
<header>
<h1>HTML Demo</h1>
<nav>
<a href="#">Link #1</a>
<a href="#">Link #2</a>
<a href="#">Link #3</a>
</nav>
</header>
<main>
<h2>HTML is:</h2>
<ul>
<li>The skeleton or structure of application</li>
<li>Provides meaning to your application with semantic tags like <caption>, <main>, <strong>, and <h1></li>
<li>Styling is next to nil besides the default styling of certain elements.</li>
</ul>
</main>
</div>
</body>
</html>When you run the code above, you see a pretty bare bones page with no styling associated with it besides the default styles associated with the <h1>, <li> and <a> tags.
Inline Styling
We provide styling inside our HTML, with what is called “inline styling”. Using the “style” attribute, we can encapsulate rules for each individual element inside a pair of quotation marks. A sample document with inline style looks like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sample HTML page</title>
</head>
<body style="font-family: Roboto;">
<div>
<header style="width: 100%; display:flex; justify-content: space-between; align-items: center;">
<h1 style="width: 40%; letter-spacing: 2px;">Inline Style Demo</h1>
<nav style="width: 60%; display: flex; justify-content: space-around;">
<a style="text-decoration: none;" href="#">Link #1</a>
<a style="text-decoration: none;" href="#">Link #2</a>
<a style="text-decoration: none;" href="#">Link #3</a>
</nav>
</header>
<main>
<h2>Inline Styling is:</h2>
<ul>
<li>Rules for your element's decoration in <em>style</em> attribute</li>
<li>Syntax is <strong>style="width:100%; font-size: 1.3rem;"</strong> -- key:value pairs separated by semicolons</li>
<li>Any element that needs to be controlled with style needs to have their own style attribute with key:value pairs</li>
<li>How can this get cumbersome? </li>
</ul>
</main>
</div>
</body>
</html>This can get pretty time-consuming and cumbersome the larger our application is. If we have to provide inline-styling to all of our HTML elements individually, your markup can become quite unreadable, not to mention make it quite lengthy.
A resolution to this problem was created with CSS.
What is CSS?
Cascading Style Sheets (CSS) was created to solve the problem that was created with readability and the amount of code written when applications scaled. Separating the styling from the actual structure of the application allows for separation of concerns: HTML only deals with the structure of the document. CSS only deals with the styling of that document.
Stylesheets create the rules that will govern the HTML markup. This stylesheet can be internal or external. An internal stylesheet is placed in the head of your HTML document in between <style> tags.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Sample HTML page</title>
<style>
body {
font-family: "Roboto";
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
width: 40%;
letter-spacing: 2px;
}
header nav {
width: 60%;
display: flex;
justify-content: space-around;
}
nav a {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<header>
<h1>Inline Style Demo</h1>
<nav>
<a href="#">Link #1</a>
<a href="#">Link #2</a>
<a href="#">Link #3</a>
</nav>
</header>
<main>
<h2>Internal Stylesheets:</h2>
<ul>
<li>Are located in the <head> of the HTML document.</li>
<li>Are inside the head, the internal stylesheet is located in between <style> tags.</li>
<li>The Syntax changes from inline styling with properties and values in between semicolons to actual CSS with blocks of rules</li>
<li>How can this get cumbersome? </li>
</ul>
</main>
</div>
</body>
</html>The internal stylesheet starts that separation of concerns. As our CSS grows to hundreds of lines, the need to separate our code becomes more apparent. We take our CSS and move it to an external stylesheet, bringing all of the styling rules to its own file and making all of the structural elements its own file. We link the two with a link in the head of our HTML document.
Here, we have two files: an html file and a css file. Our CSS file contains all of the styling for our document. To link the two together, we use the <link> tag in the <head> of our HTML to point to the CSS file. This is one of the best ways to separate your structure from your styling.
Conclusion
In this article we’ve talked about what HTML and CSS is and how the two interact with each other to create a web page. Just remember that HTML is the skeleton, or the structure, of our application and the CSS is the code that makes the web page look aesthetically pleasing.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
