Interneting Is Hard - Hello, CSS

This is a solution to the Hello, CSS tutorial No. 4 of HTML & CSS Is Hard.

Table of contents

• Overview
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshots

Links

• Solution URL: Hello, CSS solution
• Live Site URL: Hello, CSS live site

My process

Built with

• HTML5
• CSS

What I learned

This tutorial was an introduction to CSS. I learned how to style both internal and external CSS and its syntax using selectors, properties, and values. It was fun to list multiple selectors, properties, or even values to keep the code clean or list fall backs for font.

In terms of units of measurement, I was familiar with px already, but a new one was em. I like the idea of using relative measurements to save time in case you - or the user - ever want to change the base font size without worrying about the heading sizes.

Another neat thing to learn was all the options regarding styling bullets in lists. I've included some code later in this section.

Other properties reviewed include text-decoration, text-align, font-weight, and font-style.

Probably my favorite thing to learn was how developers reuse CSS stylesheets linked to multiple pages to save time, space, and confusion. It helps keep the site uniform, too.

Some code snippets I learned include:

/* This is the syntax for CSS */
selector {
  property: value;
}

/* List styles include disc, cirlce, and square */
ul {
  list-style-type: cirlce;
}

/* Numbered list styles include decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha */

ol {
  list-style-type: lower-roman;
}

/* This is how to get rid of hyperlinks! */
a {
  text-decoration: none;
}

Continued development

When linking a CSS stylesheet, I used <link rel="stylesheet"...>. I peeked at a few other rel attribute options such as alternate, archive, help, index, and license. It will be fun to get to use some of these in the future.

Another topic that I'd like to explore in the future is using the list-style-image property to create custom bullets for lists. That would be so fun!

While this tutorial did a good job explaining the cascading nature of CSS, I'm curious about the application of page-specific styles beyond this tutorial.

I'm also curious about using multiple stylesheets across a site. I like the simplicity of one stylesheet, so diving into some more of these complexities will be interesting.

Useful resources

• MDN list-style-image - Custom bullets for <li> elements!

• MDN <del> - Demo of <del> and <ins> elements for semantic HTML to be styled with CSS text-decoration: line-through.

Author

• GitHub - @jugglingdev

• freeCodeCamp - @jugglingdev

• Frontend Mentor - @jugglingdev

• LinkedIn - Kayla Paden

Acknowledgments

Shoutout to Oliver James for his dedication to publishing and maintaining InternetingIsHard.com. His tutorials were the first that really clicked for me.