How to enter CSS code into the HTML page
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.
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.
Examples of the use of internal motode CSS style sheets:
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.
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:
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:
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:
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.
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
.
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>
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.
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.