Learning CSS Part 2 : How To Enter The CSS Code To an HTML Page


After learning about the Learning CSS Part 1: Introduction To CSS, CSS learning tutorials in this time we will learn Learning CSS Part 2: how to Enter the CSS code into the HTML page.

As has been learned by the time the discussion of HTML (article on tutorial learn HTML), HTML is basically a collection of tags that are arranged so as to have the certain parts, such as paragraphs, lists, tables and so on. CSS is used to design these HTML tags.

Broadly speaking, there are three ways to enter the CSS code in HTML, i.e. the method Inline StyleInternal Style Sheets, dan External Style Sheets

The Inline Style Method

The Inline Style method is the way the input CSS code directly into the HTML tags by using style attributes, for example, the use of Inline CSS Style Method is as follows:

See the Pen The Inline Style Method by webspoints (@webspoints) on CodePen.

In the above code, I insert a tag in the style attribute <h2> attribute, the value of this style is the CSS code that wants to implement.

The use of CSS tags like this though it practically, but not recommended, because the CSS code directly affiliated with HTML, and does not meet the goal of establishing a separate design with CSS so that content.

Internal Style Sheets Method

Methods of Internal Style Sheets, or also called Embedded Style Sheets are used to separate the CSS code from the HTML tag but still in one HTML page. The attributes of the style that had previously been in the tag, collected on a tag <style>.This style tags must be on the part <head> from the HTML page.

Example use of motode internal style sheets CSS:

See the Pen CSS Internal Style Sheets Method by webspoints (@webspoints) on CodePen.

The internal style sheets method example above is much better than the inline style because we are already separating CSS from HTML. The entire CSS code will be at the head of the HTML tag.

But the lack of using internal style sheets, if we have multiple pages with the same style, then we must make the CSS code on each page. This can be overcome by using the method of external style sheets.

The Method Of External Style Sheets

The shortcomings of the previous internal style sheets method are if you want to create multiple pages with the same look, then each page will have the same CSS code.

The method of External Style Sheets is used to ‘ lift ‘ the CSS code into a separate file that is completely separate from the HTML page. Each of the pages that require CSS code live ‘ call ‘ the CSS file.

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

Content of the file study.css :

Make sure that the suffix of the file is the .CSS and for the purposes of this example, save in the same folder with your HTML pages.

Back view HTML, CSS provides two ways to enter the CSS Code into the HTML page, the first one is to use @import

An example of CSS: @import

See the Pen CSS External Style Sheets Method by webspoints (@webspoints) on CodePen.

@Import method for external style sheets, we insert the @import url (study.css); on tag <style>. The address in the url can be relative address (such as: myfolder/study.css) or absolute (like www.webspoint.com/belajar.css).

How to input both external style sheets, are using the tag <link> . Here’s an example:

On the methods of link external style sheets, we use the href attribute in the tag <link>, which will contain the address of the CSS page, in this case study.CSS.

Of the three types of input ways CSS into an HTML page, which is the most recommended method of external style sheets, using either @import or by the tag <link>. Due to using CSS code are separated, the whole web pages can use the same CSS file, and if we want to change the entire look of the website, we just need to change the 1 CSS file only.


Please enter your comment!
Please enter your name here