DEV Community

Ranjith srt
Ranjith srt

Posted on

Bootcamp 2 - CSS styles cheets

CSS styles cheets and types:
Enter fullscreen mode Exit fullscreen mode

CSS (Cascading Style Sheets) is used to style HTML elements, and there are three main types of CSS stylesheets:

1. Inline CSS
Enter fullscreen mode Exit fullscreen mode

This type of CSS is written directly inside an HTML element using the style attribute. It only affects that particular element.

Example:

html

<p style="color: red; font-size: 18px;">This is styled with inline CSS</p>

- What it does: The text inside this <p> element will be red and the font size will be 18px.
Enter fullscreen mode Exit fullscreen mode

1.Pros:
-Easy to use for a quick style on a single element.

2.Cons:
-Hard to maintain because the style is mixed with the HTML.
Not reusable for other elements.

2. Internal CSS (Embedded): 
Enter fullscreen mode Exit fullscreen mode

This type of CSS is placed inside the <style> tag in the <head> section of the HTML document. It applies to the entire page but is written within the same HTML file.

Example:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: green;
      font-family: Arial;
    }
  </style>
</head>
<body>

<h1>This is an H1 heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

1.What it does:

-The background color of the page will be light blue.
-The heading <h1> will have green text and use the Arial font.

2.Pros:

-Useful for styling a single HTML document.
-Styles are kept in one place (in the <head> tag).

3.Cons:

-Not efficient for larger websites, where you might have many pages needing the same styles.

3. External CSS:
Enter fullscreen mode Exit fullscreen mode

External CSS is the best and most commonly used type. The CSS code is stored in a separate .css file, and this file is linked to the HTML document.

Example:
1.HTML file (index.html):

html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is an H1 heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2.CSS file (styles.css):

css

body {
  background-color: lightyellow;
}
h1 {
  color: navy;
  font-size: 24px;
}
p {
  color: gray;
  font-family: Verdana;
}
Enter fullscreen mode Exit fullscreen mode

1.What it does:

-The background of the page will be light yellow.
-The <h1> will have navy blue text and a font size of 24px.
-The <p> will have gray text and use the Verdana font.

2.Pros:

-Keeps your HTML and CSS separate, making both easier to maintain.
-Can be reused across multiple HTML pages, which saves time and effort.

3.Cons:
-Requires loading an external file, so there’s a slight delay in rendering the page (but this is usually very minimal).

Image description

How to Link External CSS:
Enter fullscreen mode Exit fullscreen mode

To link an external CSS file to your HTML, you use the <link> tag inside the <head> of your HTML document.

html

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

-rel="stylesheet": Tells the browser that this is a stylesheet.
-href="styles.css": The path to your external CSS file.

Why External CSS is Preferred:

1.Reusability: You can use the same .css file for multiple HTML pages, making it easy to apply consistent styles across your website.

2.Clean Code: It separates the HTML structure from the design, making your code easier to read and maintain.

3.Maintainability: If you need to change a style, you can do it in one place (the CSS file) instead of modifying multiple HTML files.

Example Combining All Three CSS Types:
html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Internal CSS */
    h1 {
      color: green;
    }
  </style>
  <link rel="stylesheet" href="styles.css"> <!-- External CSS -->
</head>
<body>

  <h1 style="font-size: 30px;">This is styled with inline CSS and internal CSS</h1> <!-- Inline CSS -->

  <p>This is styled with external CSS.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

What happens here:
-The <h1> element is styled with inline, internal, and external CSS. The text color will be green (from internal CSS), and the font size will be 30px (from inline CSS).
-The paragraph (<p>) will get its style from the external CSS.

Image description

Top comments (0)