I just started Module 4 which is all about CSS. I learned a lot in one day because I REALLY like CSS and didn't stop with the lessons until I was struggling to keep my eyes open 😅

Semantic HTML

There are basic HTML tags that are used to insert specific things into your site. For example, <img, <input, <button and so on.

But sometimes all those tags can feel a little cluttered. My first approach was to group certain elements within a <div tag. But this isn't always best practice when building an intricate website with a bunch of different sections.

This is where semantic HTML comes in! Your content can still be separated via <div tags but those divs will now be wrapped in a semantic HTML tag like <footer, <section, <main or <header tags.

Specificity

I always wondered why certain CSS rules took precedence over others. Now I know it has everything to do with specificity.

So you have elements, classes and IDs and each one has its own level of specificity according to a point system.

• Elements = 1 point

• Classes = 10 points

• IDs = 100 points

Even though code is read from top to bottom, if you have something like this:

header img .logo #home {

or this:

header img .logo {

The top piece of code will always take priority!

Multiple Classes

Speaking of classes, I had no idea an element could have multiple classes. It makes refactoring your code 10x easier.

So let's say you have three button elements on your page. Now some of the styling is the same while others are not. Usually, your CSS would look something like this:

.home-btn, 
.about-btn, 
.contact-btn {
      padding: 10px;
      border: 1px solid blue;
      border-radius: 5px;
}

But if you gave each of those buttons the same second class within your HTML, well then your code would look like this instead:

.btn {
     padding: 10px;
     border: 1px solid blue;
     border-radius: 5px;
}

Much cleaner right?

Buttons vs Links

Accessibility is a developer's responsibility. The use of buttons and links makes a big impact on whether or not a website is accessible.

So when should you use which?

• Buttons: for actions that effect the front-end or the back-end of your site. Think JavaScript!

• Links: used to navigate somewhere on the page or site or elsewhere on the web.

So if according to this knowledge, links should be more widely used, why do so many sites use buttons?

Well, they're not...

They're just making their links LOOK like buttons for visual appeal. And the code looks the same except for a few key differences:

a {
  padding: 10px 20px;
  margin: 10px;
  border: 1px solid blue;
  border-radius: 5px;
  background-color: lightblue;
  color: #fff;
  /* Differences */
  text-decoration: none;
  display: inline-block;

Because links are naturally inline elements, once they're styled as buttons they'll overlap other elements. So to avoid that we change their display to inline-block and to remove that typical linky underline we set the text decoration to none.

Pseudo Selectors

Now that we've created our "buttons" how can we make sure people know they are buttons?

This is done through pseudo selectors like hover, action and focus.

• Hover: changes an element's properties when the cursor hovers over the element

• Action: changes an element's properties when the cursor clicks on the element

• Focus: changes an element's properties when a user tabs to select

Here's an example of what might look like:

a {
  padding: 10px 20px;
  margin: 10px;
  border: 1px solid blue;
  border-radius: 5px;
  background-color: lightblue;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active,
a:focus {
    background-color: darkblue;
}

Span Tag

If you want to change the colour or font weight or size of a specific amount of text within a <p tag use a <span tag.

Let's say you have a piece of HTML:

<p>I like butterflies!</p>

But you'd like to make the word "butterflies" pink and bold. How would you do that?

Let me show you...

<p>I like <span>butterflies!</span>

Now you could easily target this within CSS like this:

p span {
  color: pink;
  font-weight: bold;
}

BUT the best practice is to give that <span tag a class and target that class within your CSS instead. Like this:

<p>I like <span class = "accent-text">butterflies!</span>

.accent-text {
  color: pink;
  font-weight: bold;
}

DRYer Code

Don't Repeat Yourself!

Readability is a must especially if you're working with other developers on the same code. Group elements with the same styling properties together:

.logo-img, 
.avatar-img {
   border-radius: 5px;

Group similar elements together and add labels as comments to sort them:

/* Text */

h1 {
}

p {
}

/* Images */

.logo-img {
}

/* Buttons */

.home-btn,
.about-btn,
.contact-btn {
}

Child Element Positioning

Let's say you have a header on your mobile site, it's got your logo and a burger menu. Both of these things are child elements that sit within the parent element. Now what if you want your logo to stay on one side but your menu icon to stay on the other side?

Remember: it's Opposite Day!

For example, if you want your menu in the top right corner your code might look like this:

.menu {
  margin-bottom: auto;
  margin-left: auto;
}

/* Shorthand */

.menu {
  margin: 0px 0px auto auto;
}

CSS Position Property

I learnt about three different positions.

• Relative

• Absolute

• Fixed

What does each of these mean?

Absolute contains the element anywhere within the site and positions it relative to the containing element. So if you set your element's position to absolute, make sure you set its parent element to relative.

Why?

Because relative contains the element within the original container.

header {
  position: relative;
}

.logo-img {
  position: absolute;
}

This way instead of the element being positioned at the top of the window, it'll be positioned at the top of the parent element. Which in this case is the header.

Now fixed is a little different...

You know when you enter a website and within 5 seconds there's a banner across the entire page blocking the content? That's using fixed positioning because no matter how much you scroll that banner isn't going anywhere unless you interact with it.

That's essentially what I've learned in Module 4! Hopefully keeping up with this blog will help solidify these concepts in my brain for future use :)

Onto the next 🚀

Look out for my next blog where I cover concepts in Module 5.

Shauna 💗