HTML Basics (Part 2) - Working With inline Styles!

By: Daniel Imbellino
Updated: Feb 28, 2013

While it’s best to add style information to our elements using cascading style sheets, for the sake of learning HTML it’s a good practice to learn how to add style information to your elements inline as a starting point. For instance, you may want to add a background color or image to your webpage, add certain colors or fonts to various elements text, etc. Here we’re going to provide some simple examples of how to do this in your HTML files using inline styles.

You create inline styles by first declaring a style declaration within a given HTML element:

<element style=”attribute: attribute-value”>Textual data</element>

We could for example add a background color to our web pages body:

<body style=”background-color: blue;”>

We can also use RGB (red, green, and blue) variations to fine tune our colors:

<body style=”background-color: rgb(30,0,100);”>

RGB values are closed in parenthesis, followed by comma separated red, green, and blue, values. You can use values 0 thru 255 for each color, 0 being no color, and 255 being full color.

You can also use percentages to determine color variations:

<body style=”background-color: rgb(10%,0%,80%);”>

You can also specify background images:

<body style=”background-image: url(background-image.png); background-repeat: none;”>

This would reference an image in our HTML directory itself as a background image.

We can also point to an image file across the internet as our background image:

<body style=”background-image: url(http://www.example.com/example-background-image.png);”>

Here we specified a full URL (uniform resource locator) to point to our image file from an external location.

We can also use the background attachment property to decide on how our background image should be rendered on the page. We can use the “fixed” value to place an image in a fixed position on our pages. Or we can use the “scroll” value to force the background image to scroll with the rest of the page vertically. Fixed values tend to look more natural on screen to users viewing your webpage’s.

<body style=”background-image: url(our-example-image.jpg); background-attachment: fixed;”>

We can also set background images for other elements:

<p style=”background-image: url(image-one.png); background-attachment: fixed; background-repeat: none;”>Text Goes Here</p>

This would set a background image for this particular paragraph element.

Notice the “background-repeat:” property. If you don’t want your background image to repeat across the screen you should use “background-repeat: none;” as your value. You can also use “repeat: x;”, or “repeat: y;”. The X and Y values indicate to repeat an image horizontally (X-axis), or repeat vertically (Y-axis). We can also specify an image to repeat across the screen to fill in empty space with “background-repeat: repeat;”.

We can also position elements where we want them to appear on the screen using a number of various techniques, and we can specify height and width properties for our elements as well.

<p style=”width: 280px; height: 160px; position: absolute; left: 80px; top: 140px;”>Text Goes Here</p>

Here we used absolute positioning to position our element. Absolute positioning positions our elements from the top left corner of the screen cascading to the bottom right of the page. We can position element any where we like on a given page using these values. Also absolute positioning is the easiest to work, not to mention the most effective way to position your elements. Notice we also specified a height and width for our element. You can position elements using pixels (px), percentages (%), etc. You can also use “pt” (1 point = 1 72nd of an inch), or “em” (16 pixels = 1 em). Just stick to percentages and pixels, they are your friend. After all, LCD screens are always measured in pixels, and percentages simply quantify a given amount of pixels to equal a given percentage. Remember how we said absolute positioning measures from the top left corner of the screen down? LCD screens themselves are measured in the same manner. All LCD screen measurements are specified by measuring from the top left corner of the screens bezel, to the bottom right corner of the screens bezel. The bezel is simply the point where the edge of the screen meets with its outer edge.

We can use the “background-size:” property to help fine tune the dimensions of our elements:

<p style=”background-image: url(example-image.jpg); background-size: 140px; 195px; background-attachment: fixed;”>Text Goes Here</p>

Here we specified a width and height using the “background-size:” property. The first value is our width, and the second is our height.

Also, you can position elements on the screen using relative positioning:

<p style=”background-image: url(example-image-three.png); position: relative; left: 40px; top 30px;”>Text Goes Here!</p>

Don’t use relative positioning! This positions elements relative to the placement of other elements surrounding it. Relative positioning is difficult at best to work with and isn’t realistic when it comes to placing elements where you want them to appear. It’s best to stick with absolute positioning since elements are then positioned to an exact set of coordinates on the screen, regardless of the placement of any other elements.

Styling text in your HTML document:

You can add a multitude of style information with regards to textual content in your webpage’s. You can choose from an assortment of fonts (Heavily covered in our tutorials for “CSS Fonts & Text”), adding color, text sizes, and other various formatting as described below.

You can choose from a wide assortment of fonts, but you need to understand the differences among the various types of fonts (their properties, attributes, etc).

The three main types of fonts are: Serif, Sans Serif, and monospace fonts. Serif fonts tend to have extensions at the ends of each character, while Sans Serif fonts don’t having any extending lines within their characters. Monospace font’s have the same width between all characters.

Specifying a font for a given element:

<h1 style=”color: blue; font-size: 45px; font-family: times new roman;”>Text goes here!</h1>

We specified a font size and font type using the “font-family” property. We can also specify the alignment of our text:

<p style=”color: blue; font-size: 25px; font-family: times new roman; text-align: left;”>Text Goes Here</p>

You can align text as "justify" (text is displayed evenly on both sides of a given elements allocated space. This creates a set of text that appears as a block), "left" (text is aligned evenly on the left side), "right" (text is aligned evenly on the right side), and "center" (text is aligned from the center of the given elements allocated space.

You can also determine letter spacing, word spacing, and line height between each line of text.

We could specify the line height between each line of text:

<p style=”color: blue; font-size: 25px; font-family: times new roman; text-align: left; line-height: 20px;”>Text Goes Here</p>

Specifying word spacing:

<p style=”color: blue; font-size: 25px; font-family: arial, Helvetica; text-align: left; word-spacing: 5px;”>Text Goes Here</p>

Specifying the spacing between each letter:

<p style=”color: blue; font-size: 25px; font-family: times new roman; text-align: center; letter-spacing: 2px;”>Text Goes Here</p>

Summary:

What you learned here is actually XHTML. The “X” in Hyper Text Markup Language means “extensible”, as in it is a language that can be extended upon easily thanks to its intelligent design. XHTML unlike HTML is a modular markup language that is built on the XML platform (check out our XML tutorials!). XHTML is an internet based standard. Also, XHTML can also be viewed as “the language of the internet”.

The point of this tutorial was to provide a basic ground work for getting started with building functioning, well formed web pages for use on the web. This tutorial was not an exhaustive list of HTML elements, attributes, properties, etc; nor is it an exhaustive list of style properties associated with HTML or XHTML. We covered the basics of adding style information to your web pages with the use of inline styles. While using inline styles is not recommended for producing web pages, it remains an important part of the learning process. In the long run you should use CSS to produce style information for your webpage’s. Inline styles while being applied in a different manner happen to carry the same rules and procedures as applying style information with full CSS implementation. If you are new to web design then you should start with inline styles first, working your way up to the use of internal and external style sheets.

The implementation of standards for markup languages, including CSS, is overseen by the “World Wide Web Consortium” (W3C). The standards are generally voted upon using “requests for comments” and all information in this tutorial and others on this site follow the strict rules of these standards. If you’d like to learn more about the “W3C” you can check out their main website at:

www.w3.org