Implementing Inline CSS Styles
This guide walks through how to use Inline CSS styles. This approach allows developers to add styles to a specific element on a web site. While this is an easy approach it's main purpose is for testing out styles, using inline CSS styles in a production application is considered a poor practice.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

CSS stands for Cascading Style Sheets. As the name suggests, these are files that give styling to your application. There are three different ways of styling your application using CSS, but our focus for this section will be inline style.

Inline styles are when you put the styling options within the same HTML file. This way, not in an external file or at the top, but adjacent to the styled element, which increases readability.

However, inline styles are considered poor programming practice and not used by professional developers. Inline styles are best if reserved for understanding and experimenting with different styling options before they are moved to a CSS file.

Now, let's see how we can incorporate inline styling.

I'm going to replace the <h1> tag, with a <div> tag, causing the heading to appear as a regular paragraph. To style this heading, add a space after the word "div", and insert the word "style". Follow this with double quotation marks, and within them, place the different styling choices such as font-size and color.

<body>
  <div style="font-size: 2em; color: blue;">My Great Article</div>

If you look at the code, you'll see a colon right after the style type, and a semi-colon after the value. Both these are required for the browser to process them. Without that, you'll run into errors, and won't be able to place other styles next to it.

The output reflects our new style.

medium

Next, let's add a top margin, like this:

<body>
  <div style="font-size: 2em; color: blue; margin-top: 50px;

If you see, this moved the entire page down by 50 pixels because we are making a change to the topmost element on our page. So, naturally, everything was pushed down. If you don't want that, you can add another option called position, and give a value of "absolute*" to it. What this will do is make a change only to the title, but will not move other elements down. By default, position is relative, so you'll have to mention it explicitly if you don't want other elements to get moved. 

<body>
  <div style="font-size: 2em; color: blue; margin-top: 50px; position: absolute;">My Great Article</div>

This will the output:

medium

You obviously don't want to have such a cluttered page, but it's good to know the different options you have.

We are able to do the same to other elements on the page. Let's make the background of the second paragraph black, alter the text color to be white, and add some padding around the entire paragraph.

<div class="paragraph_two" style="background-color: black; color: white; padding: 20px;">

This will change the display to the image below.

large

With padding, you have many choices. You can add more on the sides, top or bottom, depending on how you want an element to look on the page. For example, if one wanted to increase the padding on the sides, they would code as so:

<div class="paragraph_two" style="background-color: black; color: white; padding: 20px 40px 20px 40px;

Padding takes in one or four different arguments. If you pass just one argument, all the four sides have the same amount of padding. When you pass in four arguments, the first one is for the top, second for the right side, third for the bottom and fourth for the left side, respectively.

The output is,

large

You can experiment with these values to gain a deeper understanding.

Inline styles allow you to go into even greater detail. For example, let's say, you want a particular style only for three words within a paragraph. You can use the <span> tag for selecting and apply the styles you want. 

<div class="paragraph_two" style="background-color: black; color: white; padding: 20px;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut <span style="color: red;">odit aut fugit</span>, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>

This style can be nested inside another inline style as well.

So, this is how you do inline styling in HTML.