CSS File Format | .css Extension
Last Updated :
29 Jan, 2024
CSS, or Cascading Style Sheets, is a style sheet language used in web development to describe the presentation and formatting of a document written in HTML or XML. CSS is essential for separating the content of a web page from its visual representation, allowing web developers to control the layout, colors, fonts, and other stylistic aspects of their web pages.
Brief History
CSS, or Cascading Style Sheets, has undergone a transformative journey since its inception in 1996. Initially designed to separate the presentation layer from HTML, CSS1 laid the foundation. CSS2, introduced in 1998, expanded capabilities, while CSS 2.1 (2011) stabilized the specification. CSS3, a modular collection of features, brought advanced selectors, media queries, layout models like Flexbox and Grid, transitions, and animations. It played a pivotal role in responsive web design, allowing websites to adapt to diverse devices
Why you should use CSS?
Here are some of the major reasons why we should use the CSS:
- Separation of Concerns: Keeps content (HTML) separate from presentation.
- Consistency and Reusability: Ensures a consistent look and enables code reusability.
- Responsive Design: Allows styling adjustments for different devices.
- Browser Compatibility: Ensures a consistent experience across browsers.
- Flexible Layouts: Enables precise control over page elements.
- Animations and Transitions: Adds interactive elements without JavaScript.
- Accessibility: Supports better accessibility through styling adjustments.
- Print Styles: Creates print-friendly versions of web content.
- Efficient Updates: Global changes with updates to a single CSS file.
How CSS Solved a Big Problem?
The Html was never build to write designing part of the website , its only purpose was to write the structure of the website. Problem was that for large project it was difficult for the developer to work because the HTML files were getting more and more complex to solve this problem CSS was introduce which separate the designing part from the html files make easier for the developer to work on the complex projects.
How to use the CSS file?
CSS (Cascading Style Sheets) can be applied in three main ways: inline, internal (or embedded), and external. Here’s a brief explanation of each along with examples:
1. Inline CSS: Inline CSS is applied directly within the HTML tags using the style attribute. This method is suitable for applying styles to individual element.
CSS
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
|
2. Internal (Embedded) CSS: Internal or embedded CSS is placed within the HTML document, typically in the head section, using the <style> tag. This method is useful when applying styles to a specific page.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
|
External CSS: External CSS is stored in a separate CSS file and linked to the HTML document. This method allows for the separation of style and content, making it easier to maintain and apply consistent styles across multiple pages.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
</html>
|
CSS
p {
color: red;
font-size: 20px;
}
|
Example:
In this example we make the button in the Html and we will design the same button with the help of the CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Styled Button</title>
</head>
<body>
<button class="styled-button">Click me!</button>
</body>
</html>
</html>
|
CSS
body, button {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
.styled-button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.styled-button:hover {
background-color: #2980b9;
}
|
Output:
Output for the above code
Conclusion
CSS is important file while working on the webpages and website as it store the design of the whole webpage or may the whole website that can be used again and again as already said it will solve the problem of separation and also the design code can be used again and again.
Share your thoughts in the comments
Please Login to comment...