ck
ReviewsPricingJobsBlogRegister
Master AI & Build your First Coding Portfolio with SkillReactor | Sign Up Now

Learn HTML

1.1 What Is HTML

1.2 Basic Structure Of An HTML Document

2.1 Headings

2.2 Paragraphs

2.3 Input Fields

2.4 Buttons

2.5 Links

2.6 Lists

3.1 Adding Images

3.2 Adding Video And Audio

4.1 Writing Your First HTML Page

5.1 What Is CSS

5.2 How CSS Works With HTML

5.3 CSS Syntax

6.1 Types Of CSS Selectors

6.2 Common CSS Properties

Lesson 7 - Applying CSS To HTML

Lesson 7.1 - Applying CSS To HTML

8.1 Understanding The Box Model

8.2 CSS Box Model Properties

9.1 CSS Positioning

9.2 Float And Clear Properties

10.1 Introduction To Flexbox

10.2 Advance Flexbox Styles

Lesson 7 - Applying CSS To HTML

Lesson 7.1 - Applying CSS To HTML

There are three methods to apply CSS to HTML documents: Inline styles, Internal stylesheets, and External stylesheets. Each method serves different purposes and offers varying levels of flexibility and scalability.

Inline Styles

Inline styles allow you to apply styles directly to HTML elements using the style attribute. This method is suitable for applying unique styles to individual elements.

<p style="color: blue; font-size: 20px;">This is a text.</p>

Internal Stylesheets

Internal stylesheets are defined within the <style> tag inside the HTML document's <head> section. This method is useful for styling a single webpage.

<!DOCTYPE html>
<html>
<head>
  <title>List of Fruits</title>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: blue;
    }
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph styled with an internal stylesheet.</p>
</body>
</html>

External Stylesheets

External stylesheets allow you to create separate CSS files. The HTML document links to this CSS file using the <link> tag in the <head> section. This method is ideal for styling multiple web pages consistently and efficiently, making it suitable for large projects.

Example of an External CSS file:

File name: styles.css

body {
  background-color: lightgrey;
}
h1 {
  color: blue;
}
p {
  font-size: 20px;
}

Linking the External CSS file in your HTML document:

File name: index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>My First Website</title>
</head>
<body>
  <h1>My First Website</h1>
  <p>This is a paragraph styled with an external stylesheet.</p>
</body>
</html>

Using external stylesheets helps maintain a consistent design across multiple web pages and improves the maintainability of your project by separating content and presentation.

PreviousNext