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.
What Is CSS? Definition, Function ,Types, the Example
Last updated: Jan 07, 2025
https://cmlabs.co/en-id/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
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
cmlabs
WDYT, you like my article?
Latest Update
Last updated: Mar 03, 2025
Last updated: Feb 17, 2025
Last updated: Jan 07, 2025
Explore Other Terms
