How to Write HTML, Part 4: HTML and CSS

In How to Write HTML, Part 3: Formatting Structural Content, we touched on the content relationship formatting functionality of HTML tags and how they serve to format on page content so users and spiders can read it.

As mentioned within the section on tables:

“…you might have noticed, embedded in the table code is style="width:100%". This style command is
telling the web browser to display the table at 100% width of the container. It’s a style command — not to dissimilar from CSS (which we will touch on in a later lesson) — to inform the look and feel of the table.”

The code to that table is below:

<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Abraham</td>
<td>Ford</td>
<td>deceased</td>
</tr>
<tr>
<td>Sasha</td>
<td>Williams</td>
<td>31</td>
</tr>
<tr>
<td>Carl</td>
<td>Grimes</td>
<td>15</td>
</tr>
</table>

The output of that table looks like:

Basic Styled Table

Now, as we are focusing on the style element of width, if we change the width from 100% to 50%, as shown below:

<table style="width:50%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Abraham</td>
<td>Ford</td>
<td>deceased</td>
</tr>
<tr>
<td>Sasha</td>
<td>Williams</td>
<td>31</td>
</tr>
<tr>
<td>Carl</td>
<td>Grimes</td>
<td>15</td>
</tr>
</table>

The stylized changed output of that table will look like:

Basic, yet differently, styled chart

One simple change cut in half the width dimension of the table.

So, how does this equate to CSS? The answer is simple. HTML, much like the wooden framework of a house, is the foundation of a web page. It is the basic code which all other front end languages sits on top of. Likewise, CSS, much like the carpet or paint of a house, is the aesthetic look and feel of a web page. Both work together to provide the web browser with the data it needs to turn code into the graphical interface you are accustomed to seeing on the Internet.

How CSS and HTML Play Nice with Each Other

What is the relationship between HTML and CSS

The basic relationship of HTML and CSS is this: HTML is the markup language used to create content on a webpage while CSS is the style sheet language used to describe the presentation semantics of document written in a markup language. One builds content and the other defines how content is presented. It’s that simple.

Now, while both are types of code — they operate differently. HTML is direct input to produce content on a web page. CSS is referenced, also known as “called”, content which HTML directs your browser to pull in when constructing the overall webpage. In short, HTML and CSS should be kept separate from one another because:

  1. The separation of CSS and HTML creates greater built in logic within the code. The more logical and simpler the compiled code is, the easier it is for the web browser to display
  2. From the developer point of view, keeping HTML and CSS functional code and associated styles in separate locations makes editing easier
  3. Again, from the developer point of view, keeping HTML and CSS functional code and associated styles in separate locations makes file re-purposing easier

What does CSS Look Like?

For the purpose of this series, the aforementioned relationship between HTML and CSS is all the information needed. This said, understanding what CSS looks and how changes to a style sheet impact the overall look and feel of a webpage is an important part of the conversation.

Much like HTML, CSS is grounded in a basic framework using a selector and a declaration block. These elements serve as the foundational structure of all CSS code:

Once you understand the foundational nature of CSS, you can begin to understand how to locate CSS within a coded page source. For example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>

As you can see above, CSS is called by using { and closed by using }. Inside the brackets, the color - red - and the alignment - center - of the content is defined. This code visually computes out as:

If you extrapolate this out, you can begin to see how CSS can impact the look and feel of a webpage. As noted below, the content is verbatim within each proceeded version yet it looks wholly different:

CSS changes make all the difference


Now that you have a basic understanding of these two competing languages, let’s go under the hood.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.