90 Days of Code: Third Time’s the Charm

Photo by Michael Jasmund on Unsplash

The moment we’ve all been waiting for.

No?

Maybe just me 🤷🏾‍♂️

After committing to this for three days, I definitely feel like it’s becoming apart of my schedule. In today’s module, I finally learned how to give my website a little style upgrade. CSS, or Cascading Style Sheets, is the styling code used to style markup languages such as HTML. Meaning, CSS cannot exist by itself. It has to be associated with a markup document.

The grammar, or Syntax, of CSS is also different than HTML. To make a declaration, it has to be in the format of:

Selector { property : value; }

This stylistic information can be inserted into the website using the following methods:

  • External CSS

There’s a hierarchy to the different methods of inserting CSS. Web browsers like Google Chrome follow this hierarchy so I had to be careful that I used the correct method at the correct time.

External CSS is code that lives on an external file within your web project that you link to on each page. The benefit of having a separate file that determines the style of a website is that we don’t have to make those declarations individually. Coding takes enough time as it is. If I can declare my Headings are Blue and 20px only one time and it translates to all 80 pages, I’m happy.

As you will see below, I have styled my CV page slightly using the External CSS method. Does my future in UI Design look bright?

Remember it without any CSS 👇🏾

Internal CSS is primarily used when a webpage has a unique style to it. This code is placed within a <style></stlye> tag and is used to make changes to all tags of the same type on a page to save time. Imagine having 15 headings on one page and having to change the color, alignment, size, etc. of each one individually. You would take as long to code a website as it takes me to write these blog posts. Inline CSS helps by making those changes simultaneously on a specific page like the below code:

<style>

h1 {
color: blue;
margin-left: 20px;
}

</style>

Look at an example of bypassing External CSS and customizing it for my Contact page using Internal CSS:

As the name suggests, Inline CSS is placed within a specific tag line. For example, if I want to style the H1 Heading of a singular paragraph to be the color red, I would expand the <h1> tag and write <h1 style=”color:red;”>.

I can also add multiple CSS declarations to a single line as displayed here:

<h1 style=”color:red;text-align:center>

This is not the ideal method unless you want to style something on a page very specifically like a single Heading.

Day 3 is in the books. Keep following along as we continue down this rabbit hole of alphanumeric combinations that make your head spin. Next lesson, we’re going to dive deeper into CSS.

Freelancer, lifelong student, and wannabe techie. I love exploring disruptive startups and sparking cultural conversations. www.thecamcaldwell.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store