Month: April 2022

CSS Lesson 3: The Basics of Backgrounds

Hello everybody,

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:

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
}

input{
  background-color: #00FFFF
}

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:

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-image: url('stock photo.jpg')
}

input{
  background-color: #00FFFF
}

So, how did I get the result for my webpage that you see above? Well, I first obtained a stock photo from a stock photo website (https://shop.stockphotosecrets.com/index.cfm?/home_EN&CFID=351309901&CFTOKEN=65225479 for those curious). I then saved the stock photo to the same directory where my form HTML and CSS code is located.

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:

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-image: url('stock photo.jpg');
  background-repeat: no-repeat;
}

input{
  background-color: #00FFFF
}

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:

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-image: url('stock photo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

input{
  background-color: #00FFFF
}

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.

Thanks for reading,

Michael

CSS Lesson 2: Fun with Fonts

Hello everybody,

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:

https://renenyffenegger.ch/notes/development/web/CSS/properties/font-family

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):

.container{
  color: red;
  font-family: "Century Gothic";
  font-size: 30px;
  text-align: center
}

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.

Thanks for reading,

Michael