Linking HTML with CSS

As mentioned earlier, there are three ways to format HTML with CSS. Each of them has its own pros/cons and is used in certain situations.

1: Directly in the HTML element

To format HTML elements with CSS, you do not need a CSS file. You can also use the style attribute and so directly add properties to an HTML element.

<p style="color:green;font-family:Tahoma;">
This is a green text in the Tahoma font.
</p>

The advantage of this option is that you can look at the formatting of an element directly in the document. The disadvantage is that these styles can only be assigned in one specific HTML file. Thus you would have to change the CSS code in every file separately. This option should not be used simultaneously on many pages.

Nevertheless, it can sometimes be very useful, to add some CSS-specifications directly in the element. For example for small corrections or the testing of style-errors.

It is important to know that CSS styles in an HTML element overwrite all other CSS values for that element, so if you colored all paragraphs blue in a separate CSS file, a paragraph that has been formatted using the style attribute, will use the properties in the style-attribute.

<p style="border:2px solid green;padding:10px;">
   A paragraph with border and padding.
</p>

2: The <style>-tag

In addition to the style attribute, there is also a style-tag, and this also allows the direct including of CSS in an HTML file:

<style type="text/css">
selector{
property: value;
}
</style>

This tag can be used in body or head. The disadvantage here is that the data must be changed in all HTML documents, too.

3: Connecting HTML and CSS files

Do this by creating a new file in the editor, which you could save as yourfilename.css. Style.css or styles.css is used often. In this file you now can write your CSS specifications. You should make sure that the CSS file contains just CSS code. If you now want to add this CSS code to any HTML file, you use a link-element inside the head-element:

<link rel="stylesheet" type="text/css" href="example.css" />

This line of code ensures that a CSS file is included in an HTML document. The rel-attribute tells the browser which file relationship there is between the HTML document and the target of the<link/>-tag. For CSS it is rel="stylesheet". type determines the type of the linked file - text/css. In href you define the path to the CSS file. It could also be http://www.example.com/styles/test.css.

Linking HTML with CSS