What is CSS ?
CSS stands for Cascading
Style Sheet, which is an arrangement of code that we use to set how HTML
documents will be displayed. What is meant by setting here is: changing the
color, layout, border, shadow, position, background, and so on.
In fact, all web pages in this era almost certainly use CSS.
Inserting CSS in HTML
There are 3 ways to add CSS
to HTML:
- Using inline CSS.
- Using internal CSS.
- and Using external CSS.
Using inline CSS
Inline CSS is a CSS code
that we embed in any element in the HTML body, directly using the attribute style
Example
<button>Log
In</button>
<button>Register</button>
Output:
We can change the style of
the two buttons above by adding attributes style
<button
style="color: red">Log In</button>
<button
style="color: blue; border: 2px solid green">
Register
</button>
Output:
Well, the method above is called inline CSS, because we directly insert CSS on that line as well.
Using internal CSS
The second way is to use
internal CSS. Internal CSS is CSS that is placed on the <head>
Example
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Internal</title>
</head>
<body>
<a href="#">Home</a>
<a href="#">About</a>
</body>
</html>
Output:
We can add tags <style> in the <head>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Internal</title>
<style>
a {
padding: 8px 16px;
border-radius: 4px;
color: white;
background-color: #8d68e8;
text-decoration: none;
font-family: Arial, Helvetica,
sans-serif;
}
</style>
</head>
<body>
<a href="#">Home</a>
<a href="#">About</a>
</body>
</html>
Output:
Using external CSS
What is meant by external is
that we create a separate file with the extension .css.
Then we link the file into the HTML page using the tag <link>
Example
├── index.html
└── style
└── app.css
So we have two files
Index.html
Style/app.css
We can add a <link>
tag in the <head> section that points to the style/app.css file as
follows
While the contents of the
style/app.css file are as follows
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Eksternal</title>
<link rel="stylesheet"
href="./style/app.css">
</head>
<body>
<a href="#">Home</a>
<a href="#">About</a>
</body>
</html>
While the contents of the
style/app.css file are as follows
a {
padding: 8px 16px;
border-radius: 4px;
color: white;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
a:first-of-type {
background-color: #1fc296;
}
a:last-of-type {
background-color: #d45a5a;
}
Note : In the use of
external CSS we do not need to use the tag <style>
Output:
When to Use inline, internal and external CSS ?
Ideally in real projects, we
should always use external CSS.
Why?
So that the arrangement of
files in our project becomes neater. And also: so that we can use the same CSS
file for more than one HTML page.
However, there are times
when we prefer to use internal or inline CSS. Like for example when we only
need a little CSS on an element