,

Learning CSS Tutorial Part 2: How to enter CSS code into the HTML page


In this tutorial we will discuss how to input the CSS code to the HTML page .
As has been learned during the discussion about HTML (article tutorial to learn HTML ), HTML is essentially a collection of tags that are arranged so as to have certain parts, such as paragraphs, lists, tables and so on. CSS is used to design these HTML tags.
Broadly speaking, there are 3 ways to input the CSS code into HTML, the method Inline Style,Style Sheets Internal and External Style Sheets.

Inline Method Style

The method is a way of inputting Style Inline CSS code directly into the HTML tags using the style attribute, an example of using CSS Style Inline methodsare as follows: 

  <! DOCTYPE html>
 <Html>
 <Head>
 <Title> Example Inline CSS Style </ title>
 </ Head>
    <Body>
       <H2 style = "background-color: black; color: white">
          This text will be colored white and black background
       </ H2>
    </ Body>
 </ Html>

How to enter CSS, Inline Method Style

In the code above, I insert a style attribute on the <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 does not meet the purpose of the CSS in order to separate the design of the content.

Methods Internal Style Sheets

Methods Internal Style Sheets, also called Embedded Style Sheets are used to separate the CSS code ofHTML tagsbut remain in the HTML page. The styleattribute that were in the tag, collected in a <style> tag. This style tags must be in the <head> of the HTML page.
Examples of the use of internal motode CSS style sheets: 

 <! DOCTYPE html> <html> <head> <title> Example Inline CSS Style </ 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 above method is much better than the inline style, because we have separated the CSS of HTML. The whole CSS code will be in the head tag of HTML.
However, the lack of internal use style sheets, if we have a few pages with the same style, we must make the CSS code on each of those pages. This can be overcome by using external style sheets.

Methods External Style Sheets

Shortage of internal style sheets prior method is if you want to create multiple pages with the same look, then each page will have the same CSS code.
External Style Sheets methods used to'lift' the CSS code into a separate file that is completely separate from the HTML page. Each page that require the CSS code, live 'call' the CSS file.
Still using the same example with an internal style sheets, the first stage we will transfer the contents of the <style>to a new page, and savelah as belajar.css
The contents of the file belajar.css: 

  h2 {
 background-color: black;
 color: white;
 }

Make sure that the ending of the file is.css and for the purposes of this example, savelah in the same folder as our HTML page.
Back to pages of HTML, CSS provides two ways to enter the CSS code to the HTML page, the first is to use @import
Example of use @import CSS: 

  <! DOCTYPE html>
 <Html>
 <Head>
 <Title> Example Inline CSS Style </ 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 external style sheets @import method, we insert @import url (belajar.css); on the<style> tag. Address in the URL can be a relative people experience (such as: folderku / belajar.css) or absolute (as www.duniailkom.com/belajar.css).
How to input both external style sheets,is to use the <link> tag. Here's an example: 

  <! DOCTYPE html>
 <Html>
 <Head>
 <Title> Example Inline CSS Style </ title>
 <Link rel = "stylesheet" type = "text / css" href = "belajar.css">
 </ Head>
 <Body>
 <H2>
 This text will be colored white and black background
 </ H2>
 </ Body>
 </ Html>

In the method of link external style sheets, we use the href attribute on the <link>, which will contain the address of the page CSS, in this case belajar.css
Of the three types of input methods CSS into an HTML page, themost recommended is themethod of external style sheets, either using the @import or<link> tag. Because by using CSS code separated, entire web pages can use the same CSS file, and if we want to change the entire look of web pages, we only need to change one CSS file only.



For ease of writing, the writing tutorials to learn CSS in website development indonesia , I will use an internal method of style sheets, which put CSS code in the head section of the page.It is merely to facilitate the writing sample. To create a live website, it is recommended to useexternal style sheets by means @import or link.

In the next CSS tutorial, we will discuss in more detail how to write CSS code by studying Definition Selector, Property and Value on CSS .