HTML and CSS Fundamentals

In the last lesson, we started down the path of web development by learning about the fundamental building blocks of web dev. This introduced us to HTML (Hypertext Markup Language). Today, we will go a little more in-depth into HTML and also learn about HTML’s companion language, CSS (which stands for Cascading Style Sheets). This will allow us to build our first styled web page.

At the end of this article, you should be able to:

• Understand the concepts of HTML and be able to build a small HTML page.
• Understand the main concepts of CSS (selectors and style rules), and be able to apply them to an HTML page.

Requirements

• Introduction to Web Development Fundamentals

Learn

Learn to understand the concepts of HTML and be able to build a small HTML page.

Overview

HTML is one of the core building blocks of the Internet. You should learn what it is and how to use the basic tags to get content to appear on a screen.

Review

What is HTML?

Hypertext markup language. It is the language that web browsers read to build a web page. It acts as a ‘blueprint’ to display data on a user’s screen. This is the basic building block of the web. Every page on the Internet is just HTML at its core.

What are HTML elements?

Elements are what we use to tell the browser how we want the data supplied to be displayed.

What is a ‘tag’?

An element consists of an opening and closing tag. The data supplied between the tags will be displayed per the instructions of the element.

How does the browser use HTML to create what I see?

The browser reads and interprets the HTML file to understand how the developer intended the data to appear on the screen.

What are the basic HTML elements?

The elements we learned about were html, head, body, ‘p’, span, div, and h1-h6

Learn

Expanded ‘Basic’ elements.

Overview

There are dozens of elements available in HTML. However, just a handful are used 90% of the time. I will only cover the most commonly used in this lesson. You can achieve virtually anything you want with the most basic HTML elements and some CSS (which we will talk about later). It is important to note though that there is an idea in web development that your HTML elements should match the exact information you are attempting to display. This is known as being ‘semantically correct’, and this method uses all of the available HTML elements. This is done for a number of reasons including accessibility and SEO. We will not learn about this method in the lesson, but you should know that it exists.

Attributes

Before we jump into learning about a couple more HTML elements, let’s learn about another way to supply data to an element. We know that we can supply text between two tags, but what if what we are trying to display cannot be textually based? We can include this data with special flags right inside of our tags. This is known as an attribute. We will see attributes in action in the next section.

More Elements

<a>

The ‘a’ (“anchor”) element, allows us to create links to other web pages (or even to other areas within our own web page). You will always see the ‘a’ element used with the href attribute to tell the browser what address you want the link to point to.

<img>

This element will display an image on the screen. It will always have an ‘src’ attribute which points to the address of the image to be displayed. NOTE: img tags can be self-closing, as in they do not need two tags. Simply put the / before the closing bracket in the first tag:

<ul> and <ol>

This element represents an “unordered list”. This is the parent element and will contain list items. There is also an ordered list <ol>, but is rarely used in modern web development, as most developers like to style their lists themselves.

<li>

The companion to the <ul> and <ol>. These elements represent the items to appear in the list. Any other elements can appear in an li.

Nesting Elements and Indentation

We’ve seen in previous examples that we can nest elements inside of tags. In fact, this is a major part of writing HTML. Nested elements are referred to as children and the top level elements as parents. You will see this type of structure throughout your time writing HTML (and all code for that matter). One thing to note is that while indentation is not a requirement of HTML (nor of CSS and JavaScript), it is still often practiced as a readability issue. We not only write code for ourselves, but also for our teammates and those that come after us. Indentation lets your code be much more easily read and understood.

Learn

Learn to understand the main concepts of CSS (selectors and style rules), and be able to apply them to an HTML page.

Overview

HTML is great, but HTML alone is plain and boring. This was the case during early days of the Internet: web pages were very basic, text-only sites. Then came along CSS (Cascading Style Sheets), which allowed us to put some color and style into our web pages! It’s like the difference between black & white and color TV.

Introduction to Cascading Stylesheets.

Before we begin, let’s think about the analogy of a web page as a house. In order to build a house, we need a few things. First, we need raw materials. Then, we need a plan. Then, we need paint and decorations. Finally, we need electricity and plumbing to make everything work*. In this analogy, our HTML is our raw materials. It has so much potential, but it’s just laying in a pile on the ground. We need a plan and a way to spruce it up and decorate it. That is where CSS comes in.

