Contents  >

Lists and Bullets

IBAT Next Course

Learning Goals

At the end of this Lesson you will be able to:

You can view a finished version of this exercise by clicking the image below.

GitHub image

Contents

About list and bullets

The two parts of a list

Your two work files: base-4.html and base-4.css

Updating the <head> of your web page

Validating your web page

Validating your stylesheet

Uploading your two files to GitHub

Further resources

About lists and bullets

Lists of bulleted items are commonly used in web pages to make text easier-to-read and instructions easier-to-follow.

You can create two types of lists in HTML:

The two parts of a list

In HTML, you can think of any list as containing two parts: the list as a whole, and the individual items in the list.

Tutorial: Styling HTML with CSS

Your two work files: base-4.html and base-4.css

In this Lesson you will work with these two files:

First, let’s edit the HTML file from your previous Lesson:

  1. In your text editor, open the file named base-3.html.
  2. Use the File | Save As command to save your base-3.html file with this new name:   base-4.html   You can now make changes to this new base-4.html file without affecting the base-3.html file from your previous exercise.
  3. In the <head> of your new base-4.html file, change the title as follows:
    <title>Responsive web page with unordered and ordered lists</title>
    
  4. Also in the <head>, change the description as follows:
    <meta name="description" content="A sample responsive web page with examples of unordered and ordered lists.">  
    
  5. And finally in <head>, change the stylesheet link as follows:
    <link rel="stylesheet" href="base-4.css">  
    
  6. You are now finished making changes to your base-4.html file.   Save the file with the File | Save command. Or press the Ctrl key (Windows) or Command ⌘ key (Apple) and press the s (for Save) key.
  7. Switch to the base-3.css file, and use the File | Save As command to save the file with this new name:   base-4.css

You are now ready to work with your new web page (base-4.html) and stylesheet (base-4.css).

Adding sample bullet text to your web page

In your base-4.html file, add the following new content at the bottom of the web page, just before the closing </body> tag.

<ul>
    <li>Pellentesque non dignissim tellus</li>
    <li>tincidunt imperdiet sapien</li>
    <li>Nunc rhoncus, massa in scelerisque lacinia</li>
</ul>

<ol>
    <li>Integer et fringilla dolor</li>
    <li>Maecenas eu scelerisque mauris</li>
    <li>Duis velit turpis, faucibus id</li>
</ol>

Adding bullet styles to your stylesheet

As with other elements of a web page, such as headings and text paragraphs, web browsers apply default styles to unordered and ordered lists.

However, because you have reset all default styles at the beginning of your stylesheet, you will need to add styles of your own for lists to display correctly.

In your base-4.css file, add the following new CSS styles at the bottom of the stylesheet, after the paragraph text styles.

/* ==== BULLETS ==== */
ul li, ol li {
    font-family: sans-serif;
    font-weight: normal;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1600 - 320)));
}

/* Mobiles */
@media all and (max-width:767px) {
    ul, ol { margin-left: 5% }
    ul li, ol li {
       line-height: 1.5;
       margin-bottom: 5%;
    }
}
 
/* Desktop */
@media all and (min-width:768px) {
    ul, ol { margin-left: 2% }
    ul li, ol li {
       line-height: 1.6;
       margin-bottom: 2%;
    }
}

Save your HTML and CSS files.

Reload your base-4.html file in your web browser. It should now look as shown below. Tutorial: Styling HTML with CSS

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-4.html file.

GitHub image

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Powerpoint Project
  3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate. Powerpoint Project
  4. Click the Check button.
  5. If you see any errors, return to your base-4.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Project Animation Google Fonts
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your base-4.css file in your text editor, fix the errors, save the file, and copy the entire file again. Tutorial RWD: Media Queries
  6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your two files to GitHub

After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. Select or drag-and-drop the two files base-4.html and base-4.css to upload them to your GitHub account. Project Animation Google Fonts
  5. After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/base-4.html

It may take a few minutes for your uploaded files to appear on GitHub.

Further resources

HTML lists
From W3 Schools

CSS lists
From Geeks for Geeks

CSS bullet style explained
by Nesha Zoric on dev.to

Bullet point lists
From the Free Tutorial Center

Video: Styling unordered lists
From Jamie McGibbon at Technical Cafe



Return to Contents.