If you are new to web development and just started learning how to style your HTML code, embedded CSS is the way to go. Embedded CSS out rules inline styling (placing styles within element tags) since one is able to refer to a single set of code rather than searching line by line for styling within your document. In this tutorial, you will learn how to use embedded CSS in an HTML document.

Setup

This tutorial was written using Visual Studio 2010. Visual Studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up visual studio or your favorite text editor. Save this project with the name of your choice.

Step 1.

First let’s create a page to style. Copy and paste the following code onto your index.html or default.html page:

This will give us a basic layout as well as some content to work with.

Step 2.

CSS does not have the same syntax as HTML, so in order to have both work together, we need to place the CSS in style tags. Provided that you write the CSS appropriately and so long as they are within these tags, the HTML will be formatted to your liking. The style tags go in the head section of the html document and are typed as follows:

Step 3.

Place the following CSS in between the style tags mentioned above: 

Save your changes and open your HTML document in a web browser. Within the CSS section, we formatted the table, along with its header and cells, the document body and div sections. You should now see the styling applied to your page. For additional help with CSS, click here to visit CSSAtoms.com. 

A Few Last Words

Embedded CSS is a great way to start styling HTML documents, however it is recommended to use external CSS files and simply reference them. This lessens the length of your HTML document and creates an easy to manage structure. We cover referencing external CSS files in another tutorial. Join us next time for additional HTML tutorials. See you then!
Download Source Files