Cascading Style Sheet

 

Cascading Style Sheets (CSS) is the design language used to transform a plain HTML “skeleton” into a visually appealing website. While HTML handles the content (text, images, links), CSS handles the presentation (colors, fonts, layouts, and animations).

 

Key Advantages
  • Separation of Concerns: You can keep your content (HTML) and design (CSS) in separate files, making it easier to manage.
  • Consistency: You can change the look of 100 pages at once just by editing a single CSS file.
  • Faster Loading: Browsers cache CSS files, so subsequent pages on your site load much faster.
  • Responsive Design: CSS allows you to create “Media Queries” so your site automatically adjusts its layout for mobile, tablets, and desktops.

 

Various ways to insert CSS

There are three main ways to apply CSS to an HTML document. The best method depends on whether you want to style one single tag, a whole page, or an entire website.

 

1. External CSS 
This is the most professional way to work. You write all your CSS in a separate file (e.g., style.css) and link it to your HTML pages.
 
Example:
<head>
  <link rel="stylesheet" href="style.css">
</head>


2. Internal CSS
The styles are written directly inside the HTML file, specifically in the “head” area.
 
Example:

<head>
<style>
body { background-color: linen; }
h1 { color: maroon; }
</style>
</head>

 

3. Inline CSS

The style is added directly to a specific HTML element using an attribute.
 
Example:
<h1 style="color:blue; text-align:center;">This is a heading</h1>
    PreviousNext