What is a CSS file?
CSS (Cascading Style Sheets) are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the <style></style> tags are used. The external stylesheets are stored in files with the .css extension. With the external CSS, you can include it on multiple HTML pages to update the style of those pages. Even a single CSS file can be used to style a complete website.
Brief History
CSS1 was released in 1996 with Bert Bos as the co-author. The CSS Working Group started working on the issues that were not addressed in CSS1. This resulted in the creation of CSS2 in November 1997 that was published as a W3C recommendation on 12th May 1998. This version added support for media-specific devices like printers, downloadable fonts, tables, and element positioning. In June 1999, CSS3 became the recommendation of W3C. This divided the documentation into modules where each module had extension features defined in CSS2.
How to use CSS files
To use a CSS file, you include it in the head section of the HTML document. You use the link tag to include the file as shown below.
<link rel="stylesheet" type="text/css" href="main.css"/>
the href attribute of the link tag contains the path to the CSS file. By doing this, the applicable styles contained in the included CSS file are applied to the HTML document.
CSS Syntax
A CSS rule comprises of two components, a selector and a declaration. A selector points to an element in the HTML document. It can either be an element tag, class name, id name, multiple tags showing the hierarchy, etc. A declaration contains the style definition comprising of property and value. The property identifies the property of the element that you want to change and the value defines its new value. Each CSS rule can have multiple declarations. The following is an example of a CSS rule.
h1{
font-weight: 700;
color: forestgreen;
}
In the above example, we have the h1 as a selector that selects all the h1 tags in the HTML document. The rule has two declarations, one for font-weight and the other for color. font-weight and color are properties and 700 and forestgreen are their values respectively.
CSS Usage Example
The following shows the example HTML document and the stylesheet used to style it. The comparison image is also added to compare the styled and plain HTML documents
HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css" type="text/css">
<title>CSS Test</title>
</head>
<body>
<div class="content-wrapper">
<h1>Test document to test <span class="highlight">CSS</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo,
tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt,
perferendis
sed aut!</p>
<h2>List of items</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</body>
</html>
CSS Stylesheet
body{
background-color: lightblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
padding: 10px 30px;
}
p{
text-align: justify;
}
h1{
text-align: center;
}
.highlight{
font-weight: 700;
color: forestgreen;
}
h1, h2{
font-weight: 400;
}
ul li{
list-style-type: square;
margin-bottom: 10px;
margin-left: 50px;
}
Output Comparison
The left side of the image displays the HTML document without the styles applied and the right side displays the HTML document with the styles applied.
What does CSS stand for?
CSS stands for Cascading Style Sheets. It’s a stylesheet language used to control the presentation and layout of a web page written in HTML. Essentially, CSS describes how HTML elements should look and behave on a webpage.
What is CSS latest version?
The latest version of CSS is CSS3, but it’s not a single version. CSS is an evolving standard with new features added in modules over time. As of now, CSS3 includes various modules like Flexbox, Grid, Animations, and more. Future updates are part of the CSS4 concept, though it’s not officially defined as a standalone version.