*the electricity and plumbing represents JavaScript which we will learn about later.

What is CSS?

As already mentioned, CSS stands for Cascading Style Sheets. It is a different language than HTML. It allows us to add color and style to our web pages. Usually, when we think about web pages, we think about nicely put-together, pretty-looking sites, and so far what we have built has been pretty bland, if not ugly. Once the browser reads the HTML, it will then read the CSS and give different styling rules to different elements in our HTML based on how we select them.

The style and link Elements

Before we can add CSS to our web page, we need to inform the browser that what it is reading is in fact CSS. We can tell the browser that through HTML elements known as the style and link elements. These elements will go in between the head tags, as it is not necessarily data we need to appear on the screen.

There are two ways of including CSS in our HTML.

1. We can write our CSS directly between two style tags:

2. We can link to an external CSS file using the link element. This element will include two attributes: rel and href. rel will refer to the type of file we are linking: in this case, “stylesheet”, and the href will point to the location of the file.

Introduction to CSS Selectors

In order for us to apply styling rules to HTML elements, we have to know which elements to apply the rules to. This is where selectors come in. You can select all elements of a certain type: p, div, body, and etc. Or you can apply a class or id to each individual element. We apply these selectors to the HTML tags themselves in the form of an attribute:

Ids: are titles that can only appear on a single element. Think of it as you would your driver’s license number. ONLY you have that one number.

Classes: on the other hand can apply to multiple elements. Think of it like a classroom. Usually, you aren’t the only person in a class, although you might be. The class is big enough for lots of people.

Individual elements: We do not need to add anything to use every element of a certain type as a selector. CSS does that for us already.

Anatomy of Styling Rules (Syntax)

Now that we have our selectors in place we need to tell the browser what to do with those selectors. Inside of our style tags, we will insert the rules. Classes will always begin with ., and Ids will always begin with #. Elements will begin with neither and just have the element name. After the name of the selector, we will use braces (“{}”) to hold our rules to that one selector.

Styling rules will need to adhere to a certain syntax in our CSS so that the browser knows how to read them properly. Within the braces, we will then have the name of the property, a colon(“:”), and the value of the rule. This will be followed by a semicolon(“;”).

Styling Rules

Now that we have some HTML elements selected, we can begin to add styling. There are a LOT of different ways you can style an object. You can control how big or small it is, what color it is, where it is placed on the screen, or even if it is visible or not. We will go over some of the most common styling properties and how to use them.

background or background-color

Background can be set to a variety of rules. Most common would be setting the background to a color or an image. Both are displayed below. If you want to be more explicit, you can use the property background-color to only set the color of the background.

Color is used for text only. It will set the color of your text.

font-size

We can’t use width or height for text, but we can determine the size of the font used. You can use any size unit here that you would use with a font in a word processor (px, em, in, and etc). Px or pixel is the most popular.

Introduction to the Box Model

We can consider all html elements to be boxes. The make-up of each box is the content, padding, border, and margin. This is known as the Box Model.

height and width

We can tell the browser exactly how wide and how tall we want our element (content) to be. This is used in divs, imgs, and other height-based elements (in order to determine the size of text, we will need to use a different styling property). Size values can be in lots of different measures, but the most common is the pixel (“px”).

margin

The margin is an invisible area that surrounds your element. This is the outermost area in what we refer to as the box model

border

Border will set a border around your element. You can determine the size, color, and style of the border. It will be set up in this order: width, style, color (a list of border styles can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/border). The border is outside the padding, but inside the margin.

padding

The padding is the transparent area between the border and the content. It is very similar to the margin.

Dig Deeper

• Codecademy: Learn CSS A beginners CSS tutorial
• MDN: CSS MDN CSS documentation

Projects

After complete the project, share your codepen link, so I can review it : )

• HTML and CSS (1/3)

A quiz in which you determine what the specific style rule is for the specified selector.

• HTML and CSS (2/3)

An exercise in which you give the specified HTML elements, their specified styling rules.

• HTML and CSS (3/3)

An exercise in which you will build a basic web page for a business.

Tutorials