March 2022 - Michael's Programming Bytes

CSS Lesson 1: Introduction to CSS Styling

Advertisements

Hello everybody,

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.

To start exploring CSS, let’s use the HTML form we used in the previous post (HTML Lesson 8: Block & Inline Content in 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:

h1{
  color: green;
  text-align: center
}

.container{
  color: red;
  font-weight: bold
}

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.

Thanks for reading,

Michael

HTML Lesson 8: Block & Inline Content in HTML

Advertisements

Hello everybody,

Michael here, and today I thought I’d do another series of web-development lessons, starting with an HTML lesson on the difference between block and inline content in HTML.

When creating a website in HTML, it’s important to know the difference between block and inline content in HTML when it comes to designing your webpage.

Block content refers to webpage content that always starts on a new line; the browsers will automatically add a margin before and after the content. Block content always stretches out as far left and as far right on the webpage as it can.

Inline content, on the other hand, doesn’t start on a new line and doesn’t stretch across the webpage-rather, inline content only takes up as much width as necessary.

Now that I’ve explained the basics of block and inline content, let me first show you some examples of block content:

<!DOCTYPE html>
<html lang="en" 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>

Take this HTML code (that I pulled from a form I made in HTML Lesson 7: Forms pt.2 (More Fun With Forms)) that will show you this form:

Pay attention to the code I highlighted in orange. Notice the <div> tag in the highlighted code. <div> simply denotes a section in a webpage, but it also often used for styling webpages with CSS (don’t worry, I’ve got a whole series of CSS lessons planned).

Wonder why I set a container class in my <div> tag? Well-although I won’t be doing so in this lesson-the container class will allow me to apply a certain CSS styling (color, font, size, etc.) to every element in the container. Let’s say I wanted to make all the text red and change the font to Comic Sans. I could easily do so with CSS simply by calling this <div> tag and applying the appropriate styling (I’ll discuss how to work CSS styling in the future).

However, you may have also noticed that I have two other block elements hiding within the <div> tag-if you guessed the two <p> elements, you are correct. Yes, the <p>, or paragraph, tag also counts as a block element and as you may have guessed, the <p> tag allows users to denote paragraphs (or single non-header lines of text, which are still paragraphs in the context of HTML) on their webpage.

Since you have two block elements within a larger block element, how would you work the CSS styling? If you wanted to apply the same style to everything in the <div> tag, you would call the <div> tag in your CSS file and apply whatever styling you want to all of the elements in the <div> tag.

However, if you wanted to apply different styling to each paragraph element inside the <div> tag, you would need to call each <p> tag in your CSS file and apply the individual stylings you want to each <p> tag.

If you really wanted to, you could apply the same styling to each <p> tag, but that would be redundant because if you wanted to apply the same styling to each <p>, simply call the <div> tag in your CSS file and apply the styling to that.
<form> is also an block element, and so are the header tags (<h1> in this form).

Now, what would inline content look like on an HTML webpage. Take a look at the form code that I posted above. There are three inline elements scattered throughout the form-<label>, <input>, and <br>-which denote a label for a form element, an inpute element for a form, and a line break between each section of the form, respectively.

While I’m on the topic of inline elements, I wanted to discuss a special type of inline element-the <span> tag. Like the <div> tag, the <span> tag defines a section in your document, however, you’d only use the <span> tag with inline elements (recall that the <div> tag is used for block-level elements).

Think of the <span> tag as the inline version of the <div> tag (or the <div> tag as the block version of the <span> tag).

Although the <div> and <span> tags both denote sections of your document, the <span> tag allows you to run CSS styling on certain sections of your document. Take a look at this section of the form code:

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

Now, let’s see what happens when we wrap a <span> tag inside the first <p> tag:

    <div class="container">
      <p><span>Thank you for booking your next trip with XYZ Airlines!!</span></p>
      <p>Can't wait to see you on your travels!!</p>
    </div>

OK, in this case, the <span> tag has no effect on the appearance of the <p> tag since, even though <span> tags technically require no parameters, having no parameters in the <span> tag won’t change the styling of your document at all. Let’s see what happens when we add a little CSS styling magic to the <span> tag:

<div class="container">
      <p><span style='font-weight:bold'>Thank you</span> for booking your next trip with XYZ Airlines!!</p>
      <p>Can't wait to see you on your travels!!</p>
</div>

To add some CSS styling in your <span> tag, pass in a style parameter inside the <span> tag and pass in your desired styling as a string value for the style parameter. In this example, since I wanted to make the Thank you part of the first <p> tag bold, I wrapped Thank you in a <span> tag and applied a font-weight:bold styling to Thank you.

Now, what if you wanted to apply more than one CSS styling to your <span> tag? Take a look at this code below:

<div class="container">
      <p><span style='font-weight:bold; color:green'>Thank you</span> for booking your next trip with XYZ Airlines!!</p>
      <p>Can't wait to see you on your travels!!</p>
</div>

In this example, I made the Thank you portion of the first <p> tag both bold AND green by applying this styling: font-weight:bold; color:green. Keep in mind that if you’re applying more than one type of CSS styling to your <span> tag, you’ll need to separate each styling element (font-weight and color in this example) with a semicolon.

Thanks for reading,

Michael