If you are familiar with cascading style sheet
programming, you might familiar with terms such as external style sheet, CSS
inline style, and many more. Aside from those terminologies, the world of CSS
programing is actually wider than you thought. It consists of attributes,
elements, values, properties, and so on. They are not stand independently to
create functional program. They combine into complicated writing system. Most
people embed CSS into HTML, which is a completely different programing
language. In this article, we are going to talk about the basic detail of
embedding CSS files into HTML.
Several Ways of
Insert CSS File Forms the CSS
When it comes for embedding CSS file into HTML, the
saying practice makes perfect is completely applicable. At first, there might
be a lot of error when you try to connect them. However, you will gain
information about how not to do it in the wrong way. By keep practicing, you
will be able to figure out the solution for it. Embedding CSS files into HTML
is one of things you need to learn. Here are several aspects that you can do to
get better understanding about it.
1.
Separate CSS File Link
By connecting to a CSS file separately and orderly,
you will be able to get good picture about how the program will work. In order
to do it properly, you need to contain the entire style rule that you want to
connect in a text file. It is important to use .css file extension to save it.
Simply save it on your server and link the file directly to the HTML file. On
the <head> of your HTML you should include the following lines: <link
rel=”stylesheet” type=”text/css” href=”mystyles.css” media=”screen” />. If
the file is in specific folder, then you need to add foldername/ before
mystlyes.css.
2.
Embedding CSS File
Instead of taking advantage of the server, you can
also link the CSS file directly. Embedding CSS into HTML operating perfect is
easy things to do. In order to perform this embedding, the first thing you need
to do is placing series of code on the <head> section of your HTML.
Between the <style> and </style> you can add your style rules. Most
programmers prefer this particular method since it allows them to correct the
mistake directly if there is any. Example : <!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>HI Games</title>
<style
type="text/css">
p{
font-family: serif;
line-height: 1.75em;
font-size: 18px;
}
i {
font-family: sans;
color: orange;
}
</style>
</head>
<body>
<style type="text/css">
h2 {
font-family: sans;
color: #333;
}
</style>
<h2> judul artikel</h2>
<p>Pargaraf ini berisi tenetang isi artikel
anda.untuk mendemokan <i>internal css</i>. Seperti namanya,
<i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file
HTML.</p>
</body>
</html>
3.
Using Inline CSS
If you learn this method from programming class,
you can see that the trainer adds inline CSS to HTML tags. This method allows
the CSS file to be linked with the HTML document as well. However, you need to
be careful when adding the inline. Make sure that it does not mix up with the
tags on HTML document. Example :
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<title>HI Games</title>
</head>
<body>
<h2
style="color:#de37ff;font-family:sans">JUDUL ARTIKEL INI AKAN
BERWARNA UNGU</h2>
<p>Pargaraf ini berisi
tenetang isi artikel anda.untuk mendemokan <i>internal css</i>.
Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis
langsung dalam file HTML.</p>
</body>
</html>
4. Importing CSS
into other CSS
Importing CSS file into other CSS file is unique
method that you can do as well. When you
insert CSS file from the CSS, the line you are going to use is @import
“newstyles.css”. The newstyles.css here is depending on the name of your CSS
file. This method is mostly used to reduce the size of HTML document with
multiple CSS file embedding. Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>HI Games</title>
<link
rel="stylesheet" type="text/css"
href="stylesaya.css">// =>cara untuk memanggil file external
css
</head>
0 komentar:
Posting Komentar