We use cookies

This site uses cookies from cmlabs to deliver and enhance the quality of its services and to analyze traffic..

Master SEO vocabulary with all essential terms and meanings here.

Cascading Style Sheet (CSS)

Last updated: Aug 25, 2023

Cascading Style Sheet (CSS)
Cover image: the illustration of a Cascading Style Sheet (CSS) which functions to adjust the visual appearance of the website. Here's the brief discussion.

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

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.
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

External CSS output which displays the title “Panduan CSS” in blue and the paragraph “Learn HTML & CSS” has a font size of 20px with the font type Calibri and a light green background color.
Figure 2: External CSS output which displays the title “Panduan CSS” in blue and the paragraph “Learn HTML & CSS” has a font size of 20px with the font type Calibri and a light green background color.

 

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

The output of the CSS inline program code above is the title “Panduan CSS” in orange and the paragraph “Belajar HTML & CSS” has a font size of 40px with the font type Times New Roman.
Figure 3: The output of the CSS inline program code above is the title “Panduan CSS” in orange and the paragraph “Belajar HTML & CSS” has a font size of 40px with the font type Times New Roman.
cmlabs

cmlabs

WDYT, you like my article?

Latest Update
Last updated: Dec 11, 2024
Last updated: Nov 21, 2024
Last updated: Nov 08, 2024
Explore Other Terms

Streamline your analysis with the SEO Tools installed directly in your browser. It's time to become a true SEO expert.

Free on all Chromium-based web browsers

Install it on your browser now? Explore Now cmlabs chrome extension pattern cmlabs chrome extension pattern

Need help?

Tell us your SEO needs, our marketing team will help you find the best solution

Here is the officially recognized list of our team members. Please caution against scam activities and irresponsible individuals who falsely claim affiliation with PT CMLABS INDONESIA DIGITAL (cmlabs). Read more
Marketing Teams

Agita

Marketing

Ask Me
Marketing Teams

Destri

Marketing

Ask Me
Marketing Teams

Thalia

Marketing

Ask Me
Marketing Teams

Irsa

Marketing

Ask Me
Marketing Teams

Yuliana

Business & Partnership

Ask Me
Marketing Teams

Rochman

Product & Dev

Ask Me
Marketing Teams

Said

Career & Internship

Ask Me

Interested in joining cmlabs? Boost your chances of becoming an SEO Specialist with our new program, cmlabs Academy. it's free!

Check

New! cmlabs Added 2 Tools for Chrome Extensions! What Are They?

Check

There is no current notification..