CSS syntax - Integration of CSS styles

Home - Tutorials - CSS tutorials

In this tutorial I will show you how to use CSS in your projects to make it more flexible.

Tutorial info:

Bookmark CSS syntax

Step 3 - Integration of CSS styles

CSS syntax

Now you can create a CSS class, so it's time to look how to integrate it into your HTML document. You have more possibilities:

• Load an external CSS class definition file.
• Define CSS classes inside your header section
• Set CSS in your element parameter list

Load external CSS file

The best way to integrate CSS inside your code is to create a separate CSS class definition file and then import it into your document. In this case you can change the look of your site without touching the HTML code. You can import the CSS file in your header section like this:

Code: 
<link href="style/mystyle.css" rel="stylesheet" type="text/css" />
CSS F1

Of course you can import more CSS files in a single document if you want.

Define CSS in your header 

If you don't want to import CSS from external file, you also can define it directly in your HTML code. In this case you need to create a style section in your header with type text/css. Inside this section you can define your CSS classes as usual.

Code: 
<style type="text/css">
<!--
a {
    color: #aabbcc;
    text-decoration: none;
}
 
#mainArea {
    color: #999999;	
}
 
-->
</style>
 
CSS F1

Set CSS as parameter 

It can happen that you want to redefine the CSS settings directly inside an element parameter list. You can also do this, however be careful, as this solution can result a very hard to maintain code.   

Code: 
<a href="#" style="color:#990000; font-weight:bold;">Demo</a>
CSS F1

Tags: css syntax, css basics, css syntax basics