3 Best Ways to Add CSS to HTML

25 May 2023 Balmiki Mandal 0

Mastering Style: 3 Best Ways to Add CSS to Your HTML Documents

There are several ways to add CSS (Cascading Style Sheets) to HTML documents.

Here are three commonly used methods:

Inline CSS:
- Inline CSS is applied directly within the HTML tags using the style attribute.
- Example:
  html
```
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
```
- While this method is quick and easy, it's generally not recommended for large-scale styling due to maintenance issues.
Internal (or Embedded) CSS:
- Internal CSS is placed within the <style> element in the head section of the HTML document.
- Example:
  html
```
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal CSS.</p>
</body>
</html>
```
- Internal CSS allows you to define styles for multiple elements in one place, improving maintainability.
External CSS:
- External CSS involves creating a separate CSS file and linking it to the HTML document using the <link> element.
- Example:
  
  styles.css:
  css
```
/* styles.css */
p {
  color: red;
  font-size: 20px;
}
```
  index.html:
  html
```
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a paragraph with external CSS.</p>
</body>
</html>
```
- External CSS promotes a clean separation of HTML structure and CSS styles, making it easier to maintain and update styles across multiple pages.

BY: Balmiki Mandal

Related Blogs

25 May 2023

Best Ways to Add CSS to HTML

26 May 2023

Creating an Infinite and Circular Rotating Image Slider Using HTML and CSS

Post Comments.

Login to Post a Comment

No comments yet, Be the first to comment.