HTML & CSS on Mr. Pointing

HTML & CSS - Chapter 16

Tue, 19 May 2026 00:00:00 +0000

Images

To get right into it, we’ve already sort of styled images in the past. By passing in a width and height, we directly controlled how our images look. Now that we’re in CSS, we can still obviously use those same measurements as a part of our styling sheet;

img.large {
	width: 500px;
	height: 500px;
}
img.medium {
	width: 250px;
	height: 250px;
}
img.small {
	width: 100px;
	height: 100px;
}

Now that we know some useful tips from the last chapter, we can combine them to help create more interesting layouts with our images. Take the following example, where we use float, and we make some align classes;

HTML & CSS - Chapter 17

Tue, 19 May 2026 00:00:00 +0000

HTML & CSS - Chapter 15

Mon, 04 May 2026 00:00:00 +0000

Layout

Another important chapter that we’ve been working towards for a few weeks now, styling our layout means applying styles to how our page is formatted. Like every chapter, this is best studied by applying the following code snippets and messing around with them; don’t be afraid to experiment!

Before moving into anything new, let’s do a quick review on how things work as we understand. We know that each element within a given HTML page is a box. Some of these boxes create new boxes that disrupt the flow of a page, called block-level elements. These will always begin a new line and be completely separate from one another, like a h1 tag or a p tag. We also know that some boxes actually blend into the background, and sit wherever used, like when we use the i tag or the b tag. These are called inline elements, and flow nicely between text.

HTML & CSS - Chapter 14

Fri, 10 Apr 2026 00:00:00 +0000

Lists, Tables and Forms

As we move through the CSS portion of this book, you should start to realize everything we learned in the HTML portion has some CSS style we can apply to it. In this chapter, we’ll learn how to start working on our Lists, Tables, and Forms that we learned about in earlier chapters.

Lists

I already know how popular this is going to be based on how many students have already asked questions about this, so strap in. First off, up until this point we’ve been calling each list item a number of bullet point. The more accurate name for that item is called a marker, and it can be styled in numerous different ways. The first thing we can do is choose a default style type, using list-stlye-type on our ol or ul. Each list type has different style types;

HTML & CSS - Chapter 13

Tue, 17 Mar 2026 00:00:00 +0000

Boxes

As we know, each of the elements we make has it’s own “box”, or space in which it lives. Controlling your boxes is an integral part of CSS, as most of the styles we’ll be making will be control or manipulating these boxes. We’re going to look at how to control the dimensions of the boxes, borders, margins & padding, and finally hiding boxes. We’ll be positioning our boxes in a later chapter.

HTML & CSS - Chapter 12

Fri, 13 Mar 2026 00:00:00 +0000

Text

Easily what makes up 90% or more of every web page ever, text is integral to the design of a page. Not just text, but using text with the proper font, size, and spacing is everything. In this chapter, we’ll take a look at some text terminology, how to edit and format our text, as well as address some best practice uses of text manipulation.

Terminology

Before we get into editing, we need to understand some terms that will help us make better decisions. First up, we need to understand that different fonts use a different typeface, or the details of the font. We consider a serif font to have extra details at the ends of the main strokes of your letter; sans-serif as main strokes without extra flair, and monospace, where the each character of the font is the same width.

HTML & CSS - Chapter 11

Wed, 11 Mar 2026 00:00:00 +0000

Color

One of the easiest ways to start making your pages look nice, color can quickly bring together content to look neat and organized. More specifically, choosing a good color scheme is what keeps people on your site rather than a cursory glance. We’ll not only look at how to integrate colors, but what good integration of colors looks like.

By default, the color property changes the color of the text within a given element. We’ve already seen this used before, but to specify, we have three main ways of giving CSS a color; RGB values, a HEX code, or a color name.

HTML & CSS - Chapter 10

Wed, 04 Mar 2026 00:00:00 +0000

Introducing CSS

The moment we’ve all been waiting for, the chapter on CSS. As we’ve seen, the HTML language is efficient but not very pretty. After the next few chapters, you’ll have a good sense of how to implement design changes to make your pages more appealing. The hard part is not learning CSS; people rarely memorize it or it’s nuances. Rather, the hard part is learning good design. Unfortunately, that cannot be taught as much as it must be acquired by self study. I can show you good and bad, but it’s going to take practice to understand how certain attributes work and which are the best to use. Google searches are a must, as people have been using CSS for nearly 30 years, giving you a lot of options for resources.

HTML & CSS - Chapter 9

Mon, 23 Feb 2026 00:00:00 +0000

