Michael here, and in this lesson, I thought I’d run it back to a topic I haven’t covered much lately-web development and specifically HTML.
Now, in the way, way past of 2021-2022 I covered some basic HTML concepts like table design and list creation. However, now that I’ve introduced you to the basics, I thought we can have some fun with HTML these next few posts!
<html>Basic outline of website</html>
Before we try out any of the fun new features of HTML, let’s first design the basic website:
<html>
<body>
<h1>Michael Plays Around With HTML</h1>
<h2>In this website, Michael will play around with some cool HTML Easter eggs!</h2>
</body>
</html>
Simple enough website outline, right? Here’s what it looks like (on Chrome):
<body><h1>One thing I should note</h1></body>
Before we explore some cool HTML Easter eggs, I think this is worth mentioning. Back in my original series of HTML/CSS content, I was using Atom Text Editor to help me create my content. However, Atom Text Editor reached end-of-life in December 2022. This means that while you can technically still use Atom for your HTML/CSS needs, you would need to work with an older version as no new updates/patches will be released for Atom.
With that said, from here on out, I’ll be using Microsoft Visual Studio Code for any HTML/CSS lessons (it’s not the same thing as Microsoft Visual Studio that I used for my recent C# content). Here’s the link to install it-https://code.visualstudio.com/-like Microsoft Visual Studio, this software is open-source.
Also, once you’ve installed Microsoft Visual Studio on your device and have your code set up, here’s how to run the code:
On the ribbon on the top of the screen, click the Run button and you can either select Start Debugging (F5 shortcut key for Windows devices) or Run Without Debugging (CTRL + F5 shortcut key for Windows devices).
<p>The juicy HTML Easter eggs</p>
Now that we’ve got a very basic website, let’s have some fun with HTML easter eggs, shall we?
First off, let’s add an HTML color picker to our webpage:
<label for="colorpickertest">First, pick a HEX color, any color:</label>
<input type="color" id="colorpickertest" value="#ff0000">
As you can see, below the header that begins In this website..., I added a color-picker along with the label First, pick a HEX color, any color:.
One thing to note about the color-picker (denoted in the <input> tag)-you can use any color as the default, but it must be in HEX format. I used my favorite color red, which is represented in HEX code as #FF0000. If you don’t specify a default color that you’d like to use, black (HEX code #000000) will be the default color.
Even though the default color you want to use for the color-picker must be in HEX format, the color picker itself gives you the option of viewing colors in HEX, RGB or HSV formats.
For a refresher on color systems in programming, please check out my post Colors in Programming.
<datalist>Autocomplete
The next HTML Easter egg we’ll explore is the use of auto-complete:
<p>Which Marvel character is your favorite?</p>
<input list="heroes">
<datalist id="heroes">
<option>M'Baku</option>
<option>Mordo</option>
<option>Maximoff</option>
<option>Magneto</option>
<option>Malekith</option>
<option>Mantis</option>
</datalist>
In this example, I have a seemingly-ordinary HTML dropdown with the header Which Marvel character is your favorite? followed by the names of six random Marvel characters.
However, when I type Ma into the search bar, I see the dropdown auto-populate with the names of the four Marvel characters in the list that start with Ma (sadly I couldn’t grab a screenshot of this).
As impressive as it might be, unfortunately I cannot program the autocomplete to gather your whole search history. I don’t have the AI capabilities of Google, but wouldn’t that be something?
<p>Feel free to write anything</p>
Now if you have a basic grasp of HTML, you’ve probably seen the </p> tag. However, let me show you something cool you can do with the <p> tag:
<p contenteditable="true">Feel free to edit this content.</p>
This is just like the regular <p> tag in the sense that you can create regular HTML paragraphs, but with one notable exception in the form of contenteditable. Adding this parameter to the <p> tag and setting its value to true will create a freeform text space, where you can edit the paragraph as much as you’d like.
Honestly, I think it’s a good idea to include the placeholder text (Feel free to edit this content in this example) as a default.
Now, here’s the paragraph with the default text:
And here’s the paragraph after I edit the text:
Pretty neat, eh?
<progress> & <meter>
For my last pair of HTML Easter eggs, let’s explore the <progress> bar and <meter> bar.
As you can see, we have a simple blue progress bar that appears to be 39% filled. How did I make the progress bar look like its shown on the webpage? In the <progress> tag, I set the value of the <value=> parameter to 39 and the value of the <max=> parameter to 100.
In this example, I created a <meter> with five parameters-the id (linking the meter to the above <label>), the min (lowest possible value for meter), the low (along with min, represents lower end of meter range), the high (represents higher end of meter range), and the max (highest possible value for the meter).
The <meter> tag acts similarly to the <progress> tag in the sense that both, in a way, represent percentages of something (whether phone charge, grade, you name it). However, one thing that sets the <meter> tag apart is that it can change its color based on its current value.
Let’s demonstrate the color-changing ability of the <meter> on the same code snippet:
Since I changed the meter’s value to 0.66, the color changed to green. This effect will only work if you have a low and high value defined, as the meter’s green display will only work if the current value is between a defined low and high value.
Just to note-using min="0" low="0.15" high="0.85" max="1" value="0.66" or min="0" low="15" high="85" max="100" value="66" would have the same effect on the meter.
Michael here, and today’s lesson is all about basic helper classes in Bootstrap. Well, in my previous lesson Bootstrap Lesson 4: Jumbotrons and Image Carousels I briefly mentioned Bootstrap helper classes when creating Jumbotrons. In this post, I want to spend some time explaining how the helper classes I mentioned in my previous post work.
What are Bootstrap helper classes exactly? Well, they’re the special classes in Bootstrap that allow you to set features such as color and padding, among other things. To better explain Bootstrap helper classes, I’ll use my examples from my previous post (the post linked above).
Padding and margin classes
Let’s start off by exploring Bootstrap padding classes. But before we do that, let’s take a look at this code from my previous post used to create a basic Bootstrap Jumbotron:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-black">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll</p>
</div>
</body>
</head>
Pay attention to the p-5 line. The p-5 line-or rather, any line that begins with a p, denotes padding for an element (in this example, the Jumbotron)-the p helper class allows you to change the element’s padding.
Bootstrap also has an m helper class, which allows you to change the element’s margins.
In case you forgot the difference between padding and margins, padding is the space between an element’s border (whether visible or not) and the element’s content-like this Jumbotron’s border and it’s content. On the other hands, margins are the space around an element’s border-like the space between the Jumbotron’s border(s) and the edge(s) of the webpage.
Now, two important things to know about padding and margin classes are the ability to set the size and locations of the padding and margins.
Bootstrap has seven options to set the location of the padding and margins:
t-set the margin or padding to the top side of the element
b-set the margin or padding to the bottom side of the element
l-set the margin or padding to the left side of the element
r-set the margin or padding to the right side of the element
x-set the margin or padding to both the left and right sides of the element
y-set the margin or padding to both the top and bottom sides of the element
blank-set the margin or padding to all four sides of the element
Bootstrap also has seven options to set the size of the padding and margins:
0-include no margins or padding
1-set the margins or padding of the element to 0.25 pixels (by default)
2-set the margins or padding of the element to 0.5 pixels (by default)
3-set the margins or padding of the element to 1 pixel (by default)
4-set the margins or padding of the element to 1.5 pixels (by default)
5-set the margins or padding of the element to 3 pixels (by default)
auto-auto-sets the padding of any element (only used if the element’s margins are set to auto)
To set the location and sizing of an element’s margins or padding, follow this syntax: [m/p][location]-[sizing]. The m or p will always come first to indicate whether you want to add margins or padding to the element, then the location of the margins/padding will be listed. If you want to specify a sizing for your margins/padding (other than the default sizing), the sizing of the margins/padding will be listed after the hyphen.
Pay attention to the lines mt-4 and p-5 from the above example. The line mt-4 sets the Jumbotron’s top margins to “4” (1.5 pixels). The line p-5 set’s the Jumbotron’s padding to “5” (3 pixels). Notice how there isn’t another letter in the p-5 line; because of this, the padding is set to 3 pixels across all corners of the element rather than just a single corner.
Background classes
Next, we’ll explore Bootstrap background helper classes, which are denoted with bg (for instance, bg-light in the above example).
The Bootstrap background helper classes serve as contextual classes that help give your background some more meaning. There are ELEVEN possible Bootstrap background helper classes, which include:
bg-primary-turns your background dark blue
bg-secondary-turns your background grey
bg-success-turns your background green
bg-danger-turns your background red
bg-warning-turns your background yellow
bg-info-turns your background light blue
bg-light-turns your background light grey
bg-dark-turns your background dark
bg-body and bg-white-turns your background white
bg-transparent-makes your background transparent
In the previous example, I used the bg-light helper class to give my Jumbotron a light background. Now, just for the heck of it, let’s see what the Jumbotron background would look like with a different style (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-info text-black">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll</p>
</div>
</body>
</head>
In order to give my Jumbotron the light blue color, all I did was change the bg class from bg-light to bg-info. Pretty neat stuff right?
In this example, I used three Bootstrap background helper classes (success, warning, and danger) to color in each row according to each AFC team’s playoff standings in 2021 (division clinched, wildcard, did not qualify for playoffs). Granted, I didn’t explicitly use the bg-success, bg-danger, and bg-warning background classes, but the idea is still the same-to color in the table rows according to a certain context.
Text helper classes
Last but not least, I want to explain text helper classes (such as the one you’ll see in the line text-black).
In the Jumbotron example, I used the line text-black to set the color of the Jumbotron text to black. Seems pretty self-explanatory, right? Well, the text helper classes-unlike the padding, margin, and background helper classes-are quite versatile, as there are several ways to modify Bootstrap text.
If you want to change the color of text using Bootstrap helper classes, you can only do so by writing the name of the color (so no HEX/RGB/other colorscale codes here)
Text alignment
The first such way to modify Bootstrap text-aside from changing the color-is by changing the text’s alignment. Let’s see how that would work with the Jumbotron from the previous post (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll</p>
</div>
</body>
</head>
First of all, you’ll noticed I changed the Jumbotron’s background class back to bg-light, but that isn’t too important here.
What is important here is how I changed the alignment of the text-in this case, I center-aligned all text in the Jumbotron. All I had to do was add the line text-center to center the text.
In case you’re wondering how to center-align the text and keep its black color, you’ll need to add text-center and text-black as separate lines. Trying something like text-center-black or text-black-center won’t work-while these lines won’t give you any errors, the text won’t be centered in your Jumbotron.
There are two other ways to align your text in Bootstrap-text-start and text-end, which will left-align and right-align your text, respectively.
Text wrapping
Next, let’s explore how to utilize text wrapping in Bootstrap. First off, let’s see an example of text wrapping in the Jumbotron (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black text-wrap">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
To show you how text-wrapping works in Bootstrap, I added a bunch of rambling text to the <p> tag of the Jumbotron to ensure it was long enough to wrap. To wrap the text, I simply added the line text-wrap to the Jumbotron’s <div class-="..."> tag.
If you didn’t want the text-wrapping in the Jumbotron, replace the text-wrap class with the text-nowrap class. Here’s what the Jumbotron would look like with no text-wrapping:
Interestingly, Bootstrap doesn’t try to squeeze all the text into the Jumbotron. Rather, the text spills outside the Jumbtron, so you’ll need to scroll across the window to read the entire document. Pretty user-unfriendly, amirite?
Text transformation
Next up, let’s explore text transformation in Bootstrap. But first, a little demo (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black text-wrap text-capitalize">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
In this example, I used the line text-capitalize to capitalize the text. However, text-capitalize doesn’t do what you think it might do-capitalize the entire text. Rather, text-capitalize only captializes the first letter of each word in the Jumbotron and leaves all other letters lowercase.
If you’re looking to capitalize the entire text, replace text-capitalize with text-uppercase. Similarly, if you’re looking to lowercase the entire text, replace text-capitalize with text-lowercase.
Font sizes
The next way you can modify your text in Bootstrap is through modifying font sizes. Before we discuss this, here’s a little demo for y’all (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black text-wrap text-capitalize fs-1">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
Unlike most of the other text modifications we’ve discussed, the text modification for font looks a little different since it uses the fs (font size) helper class-and yet, it still works to change the text’s font size.
In this example, I used the fs-1 helper class to change the Jumbotron text’s font size and as you can see, the fs-1 helper class makes the text quite large! Why might that be?
Well, there are six possible values for the fs helper classes-ranging from 1 to 6. fs-1 creates the largest text, while fs-6 creates the smallest text. Does this concept sound familiar to you? If so, it’s because HTML headers also have six possible values-ranging from 1 to 6, with 1 creating the largest header and 6 creating the smallest header.
Font effects
Now that we’ve dicsussed modifying the font size, let’s turn our attention to font effects in Bootstrap-things like boldening and italicizing the text. Take a look at the example Jumbotron code below (and pay attention to the highlighted text):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black fw-bold">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
In this example, I made all of the text on the Jumbotron bold with the line fw-bold (granted, that doesn’t seem to affect the <h1> tag’s appearance all that much). Simple, but pretty neat right?
Some other text effects you could use on your Bootstrap text include:
fw-normal-no text effect (this seems quite redunant to include if you ask me)
fw-light-light text
fst-italic-italicized text
fst-normal-normal font style text (also quite redunant, but Bootstrap includes it anyway)
fw-bolder-this will make the text bolder than its parent element
fw-lighter-this will make the text lighter than its parent element
As you can see, we’ve got several different text effects to use with Bootstrap text. As you can also see, there are TWO different helper classes for text effects-fw (font weight) and fst (font styling). The fact that text effects have two different helper classes is unique, as all of the other text modifications we’ve discussed and will discuss only have one helper class.
Line spacings
Next up, we’ll discuss line spacings in text. But first, a little demo with our Jumbotron (which you should be quite familiar with by now, and as always, pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black lh-lg">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
Just like the font size modification I previously discussed, the line spacing modifications don’t use the text helper class. Rather, the line spacing modifications use the lh (line height) helper class-as you can see from the above example, I use lh-lg to change the line spacing in my Jumbotron.
There are three other options to change the line spacing in Bootstrap text-lh-1 (which gives the smallest line spacing), lh-sm (which gives slightly bigger line spacing), and lh-base (which gives the default line spacing). lh-lg gives you the largest possible line spacing in Bootstrap.
Underline and strokethrough
Last but not least, let’s discuss how to add underlines and strokethrough effects to your Bootstrap text. Here are two demos on how to do just that, first with the underline effect (pay attention to the highlighted line of code):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black lh-lg text-decoration-underline">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
Now here’s what the same Jumbotron text would look like with a strokethrough effect:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-center text-black lh-lg text-decoration-line-through">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll. These are pretty awesome photos if you ask me. Just take a look at all the amazing scenery I managed to capture. Y'all should take a look. You won't believe what picture 3 looks like. I swear!</p>
</head>
In both examples, I use the text-decoration helper class to add some text decoration effects to the Jumbotron text. In this case, I added an underline effect with the line text-decoration-underline and added a strokethrough effect with the line text-decoration-line-through.
There’s also a third text decoration effect within the text-decoration helper class-text-decoration-none. However, this will only work with hyperlinks, as the text-decoration-none effect will only remove all text decorations within hyperlinks, so if you tried to use this effect on something like the Jumbotron from the above example, it won’t work.
Michael here, and it looks like we’ve got quite a lesson today-we’ll be covering Jumbrotrons and carousels in Bootstrap!
Now, let’s begin with some Bootstrap Jumbotrons!
Bootstrap Jumbotrons
What is a Bootstrap Jumbotron? If you answer anything like a Jumbotron you’d see in sporting arenas, you are sort of right. While Bootstrap Jumbotrons aren’t as gigantic as their sporting arena counterparts, the general idea of both Jumbotrons is the same-to emphasize and call attention to specific content (whether it be a cheering crowd or webpage content).
Now, here’s a little quirk about Bootstrap Jumbotrons-there’s no longer a special class to create them in Bootstrap. See, Jumbotrons were introduced in Bootstrap 3-with their own Bootstrap class-as big padded boxes used to call attention to special webpage content. However, the Jumbotron class was phased out by Bootstrap 5 BUT even with that being said, you can still create Jumbotrons in Bootstrap through a clever combination of <div> tags and special Bootstrap classes. Let’s take a look at the code below to see how we can replicate a Jumbotron in Bootstrap 5:
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<div class="mt-4 p-5 bg-light text-black">
<h1>Michael's photos</h1>
<p>Photos of me from my phone's camera roll</p>
</div>
</body>
</head>
The line mt-4 p-5 bg-primary text-white rounded is made up of a combination of several different Bootstrap helper classes, which I’ll cover in future Bootstrap posts.
As you can see, using several Bootstrap helper classes (along with an <h1> and <p> tag), I managed to replicate a Bootstrap Jumbotron. Pretty simple stuff right?
Now that Jumbotrons have been covered, let’s move on to our next topic for today-Bootstrap carousels.
Carousels
No, we’re not going to ride the state fair’s merry-go-round here today (though wouldn’t that be fun). Rather, we’re going to discuss the image carousel, which is a feature used in webpage design that serves as a slideshow (or “carousel”) of images.
How would we implement the carousel in Bootstrap? Pay attention to the highlighted section of code below:
Yes, I did change the Jumbotron message from the previous example, but that’s irrelevant here.
The carousel elements, explained
So, how was I able to create the carousel? First, pay attention to the <div id="demo" class="carousel slide" data-bs-ride="carousel"> line. This line creates the carousel by using the Bootstrap class carousel slide and initializes the carousel with the data-bs-ride="carousel" line; the purpose of including this line is to include the ability to jump from image to image in the carousel.
The four following lines of code create buttons that allow you to jump from image to image on the carousel. Pay attention to this chunk of code-data-bs-slide-to="0", as it’s repeated four times-one for each of the four images I’ve included in this carousel. The only difference in the four instances of this line is that “0” is replaced with “1”, “2”, and “3”, which allow you to naviagate to the second, third, and fourth images in the carousel, respectively. Also, in the line of code to create the first button (the line that contains data-bs-slide-to="0"), you’ll also see a chunk of code that says class="active"-this indicates the carousel’s default image (in other words, the first image you’ll see on the carousel when you open the webpage).
Why is the value of the first data-bs-slide-to set to 0 while the value of the last data-bs-slide-to set to 3, even though there are four images in the carousel? This is because, when building a Bootstrap carousel, 0 refers to the first image-thus, 3 would refer to the fourth image. Zero-indexing system at work, much like in Python!
After adding the buttons, you’ll need to add another div class-carousel-inner. This is the fun part of the carousel, as this section of code actually adds your images to the carousel. All images except for the default image must have the class carousel-item, though the default image must have the class carousel-item active; this way, Bootstrap knows which image to display upon a user’s arrival to the webpage.
As for the image source (or src), if you have your images in the same directory as your HTML/CSS code, all you need to do to include the image onto the carousel is write src="[image name].[image extension]". If your images are in a different directory than your HTML/CSS code, you’ll need to include the image’s whole file path in the src parameter.
After including the images, the last thing you’ll need to add to the carousel are the Back and Next buttons, which can be accomplished with the carousel-control-prev and carousel-control-next classes and their corresponding <span> tags. Why do each of these classes need their own <span> tags? All the carousel-control-prev and carousel-control-next classes do is add the functionality to go back and forth in the carousel. However, simply having the functionality to go back and forth isn’t enough on its own-after all, how can you expect the user to navigate back and forth in the carousel if they don’t want to use the tiny rectangular buttons on the bottom of the carousel? That’s where the <span> tags come in, as they link to the aforementioned functionalities to display two icons on the center-left and center-right hand sides of the carousel to allow the user to easily navigate back and forth through the carousel.
Honestly, you only need either the small rectangluar buttons or the Back and Next buttons in the carousel-you don’t absolutely need to include both elements. The only reason I did so is to teach you guys the basics of developing a Bootstrap carousel. Also, keep in mind that the differences between the small rectangular buttons and the Back/Next buttons is that the former option will allow you to jump all across the carousel (which can certainly help if you’ve got lots of images) while the latter option will only allow you to naviagate through the carousel one image at a time.
Re-sizing the carousel
Now, as you may have noticed from running the code, the carousel is looking a little big on the display. Let’s fix the sizing and fit the carousel to the screen with a little CSS magic:
By the way, this screen shot above is zoomed in at 100%.
Remember to save your CSS code in a CSS file and link it to your HTML/Bootstrap code-it would also be ideal to give your CSS file the same name as your corresponding HTML file.
Why would we need to set the height of all carousel elements (along with the larger HTML and body elements) to 100%? Doing so will ensure that all carousel elements fit within the entire screen without cutting off portions of the carousel.
Now, even though I said the carousel can now fit to screen once this CSS code has been added, you’ll notice that the CSS carousel doesn’t quite fit to screen. How do we fix this? Remove the Jumbotron!
Now the carousel fits within the screen 100% with no need for scrolling!
Carousel captions
Last but not least, let’s discuss how to add captions to the carousel. Honestly, the carousel looks great so far, but what would really improve it (and in turn, improve the user experience) are captions for each image to give the user an idea of what they’re looking at.
How would we add captions to the carousel? Take a look at the highlighted sections of code below:
The carousel sure is looking much nicer, isn’t it? After all, now the users know exactly what they are looking at. Without the captions, the users would’ve assumed that the four pictures above were of random outdoor spaces.
How did I get the captions on each slide of the carousel? Easy-below the line where you insert the image (the line with the <img> tag), insert another <div> tag and set the class as carousel-caption, which indicates that you’d like to add some captions to a particular slide.
As you can see in the above example, I added a <div class="carousel-caption"> line four times. If you’ve got multiple images you’d like to add captions to, you’ll need to add the <div class="carousel-caption"> line for each image.
Inside the <div class="carousel-caption"> tag, you can add the caption by using as many standard HTML tags as you wish (I used the <h2> and <p> tags). Keep in mind that the more HTML tags you use, the more lines the image’s caption will have.
If you want to code-along with this tutorial, any four JPG images will work. If you wish to use the images I used, you’ll find the links to download each image below.
Michael here, and today’s lesson will cover typography and tables in Bootstrap.
Bootstrap typography
Now, before I show you how to work with tables in Bootstrap, let’s first discuss Bootstrap typography, because it works a little different than your standard HTML/CSS typography.
Take a look at the font used on our first Bootstrap website (from the previous lesson):
Bootstrap uses a default Arial-like size-14 pixel font, as seen in the photo above. However, the size-14 pixel font is just a framework-wide default, as it’s applied to any element inside a <body> or <p> tag. The six main HTML headings <h1>–<h6> utilize the same Arial-like font, however the text sizes for each main HTML heading are as follows:
<h1>-size-36
<h2>-size-30
<h3>-size-24
<h4>-size-18
<h5>-size-14
<h6>-size-12
And if you don’t like the default Bootstrap typography, you can always change it with a little CSS, as shown below:
h1{
font-family: "Times New Roman";
font-size: 40px;
color: "red"
}
And remember to link your CSS file to your HTML file (see line highlighted in red):
To make things easier on yourself, give your CSS file the same name as your corresponding HTML file. For instance, since I named my HTML file BootstrapSite.html, I named my connected CSS file BootstrapSite.css.
And here’s the site with the changed font:
Tables
Now that we’ve discussed Bootstrap typography, let’s move on to Bootstrap tables. How do you create a table in Bootstrap? Take a look at the code below, which shows you an HTML table without any Bootstrap:
As you can see, I have created a simple table in HTML, but with no Bootstrap applied. As a result, the table displays just fine, but doesn’t look all that great. How can we fix this? Apply a little Bootstrap, of course (hey, this is a Bootstrap lesson after all)! Pay attention to the highlighted lines of code to see how you can apply a little Bootstrap magic to your HTML table (note-there is no CSS code attached here):
In order to apply Bootstrap stylings to my HTML table, I wrapped the code for my HTML table inside a <div> tag and specified which one of Bootstrap’s table stylings I’d like to apply-in this case, I chose the basic table styling table and specified the styling in the line <div class="table">.
Oh, but here’s the fun part about Bootstrap table stylings! Bootstrap has 7 different ways you can style your table, six of which include:
table-Just a plain Bootstrap table (like the example above)
table-striped-Gives the table “zebra stripes” (alternating grey and white rows)
table-bordered-Adds a border around all sides of the table and around all cells
table-hover-Any rows that you hover over turn grey
table-condensed-Makes a table more compact by reducing cell padding by half
table-responsive-Allows you to scroll through the table horizontally on small devices (anything less than 768 pixels wide); for devices wider than 768 pixels, there is no difference in how the table is displayed
To give your HTML table any of these stylings, wrap the HTML table code inside a <div> tag and use this syntax to apply the Bootstrap styling-<div class="Bootstrap table styling">.
Now, notice how I said you can choose seven different Bootstrap table stylings for your HTML table, but I only mentioned six stylings above. That’s because the seventh styling doesn’t involve wrapping your HTML table code in a <div> tag. Rather, the seventh styling comes in the form of contextual classes, which are table stylings that you can apply to individual table rows (<tr> tag) or table cells (<td> tag).
As you can see, we have created a colorful table showing 2021 NFL AFC (American Football Conference for those unaware) standings for all 16 AFC teams using Bootstrap’s contextual table classes. How did we accomplish this?
In this example, I used the success class for the top 4 rows, which indicates the four AFC teams that won their divisions last year. To apply the success class styling to the first four rows of this table, I used the line <tr class="success"> before the table row code for each of these rows. I then applied the same logic to style the rows for the wildcard teams (seeds 5-7) and the teams that didn’t make playoffs last year (seeds 8-16), except I replaced the success class with the warning and danger classes, respectively.
Another thing I’d like to note-I’ve used Atom text editor for my HTML, CSS and Bootstrap lessons, however Atom text editor will be retired by GitHub on December 15, 2022. You’ll likely still be able to download it after that date, but it won’t be updated anymore. If you’re looking for a new IDE for your web development, Sublime Text Editor and Microsoft’s Visual Studio Code are great text editors.
Michael here, and in today’s lesson, I’ll introduce a new programming tool-Bootstrap (the eigth programming tool I’ll cover in this blog).
What is Bootstrap exactly? Well, to put it simply, Bootstrap is an HTML/CSS/JavaScript web development tool that allows you to create mobile-friendly, easily responsive websites.
Now, you may be wondering if this means you’re going to be learning a whole new language with all new syntax. The good thing about Bootstrap is that, while I will introduce some new syntax to you all, it is very easy to understand if you’ve got at least a working knowledge of HTML and CSS (so if you’ve followed my HTML and CSS lessons, you should be good to go here). If it helps, think of Bootstrap as a supplement to HTML and CSS.
Now, how do we get started with Bootstrap? First, we’re going to start by downloading the lastest version of Bootstrap (as of September 2022)-Bootstrap 5-from getbootstrap.com.
Did I say downloading Bootstrap? You could do that, but there’s a much more convinient workaround. In your HTML file, copy these two lines of code into your document:
These two lines of code will give you all the CSS and JavaScript scripts you’ll need to run Bootstrap (and yes, you’ll need both scripts to get the most out of Bootstrap).
About these two lines of code-you’ll need them every time you want to use Bootstrap for your website, as your websites won’t run on Bootstrap if you don’t include these two lines of code on top of your HTML file
Now, let’s create our first Bootstrap website! Take a look at the code below (and remember to include the two lines of code I just mentioned at the top of the file):
<!DOCTYPE html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<head>
<body>
<h1>Here's your first Bootstrap site!!!</h1>
</body>
</head>
As you can see, we have created a simple Bootstrap site. Granted, there’s not much content or CSS stylings on the site but don’t worry-we’ll cover more cool Bootstrap features in the next few lessons!
Michael here, and today’s post will discuss how to incorporate CSS margins and padding into your webpage.
What do margins and padding do, exactly? Well, in the context of CSS development, margins are used to create space around webpage elements outside of predefined borders. In other words, if there are some elements that you’d like to surround with some whitespace, using a margin would be perfect.
Let’s explore how margins work by first taking a look at the HTML form code we’ve used for every CSS lesson in this series thus far (the CSS stylings not including the borders from the previous lesson will remain intact here):
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Form.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
Great. Now let’s say we wanted to add a little margin to the Flight finder: header. Take a look at the highlighted line of CSS code to see how you can accomplish this:
To add a margin to the Flight finder: header, I added a styling call to the h1 declaration that uses the margin property and sets the value to 30px-this adds a 30px margin around all sides of the Flight finder: header.
Look, I know margins aren’t as obvious to detect as borders but trust me, they’re there. If it helps, think of margins as a sort of invisible border around a certain HTML element(s).
Margins are always measured in px (pixels). Always append the px suffix to whatever you want to use for the margin measurement.
Also, even though I mentioned that you could think of margins as “invisible borders”, you can’t set colors or line styles for margins (after all, margins are invisible, so therefore you won’t even see any colors/line styles). However, margins, like borders, have four sides-you can have four different margin sizes if you so choose (just like you can have four different border line stylings). More on this point later.
So, know how I mentioned that similar to how you can have up to four different border line stylings, you can also have up to four different margin sizes. Let’s see an example of this in the highlighted line of CSS code below:
In this example, I used four different margin lengths-30px 10px 20px 40px-to denote the four different margin sizes I’d like to use. Notice anything familiar about the highlighted styling call? The way I listed the margin lengths is the same way I used to list different border stylings in the previous lesson (CSS Lesson 4: Webpage Borders)
Just to reiterate the logic I used in the previous post (but in the context of margins):
If margin has four values:
Example: margin: 10px 50px 20px 40px
How it would work: top margin of 10px, right margin of 50px, bottom margin of 20px, left margin of 40px
If margin has three values:
Example: margin: 10px 50px 20px
How it would work: top margin 10px, right and left margins 50px, bottom margin 75px
If margin has two values:
Example: margin: 10px 50px
How it would work: top and bottom margins 10px, right and left margins 50px
If margin has one value:
Example: margin: 10px
How it would work: all margins 10px
Ideally, try to maintain even margins for your elements. Having all margins the same length is fantastic, but the 2-2 rule (which I made up) works just as well-top and bottom margins set to the same length, and left and right margins set to the same length but different than the length of the top and bottom margins.
If you want to set margin lengths for each side of a margin around an element, using the margin-top, margin-bottom, margin-left and margin-right properties would work too; however, this is less efficient than utilzing the multiple margin lengths logic I discussed above.
Sounds pretty easy, right? However, keep in mind that there’s another possible value for margins-auto. Using the auto value on an element will horizontally center it. Take a look at how it’s used (through the highlighted line of code):
In this example, I set the value of the h1 element’s margins property to auto, which automatically horizonatally centers the h1 element in the webpage.
Personally, if you want the webpage looking as neat as possible, auto would be the way to go when working with your margins. Also, unlike with prespecified margin lengths (e.g. 10px, 50px), you can’t repeat auto several times. So a styling call like margins: auto auto auto auto won’t work.
Now that we’ve explored margins, let’s take a look at padding. Padding and margins are conceptually similar since both features are meant to create space around an element (or elements) in your webpage. However, margins create space around an element outside of a defined border, while padding creates space around an element INSIDE of a defined border. Let’s take a look at a basic example of padding (using the highlighted line of code below):
In this example, I applied a padding of 30px (like margins, padding values are also specified in px or pixels) to the elements in the .container class-the last two lines of text on the webpage. This creates whitespace of 30px between the elements and each side of the border.
Now, can you specify multiple padding lengths similar to how you can specify multiple border stylings or margin lengths? Yes. Does the logic for specifying mutliple padding lengths work the same as it would for specifying multiple border stylings or margin lengths? Also yes. Let me explain below:
If padding has four values:
Example: padding: 25px 30px 10px 50px
How it would work: top padding 25px, right padding 50px, bottom padding 10px, left padding 50px
If padding has three values:
Example: padding: 25px 30px 10px
How it would work: top padding 25px, right and left paddings 30px, bottom padding 10px
If padding has two values:
Example: padding: 25px 30px
How it would work: top and bottom paddings 25px, right and left paddings 30px
If padding has one value:
Example: padding: 25px
How it would work: all paddings 25px
While discussing CSS margins, I did mention another approach to setting multiple margin lengths-using the margin-top, margin-left, margin-bottom, and margin-right properties to set the top, left, bottom, and right margin lengths, respectively. You can do something similar with padding lengths using the padding-top, padding-left, padding-bottom, and padding-right properties, respectively, but it would be much more efficient to use the multiple-padding-lengths-in-a-single-line approach that I discussed above.
Just like with margin lengths, I don’t recommend setting four (or even three) different padding lengths, as this would make the element spacing look really uneven. One or two padding lengths would work just fine (preferably a single padding length).
You may be able to hide uneven margin lengths better than you can hide uneven padding lengths, as margins are utilized outside of defined borders while padding is utilized inside of defined borders. Therefore, uneven padding is more obvious to see to visitors of your website.
Lo and behold, you can utilize the auto property on padding too in order to horizontally center your element withing a border. Same rules from applying the auto property to margins are in place here (e.g. the styling call padding: auto auto auto auto) won’t work. Here’s how utilizing the auto property for padding would work here (pay attention to the highlighted line of code):
Michael here, and today’s lesson will cover how to use CSS borders on your webpage.
When you are designing your HTML website, borders are crucial design elements.
First off, let’s start by exploring CSS borders. To do that, let’s use the form we’ve been using for my CSS lessons (minus the background image from the previous lesson):
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Form.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
Great, so we have the form webpage (along with the corresponding code) here. Now, let’s say we wanted to add a simple CSS border to the last two lines of text (the ones in red). How would we do so? Take a look at the highlighted line of CSS code below:
To add a CSS border to an element on the form, simply add a border-style styling call and set any of the following values for border-style:
dotted-creates a dotted line border
dashed-creates a dashed line border
solid-creates a solid line border
double-creates a double border
groove-creates a 3D grooved border
ridge-creates a 3D ridged border
inset-creates a 3D inset border
outset-creates a 3D outset border
none-creates no border
hidden-creates a hidden line border
In this example, I set the value of the border-style property to solid, which creates a solid red border on the last two lines of text on this webpage.
Now, what if you wanted a thicker or thinner border? Let’s see how we can change border thickness (look at the highlighted section of code below):
As you can see, I managed to make the border slightly thicker than it was before. How did I manage to do this? I added another styling call to the .container declaration that contains the property border-width and has a value of 6px (border thickness in CSS is always measured in px or pixels).
Remember that the value of the border-width property must always contain px at the end and a number at the beginning (e.g. 6px in this example). And don’t wrap this value in quotes-it’s not a string!
Now, as you may have noticed from the previous two examples, the border around the last two lines of text is red-this is because the border color will default to the color of the elements it contains, and since the text inside the border is red, the border itself will also be red.
Let’s say we wanted to change the aforementioned border’s color from red to green. How would we accomplish this? Take a look at the highlighted line of code below:
To change the border’s color, I simply added another styling call to the .container declaration; in this call, I used the border-color property and set this property’s value to green to change the border from red to green.
Using a HEX code, RGB code, HSL code, or the keyword transparent would have worked here too. However, using simple color names (e.g. red, blue, orange) always works with the border-color property, especially if you want a basic color.
So, having fun exploring the several different ways we can play with CSS borders? If so, great, but we’ve got one more thing to explore.
In case you weren’t aware, you can apply more than one styling to a border. Curious? Well check out the highlighted line of code below to see how you can apply multiple different stylings to a CSS border:
As you can see here, I created a border with two different stylings (solid on the top and bottom and dashed on the left and right). How did I accomplish this? I set the value of the border-style property to solid dashed, which will tell CSS to create a border that is dashed on two sides and solid on the other two sides. To set multiple different stylings for the border, simply list the styles you want for the border and separate the names of each style with a space. That’s it-and you can have between one and four styles for your border. Here’s how the multiple border stylings trick works in CSS:
Four border stylings:
example: border-style: dotted dashed solid ridge
how it works: top border dotted, right border dashed, bottom border solid, left border ridge
Three border stylings:
example: border-style: dotted solid groove
how it works: top border dotted, right and left borders solid, bottom border groove
Two border stylings:
example: border-style: solid dashed
how it works: top and bottom borders solid, left and right borders dashed
One border styling:
example: border-style: solid
how it works: all borders solid
Pretty neat stuff right? Just wait until you see that similar logic for the multiple border stylings trick also works to apply multiple border colors. Check out the highlighted line of code below:
And here’s what the webpage looks like with the multiple border colors applied:
How did I generate a red and green border? I simply added another styling call to the .container declaration that used the border-color property along with two color values separated by a space-red green (similar to what I did with the multiple values for the border-style property). The highlighted line of code above tells CSS to make the top and bottom borders red and the left and right borders green.
You’ll notice that I used both the border-color and color properties in the .container declaration. Note that you can’t use these properties interchangeably-color sets the color of the elements in the .container declaration (the last two lines of text on this webpage) while border-color sets the color of the border around the aforementioned elements.
Also, just as with multiple CSS borders, you can apply between one and four different border colors to your border. Here’s how the multiple border colors trick would work in CSS:
Four border colors:
example: border-color: red orange green blue
how it works: top border red, right border orange, bottom border green, left border blue
Three border colors:
example: border-color: red orange green
how it works: top border red, right and left borders orange, bottom border green
Two border colors:
example: border-color: red orange
how it works: top and bottom borders red, left and right borders orange
Michael here, and today’s lesson will cover basic principles of using backgrounds in CSS.
Just as I did for my previous CSS lessons, I’ll use the sample form I created in HTML for this lesson. Here’s the code for the form:
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Form.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
And here’s the CSS styling code we’ll use (I’ll keep the styling I applied at the end of CSS Lesson 2: Fun with Fonts):
h1{
color: green;
font-family: "Comic Sans MS";
font-size: 40px;
text-align: center
}
.container{
color: red;
font-family: "Press Start 2P";
font-size: 30px;
text-align: center
}
Here’s what the webpage looks like with the current styling:
Now, how would we add some background styling to the webpage. Take a look at the highlighted segment of code below:
h1{
color: green;
font-family: "Comic Sans MS";
font-size: 40px;
text-align: center
}
.container{
color: red;
font-family: "Press Start 2P";
font-size: 30px;
text-align: center
}
body{
background-color: #87CEEB
}
To set a background color for the webpage, use the body selector and inside the selector, call the background-color property and set the value of this property to a certain color, which can take one of these three forms:
a conventional color name (e.g. red, yellow, green)
a color HEX code (e.g. #87CEEB)
a color RGB code (e.g. rgb(123, 10, 88))
In this example, I specified the backround color with a hex code-#87CEEB. In case you’re wondering, this hex code produces a sky-blue background (heck, I thought it was appropriate given that this a form for an imaginary airline). Here’s what the webpage looks like with the background styling applied:
If you want to apply a background color to the entire webpage, always use the body selector!
When specifying a HEX code color, don’t wrap it in quotation marks.
So, the background looks great, but all the input elements in the form could use some more styling as well. How should we approach this? Take a look at the CSS code below and pay attention to the highlighted section:
Here’s what the webpage looks like with the additional styling:
Yes, you can give background stylings to elements other than the main webpage as I did here with the input elements. To style the input elements, I created a CSS styling call with input as the selector and background-color: #00FFFF as the styling call that will change the background color of the input elements.
#00FFFF refers to cyan by the way. I thought it would be an appropratie color given that this is a form for an (imaginary) airline.
Alright, the webpage looks great so far! However, what if you wanted to use a picture for the background rather than a color? How would you go about doing this? Take a look at the highlighted section of the code below:
To add the stock photo to the website, use CSS’s background-image property and set the value of this property to url(image name.image extension); in this example, the value of the background-image property was url('stock photo.jpg'), since I had saved this stock photo of a plane onto my computer as stock photo.jpg (creative, I know).
If you want to succesfully connect your chosen background image to your HTML webpage, wrap the name of your image (as it’s saved on your computer) inside a url() function. Also, wrap the name of your image in quotes (whether single quotes or double quotes) as I did in the above example.
Once I set the form’s background-image property, the webpage’s background image changes to the stock photo of a plane I saved onto my computer.
Looks pretty good, right? Well, there’s one thing we can fix-if you’re thinking of the fact that the stock photo is repeated several times throughout the webpage (both vertically and horizontally), you’d be right. Yes, there’s a simple fix to the repeating background image issue, and all it takes is a single line of code. Check out the highlighed section of the code below:
To ensure the background image doesn’t repeat, I added the background-repeat property to the body styling call in the CSS file and set this property’s value to no-repeat to tell my CSS code to only display the background image once.
If I only wanted to repeat the background image horizontally, I could set the value of the background-repeat property to repeat-x. Likewise, if I only wanted to repeat the background image vertically, I could set the value of the background-repeat property to repeat-y.
Alright, the webpage is looking better, but we’ve still got another issue-the background image only covers the top-left corner of the webpage when it should ideally cover the whole webpage. How would we fix this issue? Take a look at the highlighted section of the CSS code below:
Just as I did with the background-repeat property, I managed to fix the background image display issue with a single line of code-in this case, background-size: cover. What this single line of code does is utilize CSS’s background-size property to change the size of the background image to cover, which will stretch the background image to cover the whole webpage. Pretty neat what you can do with a single line of code is CSS, amirite?
If you set the size of a background image to cover keep in mind that the image will likely either stretch or be slightly cut off.
So, the webpage is looking a lot nicer! However, before I go, let me leave you with these web background design tips:
When picking a background (whether its a color or an image), pick something that doesn’t clash with the webpage’s text too much. If you like your choice of background but find that it clashes with the text too much, change the color scheme of the text.
Now that I think of it, the last two lines of text on this webpage somewhat clash with the background image. But then again, this is for a programming lesson, not a production-ready website.
Also, if you’re creating a webpage for a business (not for a programming lesson), PLEASE PLEASE PLEASE don’t use stock photos. It just looks unprofessional and fakey.
Michael here, and today’s lesson will explore working with fonts in CSS.
Choosing the right font, just like choosing the right colors, is an important element in website styling. For our exploration of CSS fonts, let’s take a look at the form we styled in CSS Lesson 1: Introduction to CSS Styling. Here’s the form’s HTML code along with the screenshot of the form (keep in mind that this form code isn’t connected to a CSS file):
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
OK, so now that we know what the unstyled version of the form looks like, let’s start having some fun with (CSS) fonts. Just as we did for the previous CSS lesson, I’d suggest creating a new CSS file and giving it the same name as your HTML file-in this case, I’ll call the CSS file Form.css since my HTML file is called Form.html.
Before we start examining how to work with fonts in CSS, let’s familiarize ourselves with the concept of font families. CSS has five different font families, which are categories of fonts with their own distinct features; here are the five different font families:
Serif-these fonts have a small stroke at the edge of each letter (example: Times New Roman-the font I’m using for this blog)
Sans-serif-these fonts have no small strokes at the edge of each letter (example: Arial)
Monospace-these fonts have letters of equal width (example: Courier New)
Cursive-these fonts are meant to look like human handwriting, namely cursive handwriting-remember learning that in school? (e.g. Comic Sans)
Fantasy-these fonts are meant to be decorative (e.g. Papyrus)
For those of you who’d like a visual depiction of the five CSS font families, refer to the picture below:
Now that we discussed the five CSS font families, let’s see how we can apply font stylings to our webpage. Let’s start the font styling by first changing the font of the top header (Flight finder:)
h1{
color: green;
font-family: "Comic Sans MS";
text-align: center
}
To style the top header, I applied a series of CSS styling calls to the <h1> tag, as it contained the Flight finder: header. Aside from changing the font of the <h1> tag, I also changed the tag’s color and center-aligned the text. Take a look at the series of CSS styling calls I applied to the <h1> tag. Which styling call do you think changes the font? If you thought it was the styling call with the font-family property, you’d be right. In order to change the font of a certain element, you’d need to make this styling call: font-family: "[font you'd like to use]". Yes, you would need to wrap the name of the font you’d like to use inside double quotes as I did for the font name I used in this example.
When deciding on font stylings for your webpage, Comic Sans is the last font I’d use if I was designing a webpage for a business since Comic Sans is generally seen as unprofessional. However, if you’re just designing a webpage to follow along with my tutorial, let your imagination run wild with the font stylings!
Now, what if you wanted to change the font size of the <h1> tag? Take a look at this series of styling calls below:
h1{
color: green;
font-family: "Comic Sans MS";
font-size: 40px;
text-align: center
}
In this example, I used the font-size property to change the font size of the <h1> tag to 40px (40 pixels). Whenever specifying a font size, always follow this syntax-font size + px. Don’t forget to put the px after the number!
Now, let’s change the font of the last two lines of text on this page. Here’s how to do so (in this example, we’ll change the font to Century Gothic):
In this example, note that I kept the same font styling for <h1> that I had applied in the previous example. Aside from that, pay attention to the code above that I used to change the styling for the last two lines. Recall that from my previous CSS lesson (CSS Lesson 1: Introduction to CSS Styling) that the dot (.) is used as one of the main selectors in CSS; selectors tell CSS to select a certain element to style. In this example, the dot selector tells CSS to style all elements within a container class-if you take a look at the form code that I shared at the beginning of this post, you’ll notice that the last two lines of the webpage are contained in a <div> tag with the class container. Thus, when I applied the series of CSS styling calls to the container class, the stylings were applied to the last two lines of text on this webpage.
As for the stylings I applied, I simply made the text red and center-aligned along with using a size 30 Century Gothic font.
Now, let’s say instead of using common CSS fonts (e.g. Arial, Times New Roman), you wanted to get a little creative with your CSS styling. In this example, let’s say you wanted to pull a font from somewhere else-we’ll use a font from the Google Fonts API (here’s the link to the API, which contains a catalog of thousands of fonts-https://fonts.google.com/).
Here’s the homepage of the Google Fonts API:
If you scroll down further on the page, you can see thousands of freely-available fonts for your website’s use.
In case you’re wondering why you see the sentence This is the year 2022 several times on the homepage, it’s because in the box to the right of the font size slider (currently set to 40px), you can type in a word or phrase and see what that word/phrase looks like in hundreds of different fonts. This is the year 2022 happened to be my test phrase.
For this example, let’s change the font of the elements in the container class (the last two lines of text on this webpage) to Press Start 2P-which you can find on the Google Fonts API.
Here’s the Press Start 2P font on the Google Fonts API-I like the font’s retro gaming aesthetic:
Now, how do we get this font onto our CSS styling and in turn, onto the webpage? Take a look at the line in red in the form’s HTML code:
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Form.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
Also take a look at the line in red in the form’s CSS code:
h1{
color: green;
font-family: "Comic Sans MS";
font-size: 40px;
text-align: center
}
.container{
color: red;
font-family: "Press Start 2P";
font-size: 30px;
text-align: center
}
See, I can declare Press Start 2P in the font-family property of the .container styling calls just fine. However, since Press Start 2P is not a standard HTML font, setting this font as the value of the font-family property alone won’t change the font.
Standard HTML fonts refer to fonts that you can find pre-installed onto a standard edition of Microsoft Word, PowerPoint, or Excel.
That’s where the red-highlighted line in the form’s HTML code comes in. If you’re not using a standard HTML font on your webpage, you’d need to create another <link> tag that links to the font’s URL on the Google Fonts API (or any fonts API you might use for that matter). The link’s rel would still be stylesheet, but the href would be the font’s URL on the API.
Let’s take a look and see what the webpage looks like with the Press Start 2P font:
Pretty neat, right? Recall that I kept the green, center-aligned Comic Sans font for the top header on the webpage, so that’s why the style looks the same.
Michael here, and today I will be going over the basics of CSS to you guys.
What is CSS? First of all, CSS is a tool that stands for cascading style sheets-CSS and HTML always go hand-in-hand since CSS is the tool you’d use to give HTML webpages their style (as opposed to leaving them in bland black-and-white Times New Roman).
You can have HTML without CSS, but you can’t have CSS without HTML.
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
As you can see here, we have a perfectly functional, albeit bland looking website. Let’s explore how we can add some CSS styling to this website.
First, we’d need to create a separate CSS file-ideally, keep this CSS file in the same directory as the HTML file that you wish to style (and, although not super necessary, use the same name for the CSS file that you have for the HTML file):
As you can see, I have created a CSS file for my HTML Form file-my CSS file is also named Form.
Now, let’s start adding some simple styling to the CSS file:
h1{
color: green;
text-align: center
}
OK, for those of you unfamiliar with CSS, you’re probably wondering what on earth you’re seeing here.
All CSS styling calls (like what you’re seeing in the example above) consist of two parts-a selector and a declaration block. The selector indicates the HTML element you want to apply a particular styling to-in this example, h1 is the selector, which indicates that I want to apply a certain styling call to any h1 element in my HTML file. The declaration block is where the CSS styling magic really happens as it contains one or more styling declarations (each styling declaration is separated by a semicolon as you can see from the example above). Each declaration is wrapped in a pair of curly brackets (much like a Python dictionary) and contains the name of a CSS property (color and text-align in this example) and a corresponding value (green and center, respectively) separated by a colon.
In case you weren’t sure what the above styling call meant, it’s telling HTML to style all elements with an H1 tag with a green color and center-align the text.
Now, what if you wanted to style another element on the webpage? Take a look at the code below to see how to add another styling call:
In this example-and in addition to the h1 styling call that I had previously used-I also added a .container styling call to apply certain stylings to all elements in the container class. To add another styling call to the CSS file, simply create a new styling call using the following syntax: selector { CSS property : CSS value ; }.
In the styling call, I’m telling HTML to make all text in the container class red and bold-faced.
You’ll only need the semi-colon if you’ve got more than one CSS property-value pair. Also, no need to add a semi-colon after the last CSS property-value pair in your styling call.
Why did I add a dot (.) in front of container for the styling? Well, the dot indicates that I want to style elements of a certain class, and since container is a class in the HTML form, .container indicates that I want to applying a certain set of stylings to all elements in the .container class.
In CSS, there are six CSS styling selectors that your should know. Here’s a table that explains each of these selectors and how they are applied in CSS styling:
Selector
Example
How it’s used
element
h1
Applies a certain set of stylings to all H1 elements
.class
.container
Applies a certain set of stylings to all elements inside a container class
element.class
div.container
Applies a certain set of stylings only to elements inside a container class AND a <div> tag
*
*
Applies a certain set of stylings to everything on an HTML page
#id
#datepicker
Applies a certain set of stylings to all elements with the datepicker ID
element, element
h1, p
Applies a certain set of stylings to all H1 AND <p> elements
Now, the big question is how you would connect the CSS file to the HTML and in turn, apply the CSS styling to the HTML webpage. Take a look at this new HTML code-pay attention the line in red:
<!DOCTYPE html>
<html lang="es-US" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Form.css">
<title></title>
</head>
<body>
<h1>Flight finder:</h1>
<form action="Submitted.html" method="POST">
<label for="datepicker1">Pick the date you want to depart for your vacation</label><br>
<input type="date" id="datepicker1" name="datepicker1" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="datepicker2">Pick the date you want to return from your vacation</label><br>
<input type="date" id="datepicker2" name="datepicker2" min="2021-03-25" max="2022-03-25"><br>
<br>
<label for="time1">What time would you like to depart? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time1" name="time1"><br>
<br>
<label for="time2">What time would you like to return? (flights shown within 90 minutes of selected time)</label><br>
<input type="time" id="time2" name="time2"><br>
<br>
<label for="layover">How many layovers do you want?</label><br>
<input type="number" id="layover" name="layover" min="0" max="3"><br>
<br>
<input type="submit" value="Submit">
</form>
<div class="container">
<p>Thank you for booking your next trip with XYZ Airlines!!</p>
<p>Can't wait to see you on your travels!!</p>
</div>
</body>
</html>
The highlighted line contains a <link> tag with two parameters-rel and href. In this example, you’d set the rel parameter equal to stylesheet, as you are connecting a CSS file to your HTML webpage. You’d set the value of the href parameter equal to the name of the CSS file that contains the stylings you want to apply to the HTML webpage.
As you can see, all it takes is a single line of code to connect a CSS file to an HTML file. Pretty impressive, right?
Once we’ve connected the CSS file to the HTML file, let’s see how our stylized HTML webpage looks:
Alright, the webpage is looking better. There is definitely much more CSS styling we can apply to webpage-I’ll certainly dive into more CSS styling concepts in the next few lessons.
