CSS Tutorial - CSS Introduction

Posted by Ridwan Fadilah on Aug 14, 2020 - 05:37 pm

CSS Introduction

Learn and introduction to CSS basics. CSS Explanation and Usage Example.

A website uses CSS to style their web appearances like the position of the web elements, font-type, color, or the background color of the page and many more.

Today, CSS also a part of the importance on the website.

Table of Contents

What is CSS?

The CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on the screen, paper, or in other media

CSS saves a lot of work and can control the layout of multiple web pages all at once.

Why Use CSS?

The CSS is used to define styles on your web pages. You can implement your web design to your HTML page document. In this case, you can set the color composition, a variation, position, and more that will use on your web.

Example:


body {
  background-color: lightgray;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

The code above will display by the browser like this:

CSS Example

CSS Syntax

A CSS rule-set consists of a selector and a declaration. The declaration is consist of property and value:

selector {property:value; another-property:value;}

Example:


h1 {color:red; background-color:gray;}
  • The selector is the HTML element you want to style
  • The declaration can contains one or more property separated with semicolons.
  • The declaration blocks are surrounded by curly braces.

Here's the result of the code above:

CSS Syntax Example

How To Add CSS?

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

There are three ways to inserting the CSS:

  • External CSS
  • Internal CSS
  • Inline CSS
External CSS

The external CSS saved in the CSS file and can be placed at the same or in a different folder with the HTML file.

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML document must embed the CSS file directory inside the <link> element if you want to use the external CSS.

Example:

The HTML


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

The CSS


body {
  background-color: lightgray;
}

h1 {
  color: navy;
  margin-left: 20px;
}

The external CSS saved with the .css extension.

The code above will display by the browser like this:

External CSS Example
Important to note: In this example, the CSS file saved in the same folder with the HTML document.

Internal CSS

The internal CSS may be used if there are single HTML page has a unique style.

The internal CSS is defined inside the <style> element and placed inside the head section.

Example:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Here's the result of the example above:

Internal CSS Example
Inline CSS

The inline CSS may be used if there is a single HTML element that has a unique style.

Add the style attribute to the element you want to styled.

Example:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p style="color:blue;">This is another paragraph.</p>

</body>
</html>

Here's the result of the example above:

Inline CSS Example

The inline CSS is the highest priority of the "cascade" that will be used by the browser.

Okay, that's the introduction of the CSS basics tutorial. You will learn more about the CSS basics in the next chapter.

You can read another CSS basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.

Thanks for reading.


Related Articles