Cascading Style Sheets (CSS)

6.1 Introduction to CSS

CSS (Cascading Style Sheets) is a style sheet language used to design and format HTML web pages. It controls the appearance, layout, colors, fonts, spacing, borders, and positioning of elements on a webpage.HTML is mainly used to create the structure and content of a webpage, while CSS is used to make the webpage attractive and presentable. Example: 

CSS Example

Example OF CSS

Output:

 Output: The webpage displays a light-blue background, a centered dark-blue heading, and a green paragraph in 20-pixel text.

Advantages of CSS

  • It makes webpages attractive and colorful.
  • It separates HTML content from presentation.
  • It maintains a consistent design across multiple webpages.
  • It reduces repeated styling code.
  • It supports responsive website layouts.
  • It makes website maintenance easier.
  • It provides visual effects such as shadows, gradients, and animations.

6.2 Types of CSS

CSS (Cascading Style Sheets) can be applied to HTML documents in three main ways:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

1.Inline CSS :Inline CSS is written directly inside the style attribute of an HTML element. It applies styles to that particular element.

Inline CSS Example

Output:

Click the â–¶ Run button to display the output.

2. Internal CSS

Internal CSS is written inside the <style> element in the <head> section of an HTML document. It is useful when styling a single webpage.

Internal CSS Example

Output:

Click the â–¶ Run button to display the output.

3. External CSS

External CSS is written in a separate file with the .css extension. The HTML document connects to the stylesheet using the <link> element.Suppose the CSS file is named style.css.

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External CSS</h1>
<p>This webpage uses an external stylesheet.</p>
</body>
</html>

.CSS file (style.css):

body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
color: darkgreen;
font-size: 20px;
}


Note: Save both files in the same folder and open index.html in a browser.

Difference between the three types of CSS

Inline CSS

Internal CSS

External CSS

Written in the style attribute

Written inside a <style> element

Written in a separate .css file

Styles a particular element

Styles elements in one HTML document

Can style multiple webpages

Useful for quick, local changes

Useful for single-page projects

Useful for larger websites

Can make HTML difficult to maintain

Can make the HTML file lengthy

Easier to maintain centrally

Note: The actual winning style depends on the CSS cascade, specificity, importance, and other rules—not simply on whether a stylesheet is inline, internal, or external.

Post Views: 122
error: Content is protected !!
Scroll to Top