CSS Tutorial: How to Input the CSS Code Into an HTML Page

For this topic we will learn how to use and how to combine CSS with HTML. Combining CSS with HTML there are 3 types of methods, They are Inline Style method, Internal Style Sheets, and External Style Sheets.

1. Inline Style Methods : how to input the CSS directly into the HTML tags needed by using the style attribute, an example of using Inline Style is as follows:

<!DOCTYPE html>
<html>
<head>
     <title>Contoh Inline Style CSS</title>
</head>
   <body>
      <h2 style="background-color:black; color:white" >
This text will be colored white and black background
      </h2>
   </body>
</html>

In the above code, I insert a style attribute on the tag <h2>, the value of the style attribute is the CSS code to be applied.

The use of CSS tags like this though practical, but not recommended, because the CSS code directly affiliated with HTML, and CSS has not been made in order to meet the objective of a separate design with content.

2. Internal Style Sheets Method

Internal Style Sheets Methods / Embedded Style Sheets are used to separate the CSS code of the HTML tags but still within a HTML page. Style attribute that previously were inside the tag, collected on a tag to <style>. This style tag should be at <head> part of the HTML page.

Examples of the use of an internal method possible CSS style sheets:
<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        h2 {
        background-color:black;
        color:white;
        }
    </style>
</head>
<body>
    <h2>
    This text will be colored white and black background    </h2>
</body>
</html>

Examples of internal style sheets method above is much better than the inline styles method , because we have separated the CSS of HTML. The entire CSS code will be at the head of an HTML tag.

But the disadvantages of using an internal style sheets, if we have multiple pages with the same style, then we have to make the CSS code on each of those pages. This can be overcome by using external style sheets.

3. External Style Sheets Method
External Style Sheets Methods are used to remove the CSS code into a separate file that is completely separate from the HTML page. Each page that requires CSS code, just call the CSS file.

Still using the same example with an internal style sheets, the first stage we will move the contents of the tag <style> to a new page, and save it as style.css

Fill of the style.css :
h2 {
background-color:black;
color:white;
}

CSS provides two ways to enter the CSS code into an HTML page, the first is to use @ import

Examples of the use of the @ import CSS :

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <style type="text/css">
        @import url(belajar.css);
    </style>
</head>
<body>
    <h2>
    This text will be colored white and black background
    </h2>
</body>
</html>

For the method of @ import external style sheets, we insert @ import url (style.css); <style> tag. Address on the url could be relative experience (such as: folderweb / style.css) or absolute (like www.domain.com / style.css).

How to input two external style sheets, is to use the tag <link>. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Inline Style CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h2>
    This text will be colored white and black background
    </h2>
</body>
</html>

In the method of the link external style sheets, we use the href attribute on the tag <link>, which will contain the address of the page CSS, in this case style.css

Of the three types of the input CSS into an HTML page, which is the most recommended method of external style sheets, either using the @ import and tagged with <link>. Because by using CSS code separated, the entire web page can use the same CSS file.

Simple Projects with Source Code

CSS Tutorial: How to Input the CSS Code Into an HTML Page