Introduction to CSS

Date Posted: 7/1/2020 Tutorial

40
Back

First, What is CSS?

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

Prerequisite
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 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>
  • 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>
  • 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" />
  • 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 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>
  • 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>
style.css
h1 {
    color: white;
    background: black;
}

Output:

My Website Title

Header 1

Advertisement: