CSS is a styling language that is used to design the content of web pages and make the content user-friendly. CSS was developed by Håkon Wium Lie. It was released by W3C on 17 December 1996.
Reasons for developing CSS
We know that HTML is used to create the layout and structure of web pages but there is no facility for styling, due to which the content and look of the web page is not user-friendly, so CSS was developed to make the content user-friendly.
Benefits of CSS
Separation of content and design: CSS helps separate the content (such as HTML) and website design. This makes the website easier to organize and update. It is also less difficult to understand and change.
Unique design: CSS helps maintain a uniform design across the website. Applying the same style and layout to multiple pages through a single CSS file saves you time and effort.
Mobile-friendly design: Using CSS, the website can be optimized for different screen sizes, so that the website looks good on mobile and other devices as well. With the help of features like CSS media queries, the layout can be easily changed so that the website looks right on every screen size.
Faster loading speed: CSS improves the speed of the website because once the style is set, it does not need to be written again and again. CSS files are saved in the browser, which makes the website load faster.
Improve website accessibility: CSS makes a website easier to read and navigate, even for people with disabilities. Well-designed CSS makes a site more readable and user-friendly, making navigation easier.
Control over the entire website: CSS gives developers the flexibility to style and design every part of a website. This gives you complete control over things like text, colors, layout, and even animations and transitions.
Usage of CSS
There are three ways to use CSS with HTML.
Inline CSS
In this method, we write the CSS in the HTML tag using the style attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RAYS Coding : CSS Tutorial</title>
</head>
<body>
<h1 style="color: blue;">Welcome to CSS</h1>
</body>
</html>
Internal CSS
In this method, we write the CSS in the head section of the document in the style tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RAYS Coding : CSS Tutorial</title>
<head>
<style>
h1 {
color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
External CSS
In this method, we create a separate file whose extension is ".css". The name of the file can be anything like "index.css" and "style.css". In this file we write the code of "CSS". But first of all, we have to link the "CSS" file in the html file which you can see in the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RAYS Coding : CSS Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
Conclusion
Cascading Style Sheets (CSS) represent a foundational technology that significantly influences the design and user experience aspects of contemporary websites. Its capacity to generate aesthetically pleasing, visually appealing, and user-friendly layouts establishes it as a universally recognized benchmark in the field of web development. Whether the objective is to develop straightforward text styling or to execute intricate layout designs, CSS furnishes the requisite features and mechanisms necessary to forge a cohesive and captivating web experience.
