Master SEO vocabulary with all essential terms and meanings here.

Cascading Style Sheet (CSS)

Last updated: Aug 25, 2023

https://cmlabs.co/en-sg/seo-terms/css-definition

Link copied!

What is CSS?

CSS stands for cascading style sheet and is a language used to manage the visual appearance (front-end) of a website. CSS was developed in 1996 by the World Wide Web Consortium (W3C) to set HTML page formatting.

CSS allows you to build websites that look good and provide a good user experience. This is because CSS can be used to design HTML documents or other markup languages, such as setting font styles, sizes, colors, spacing, creating buttons, and other styles.

CSS Functions

After you know what is CSS, you have to understand the function. Basically, the CSS function is to make the appearance of HTML documents or markup languages more attractive and varied. There are also other CSS functions you should know:

Providing Responsive Display

One of the CSS function is to provide a responsive display for all screen sizes, both desktop, and mobile. CSS has properties such as max-width and min-width to adjust the display according to the screen size. That way, your website can provide a better user experience.

Shorten Loading Time

CSS is also able to shorten loading time. With CSS you can minimize the amount of code because CSS styles can be applied to multiple web pages at once. It causes the file size to be smaller and web pages to load faster.

Code Management

Using CSS makes it easy for you to manage your code. For example, you want to change the type of font used on a website. You don't need to change each font, but you can edit the CSS code regarding the font type and the changes will be applied throughout the HTML page.

CSS Types

Based on how it is written, CSS is divided into three types, namely internal, external, and inline CSS. Check out the discussion of CSS types below:

Internal CSS

Internal CSS is CSS code that is written in the <head> section of an HTML document. You can add CSS code by writing a <style> tag in the HTML header. However, internal CSS is less efficient because it can slow down website performance and make the file size bigger.

External CSS

External CSS is writing separate CSS code from HTML documents. Usually, the CSS code will be stored in a .css extension file, then it can be imported via the <link> tag found in the <head> section. In the <link> tag, you only need to write the rel="stylesheet" attribute and the href attribute which contains the directory where the .css extension file is stored.

External CSS is widely used in website development because it can speed up loading times. In addition, external CSS also makes the program code neater and the file size smaller.

Inline CSS

Inline CSS is CSS code as an attribute on HTML elements. You can add different styles based on your needs for each element. However, using inline CSS can be less efficient because styles can only be used on one element. You will need to add separate CSS styles for the other elements.

CSS Syntax Example

Here are some ways to apply CSS syntax in HTML documents. Take a look at the source code below:

Internal CSS Example

You can add style tags and CSS properties in the <head> section of an HTML document. In the following code, there is an internal CSS to style the paragraph and H1.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <style>
      body {
        background-color:lightblue;
      }
      h1 {
        color:white;
        text-align:center;
      }
      p {
        font-family:Arial;
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS</p>
  </body>
</html>

cmlabs

Internal CSS Output

Figure 1: The output of the internal CSS which displays the title “Panduan CSS” in white and the paragraph “Belajar HTML & CSS” has a font size of 30px with the Arial font type and a light blue background color.

External CSS Example

To use external CSS you must add a reference to the external CSS file inside the <link> tag in the <head> section of the HTML document. The way to import an external CSS file is to write the href="CSS file directory" attribute in the <link> tag. Take a look at the following sample HTML code and mystyle.css file.

HTML Code

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS<p>
  </body>
</html>

cmlabs

CSS code saved on the mystyle.css file

<style>
  body {
    background-color:lightgreen;
  }
  h1 {
    color:blue;
    text-align:center;
  }
  p {
    font-family:Calibri;
    font-size:20px;
  }
</style>

cmlabs

External CSS Output

Inline CSS Example

In the inline CSS, you can add style attributes and CSS properties in HTML attributes. Take a look at the following code to style paragraphs and H1 with inline CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
  </head>
  <body>
    <h1 style=color:orange;text-align:center;>Panduan CSS</h1>
    <p style=font-family:TimesNewRoman;font-size:40px;>Belajar HTML & CSS</p>
  </body>
</html>

cmlabs

Inline CSS Output