HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 14: Adding CSS inline style

In this chapter we're gonna WOMP, WOMP-WOMP, WOMP, WOMP, DO IT INLINE STYLE. Sorry, I had to. Anyway, out of the three ways of adding CSS to your HTML documents this is the least common way used but we still need to cover it so that you can decide which way works best for you. Adding CSS inline style means that you would be embedding your CSS code directly into you HTML elements. This can get a bit messy if you are adding many properties. To give an example of this we are going to add a few new elements to our HTML document that we're using for learning purposes. So add this new element somewhere in your code and go ahead and run it.

<h3 style="color:red;font-size:20px;">This heading was created with inline styling</h3>

·style="color:red;font-size:20px;" We have added our style tag directly into our opening h3 tag. Notice that we don't need to close it when using it in this way. Then we add an equals sign and a set of double quotes. " " , Inside of the double quotes we specify the properties and the values that we want to apply to this specific h3 element. As you can see the ; semicolons also goes in between the double quotes to end our CSS statements/rules.

·We specify that we want this h3 element to have red text and a font size of 20 pixels.

So you might be wondering what would happen if we created a new p element because we are already using an internal style sheet up in our head element. And any p element that we have already or are going to create will have properties that we set in our p rule. Let's add this code under our new h3 element and then we can run it and go over what is happening.

<h3 style="color:red;font-size:20px;">This heading was created with inline styling</h3>

We made this paragraph with inline styles. It also has style attributed to it from our internal style sheet</p>

·So now after you run your new code you can see that this paragraph is different from the other three p elements that we have on our page. So what is happening?

·Well first we are inheriting the properties that we set in our p rule. And then in our inline style code we are overriding some of those properties for this specific paragraph alone. And what we changed was the color of the text to purple, the font size to 14 pixels, and we aligned the text left.

That is all that we need to cover with inline style. Pretty simple to understand. And now you know that you can mix match multiple ways of styling. But when you begin designing your pages I recommend that you pick the system that is the easiest and most organized for you to understand. Most coders don't use inline style too much because their HTML quickly would become cluttered.

Quiz Chapter 14

1.Where do we put the code for our inline style?

2.What is the term used when we alter a property that was already specified somewhere else in our code?