Video & Audio

A large portion of this chapter focuses on older version of browsers and their support/lack-of for Flash, a type of video format to display media on web pages. HTML5 helps us out a lot by providing a video tag, which we’ll go over in a second. Just wanted to point out again just how fast technology is moving.

One thing that hasn’t changed is the support for video playback formats. Depending on which you are using, formats like HEVC or WebM could not be supported. It’s best to use MP4 formatting, as it is the most widely accepted.

HTML & CSS - Chapter 8

Tue, 17 Feb 2026 00:00:00 +0000

Extra Markup

There’s a lot we left out in the previous chapters. Again, HTML is not a challenging language to pick up and use, but there are some nuances to it we glanced over to just begin writing. In this chapter, we’ll quickly go over some of the semi-important things we’ve moved past, as well as introduce some more advanced topics before we move into the CSS portion of this course.

HTML & CSS - Chapter 7

Sun, 08 Feb 2026 00:00:00 +0000

Forms

Once again, we stumble across another staple of HTML, the form. We understand any form to be a space where there are boxes or lines that allow user input. These can be in the form of text boxes, drop-down menus, scales, whatever you can think of. Like most HTML elements, the uses are numerous. Whether you’re collecting info for a newsletter, or filling out a request form, forms make all of that data collection trivial.

HTML & CSS - Chapter 6

Tue, 03 Feb 2026 00:00:00 +0000

Tables

Another staple of HTML pages, tables are used all over the place. Some pages like stock websites or sports information is full of tables, while some might have one or two for a calendar or schedule. Pretty much anytime we have complex data that needs to be displayed, columns and rows are the way to go in most cases. We also call it a grid format, with each box of the grid being a table cell.

HTML & CSS - Chapter 5

Mon, 02 Feb 2026 00:00:00 +0000

Images

Obviously, there are numerous reasons for why we would want to add images to our web pages. How we integrate and present them well, however, is the most important part, and we’re going to learn exactly how to do that in this chapter. The first image you see really sets the tone for the rest of the visit with your sight, so choosing the right type of image is key.

HTML & CSS - Chapter 4

Tue, 27 Jan 2026 00:00:00 +0000

Links

How do we navigate from page to page? Links of course! They’re everywhere, and rightfully so. Without links, we’d only be able to access pages by typing them into our browser one at a time. That would suck. So today, when you click on a link to something, thank whoever came up with links.

This is probably the most complicated tag we’ve written, but it’s pretty logical. Here’s a quick example;

Portfolios

Tue, 27 Jan 2026 00:00:00 +0000

What is a Portfolio?

Put simply, a portfolio is a collection of work, achievements, projects, and anything else that you might want to show off to the world. Some might think portfolios are only linked to art, but that’s only half the picture. People who work in stocks have their own “stock portfolios” that contain all of the stocks they follow; some athletes keep a highlight reel, which is just a portfolio of videos showing off their best moves. The uses for a portfolio are endless, and the more creative & engaging it is the better impact it will have on those who are looking at it.

HTML & CSS - Chapter 3

Wed, 07 Jan 2026 00:00:00 +0000

Lists

Used nearly everyday in numerous settings, lists help organize and structure data in a neat and sequential way. There are two main types;

Ordered Lists: Where each item in the list is ordered in a specific way based on numbers; think of a recipe, or any other set of instructions.

Unordered Lists: Lists that begin with a bullet point where the order of the content doesn’t matter.

There’s a third, not so often used type we’ll quickly look at towards the end.

HTML & CSS - Chapter 2

Mon, 05 Jan 2026 00:00:00 +0000

Text

We said that in the last chapter, all HTML is made up of text. Let’s break that down a little further; the tags we use are called markup. We have two types we’ll focus on in this chapter:

Structural Markup: tags that control or describe the layout of the content/text
Semantic Markup: tags that control the design of the sentences/text content provided

We’ll go through a couple of different types of tags and their place in designing our web-pages.

HTML & CSS - Chapter 1

Mon, 13 Oct 2025 00:00:00 +0000

Structure

What do we make websites for? Mostly for online resources of physical things we need and look for in our daily lives. A main component of everything we use and consume is structured. The structure of our web page takes on many forms, but for now let’s focus on the most basic type; the building blocks that construct almost every web page.

When thinking about how we should structure our pages, we can always take a look at real life examples in print media for what you’re looking for. In it’s most basic form, something like a newspaper, we have a title, heading or two, and sub-paragraphs with images or quotes. That’s a great place for us to start.