CSS

What is In-Line CSS?

In the last lesson we looked at an example of simple CSS code which changed the colour of text.

I remember it well. I found my new favourite colour - salmon!

But our code didn’t say which text we wanted to change, it just said what colour we wanted to change it to. One way of specifying the HTML element we want to change is in-line CSS.

In-line CSS is where CSS code is added as a HTML attribute into our HTML code. To do this, use the ‘style’ attribute and then add the CSS code you need for the styling you want to apply. Let’s look at an example.

Below is the code for a normal title created using the h3 tag.

        <h3>Hello World!</h3>
      

For a reminder on how to add attributes to HTML, go back and read the lesson on how to add an

id or class to a HTML element.

The style attribute is added like any other attribute and so goes in the opening tag only. Let’s use the ‘color’ property in CSS to change the text colour of this title.

        <h3 style=”color: green;”>Hello World!</h3>
      

While this is the same CSS as we used before, as it is within the code for this HTML element, the computer knows to apply this styling to this specific element. The result will be a heading which looks just like the other headings created using the h3 tag except it will be green.

Aria going all in with the green theme.

In-line CSS is useful because it is easy to see what styling is applied to each element, but there are other methods of adding CSS which are probably better.

But what’s wrong with in-line CSS, it makes sense to me?

Well, if you need to add a lot of CSS your code can get very messy. Just for text alone you may want to change the colour, size, font, position, how bold the text is, whether it is underlined or not, or ...

OK! I get it! You could add a lot of CSS to each element. But why is that a problem?

With in-line CSS your code can very quickly get messy, difficult to read and hard to understand. All of which makes changing or adding code difficult. It also means small changes to your website styling could take a long time as they would have to be copied many times.

Basically it’s not a very efficient way of adding your CSS.

Let’s say you made a flea treatment for cats...

Stop right there. Are you trying to scare me?

No! I’m trying to explain why in-line CSS isn’t very efficient.

So, let’s say you made a flea treatment for cats for when they start suffering with fleas. The treatment may be difficult to make and take some time and some thought. Would you take the time to make a brand new batch every time you found out another cat had fleas?

No way! It would take up so much time! I could be napping!

Exactly! Especially as each treatment might be the same.

Well this is very much like using in-line CSS. Every single HTML element has to have brand new CSS code added to it even if it is the same as the last code.

Going back to the flea treatment, let’s say you found out about a new ingredient that made the treatment better or smell nicer. With your previous method you would have to add this new ingredient to each individual batch which would take you a lot of time.

This is very much like what would happen if you had finished adding CSS to your website and then decided you wanted all of text to be a different colour. You would have to go back and change all of your code all over again!

Think of how many lines of code you would need to change if you decided you actually wanted the text to be red or a different colour.

I guess I would need to change the code for every element. Is that right?

That is right! And that is just for one particular CSS property!

When we looked at HTML attributes, we looked at HTML classes which were used to group similar elements together. Fortunately, there are two ways we can use HTML classes to style similar elements efficiently with CSS.