CSS

Introduction (CSS)

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents, describing how a webpage should look by prescribing colors, fonts, spacing, and positioning. CSS provides developers and designers with powerful control over the presentation of HTML elements.

HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML element using selectors. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

Why CSS?

• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single modification.
• Search Engine Friendly: Clean coding technique that improves readability for search engines.
• Superior Styles: Offers a wider array of attributes compared to HTML.
• Offline Browsing: CSS can store web applications locally using offline cache, allowing offline viewing.

CSS Syntax

CSS consists of style rules that are interpreted by the browser and applied to the corresponding elements. A style rule set includes a selector and a declaration block.

// HTML Element
<h1>SL Coding School</h2>

// CSS Style
h1 { color: blue; font-size: 12px; }

Where - 
Selector - h1
Declaration - { color: blue; font-size: 12px; } 

Example

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

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In this example, all paragraph element (<p> tag) will be centre-aligned, with a blue text color.

Web Page with & without CSS

Without CSS: In this example, we have not added any CSS style.

<!DOCTYPE html>
<html>
  
<head>
    <title>Simple Web Page</title>
</head>
  
<body>
    <main>
       <h1>HTML Page</h1>
       <p>This is a basic web page.</p>
    </main>
</body>
  
</html>

Output

Using CSS: In this example, we will add some CSS styles inside the HTML document to show how CSS makes a HTML page attractive and user-friendly.

<!DOCTYPE html>
  <html>
  
  <head>
      <title>Simple web page</title>
      <style>
          main {
              width: 600px;
              height: 200px;
              padding: 10px;
              background: beige;
          }
          
          h1 {
              color: olivedrab;
              border-bottom: 1px dotted darkgreen;
          }
          
          p {
              font-family: sans-serif;
              color: orange;
          }
      </style>
  </head>
  
  <body>
      <main>
          <h1>My first Page</h1>
          <p>This is a basic web page.</p>
      </main>
  </body>
  
  </html>
  

Output

CSS is essential for creating visually appealing and maintainable web pages. It enhances the website look and feel and user experience by allowing precise control over the presentation of HTML elements. Mastering CSS is crucial for effective web design and development.

If you don't know what HTML is, we suggest that you read our HTML Tutorial.