Dizon Developer

Back

First, What is CSS?

CSS is stands for Cascading Style Sheets use to design web page.

Prerequisite

Text Editor - I'm using Visual Studio Code
Web Browser - I'm using Microsoft Edge for Windows 10 but you can use Google Chrome

Note:

.css is the extension name of CSS document.

When to use CSS?

Designing website.
Designing landing page or advertisement page.
Designing email design.
Designing mobile design
Designing desktop application design

How to use CSS?

This is the CSS code basic format:

h1 { color: white; background: black; }
h1 {
    color: white;
    background: black;
}

h1 HTML element.
{ } inside the curly bracket is css style
color is font color style and :white; is the value.
As same above, background is represent as background color style and :black; is the value.

Three way to use CSS on your HTML document?

Within HTML tag
Internal
External

Within HTML tag

<h1 style="color: white; background: black;">Header 1</h1>
<h1 style="color: white; background: black;">Header 1</h1>

You can add style in any html tag as attribute.
style is the only attribute can add design.

Internal

<style> h1 { color: white; background: black; } </style>
<style>
h1 {
    color: white;
    background: black;
}
</style>

This code is place inside HTML document.
You can insert CSS code inside the style tag only.
Tips: Insert this code inside head tag to organize your code.

External

<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="stylesheet" type="text/css" href="/style.css" />

Copy the basic code of css, code above and now, save it to "style.css".
Then insert this code inside head tag.
Note: Make sure the style.css and website.html(html document) are same location.

Additional,

You can use CSS by class name or id name of a HTML tag.

.header1 { color: white; background: black; } #header2 { color: white; background: black; }
.header1 {
    color: white;
    background: black;
}
#header2 {
    color: white;
    background: black;
}

.header1 this code is class name, you need to add "." before class name.
#header2 this code is id name, you need to add "#" before id name.

Your html document must be like this:

<h1 class="header1">Header 1</h1> <h2 id="header2">Header 2</h2>
<h1 class="header1">Header 1</h1>
<h2 id="header2">Header 2</h2>

You can use class or id name to add design.
Tips: Use class name always.

Final code,

In this code, I use external CSS. To know HTML.

website.html

<!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, shrink-to-fit=no" /> <link rel="shortcut icon" href="/path/to/logo.ico" /> <title>My Website Title</title> <link rel="stylesheet" type="text/css" href="/style.css" /> </head> <body> <h1>Header 1</h1> </body> </html>
<!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, shrink-to-fit=no" />
    <link rel="shortcut icon" href="/path/to/logo.ico" />
    <title>My Website Title</title>
    <link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
    <h1>Header 1</h1>
</body>
</html>

style.css