Saving Styles in Cascading Stylesheet (CSS)

Introduction

Cascading Style Sheets (CSS) are used to control the presentation of HTML elements. Saving styles as a separate CSS file offers several advantages, including reusability, maintainability, and cleaner HTML code.

Creating a CSS File

To save styles in a CSS file, you need to create a new text document and save it with a .css extension (e.g., style.css).

Defining Styles in CSS

Inside the CSS file, you define styles using rules. Each rule consists of a selector (the HTML element you want to style) and a declaration block (containing one or more property-value pairs).

Example:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

Linking the CSS File to the HTML Document

To apply the styles defined in the CSS file to your HTML document, you need to link the CSS file using the element in the section of your HTML.

Example:

  
  


  
This is a Heading
  
This is a paragraph of text. It will be styled according to the rules defined in the style.css file.
  

    
Item 1
    
Item 2
  
  

    

      

        
Name
        
Age
      
    
    

      

        
John Doe
        
30
      
      

        
Jane Smith
        
25
      
    
  

Benefits of Using a Separate CSS File

• Reusability: The same CSS file can be linked to multiple HTML pages, ensuring consistent styling across your website.
• Maintainability: Changes to the styles only need to be made in one CSS file, simplifying updates and reducing the risk of errors.
• Cleaner HTML: HTML code remains focused on content, while presentation is handled by CSS, making it easier to read and manage.

Conclusion

Saving styles in a CSS file is a fundamental practice in website authoring. It promotes organization, efficiency, and maintainability of your web projects.