Scribd
Upload
6 views

Css

Pdf

Uploaded by

shozigaming
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

Css

Pdf

Uploaded by

shozigaming
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS (Cascading Style Sheets)

is a language used to style and layout web pages. It controls how HTML
elements are displayed on screen, paper, or other media. CSS allows you
to apply colours, fonts, spacing, animations, and more to your web
content.

Types of CSS

There are three main ways to apply CSS to HTML:

1. Inline CSS

- Inline CSS is used to apply styles directly within an HTML element. It is


defined using the `style` attribute inside the element's opening tag.

Example:
<p style="color: blue; font-size: 20px;">This is a blue paragraph.
</p>
- Use case: It's useful for small, specific changes but can lead to messy
code if overused. Not recommended for larger projects due to difficulty in
maintaining the styles.

2. Internal (Embedded) CSS

- Internal CSS is placed within the `<style>` tag in the `<head>` section
of the HTML document. This method allows you to apply styles to the
entire document but keeps them within the same HTML file.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: green;
font-size: 18px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a green paragraph.</p>
</body>
</html>
Use case: Internal CSS is useful when you want to style a single HTML
page without creating a separate CSS file. However, for larger projects,
external CSS is preferred for better code separation and reuse.
3. External CSS
- External CSS involves linking an external `.css` file to the HTML
document using the `<link>` tag in the `<head>` section. This method
separates content (HTML) from presentation (CSS) and is highly
recommended for larger projects.

Example:

HTML file (index.html):


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph styled with external CSS.</p>
</body>
</html>
```

CSS file (style.css):


```css
h1 {
color: red;
text-align: center;
}

p {
color: blue;
font-size: 16px;
}

Use case: External CSS is ideal for styling multiple web pages with the
same styles, as it helps keep the HTML clean and allows the styles to be
reused across multiple pages.

Comparison of CSS Types:

Best Practice: Use External CSS for most projects to maintain clean,
reusable, and scalable code, and only use Inline or Internal CSS for
specific cases where they are more efficient.

You might also like