Complete working code of using CSS into HTML

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling Methods in CSS</title>
    <!-- Internal CSS -->
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .internal-style {
            color: green;
            background-color: lightgray;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <!-- External CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Styling Methods in CSS</h1>
    <!-- Inline CSS -->
    <p style="color: red; font-size: 20px;">This paragraph is styled with inline CSS.</p>
    <!-- Internal CSS -->
    <p class="internal-style">This paragraph is styled with internal CSS.</p>
    <!-- External CSS -->
    <p id="external-style">This paragraph is styled with external CSS.</p>
</body>
</html>

CSS File (styles.css)

#external-style {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}

Explanation of the Code

HTML File (index.html)
Header section

  • The webpage title is set using the <title> tag.
  • Between <style> tags is where internal CSS is contained. It applies class styling to any paragraph and the <body> tag.internal fashion.
  • The <link> tag is used to connect external CSS, pointing to styles.css, which contains the styles declared for the #external-style ID.

Body section

  • Contains a <h1> header to introduce the topic.
  • Inline CSS: The style property is used to style a paragraph inside of a tag. Here's an example of an inline style.
  • Internal CSS: Styles specified in the head section are applied by another paragraph with the class internal-style.
  • External CSS: Styles set in the external CSS file are applied using the ID external-style in the third paragraph.

CSS File (styles.css)

includes CSS rules that style a particular paragraph with color, text decoration, and font weight for the #external-style ID. Especially in bigger projects where several web pages share the same styles, this external stylesheet shows how styles can be controlled independently from HTML, improving reusability and maintainability.

logo

CSS

Complete working code of using CSS into HTML

Beginner 5 Hours

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styling Methods in CSS</title>
    <!-- Internal CSS -->
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .internal-style {
            color: green;
            background-color: lightgray;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <!-- External CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Styling Methods in CSS</h1>
    <!-- Inline CSS -->
    <p style="color: red; font-size: 20px;">This paragraph is styled with inline CSS.</p>
    <!-- Internal CSS -->
    <p class="internal-style">This paragraph is styled with internal CSS.</p>
    <!-- External CSS -->
    <p id="external-style">This paragraph is styled with external CSS.</p>
</body>
</html>

CSS File (styles.css)

#external-style {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}

Explanation of the Code

HTML File (index.html)
Header section

  • The webpage title is set using the <title> tag.
  • Between <style> tags is where internal CSS is contained. It applies class styling to any paragraph and the <body> tag.internal fashion.
  • The <link> tag is used to connect external CSS, pointing to styles.css, which contains the styles declared for the #external-style ID.

Body section

  • Contains a <h1> header to introduce the topic.
  • Inline CSS: The style property is used to style a paragraph inside of a tag. Here's an example of an inline style.
  • Internal CSS: Styles specified in the head section are applied by another paragraph with the class internal-style.
  • External CSS: Styles set in the external CSS file are applied using the ID external-style in the third paragraph.

CSS File (styles.css)

includes CSS rules that style a particular paragraph with color, text decoration, and font weight for the #external-style ID. Especially in bigger projects where several web pages share the same styles, this external stylesheet shows how styles can be controlled independently from HTML, improving reusability and maintainability.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Copyrights © 2024 letsupdateskills All rights reserved