HTML Style

HTML (HyperText Markup Language) is used to structure content on the web, while CSS (Cascading Style Sheets) is used to style that content. Here’s a basic overview of how you can use CSS to style HTML:

Inline Styles

You can add styles directly to an HTML element using the style attribute.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Inline Style Example</title>
</head>
<body>
    <p style="color: blue; font-size: 20px;">This is a blue-colored, 20px font-size paragraph.</p>
</body>
</html>

Internal Styles

You can include CSS within the <style> tag in the <head> section of your HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal Style Example</title>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This is a green-colored, 18px font-size paragraph.</p>
</body>
</html>

External Styles

You can link to an external CSS file using the <link> tag in the <head> section of your HTML document. This is useful for maintaining styles across multiple pages.

Example:

HTML File (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>External Style Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This paragraph is styled using an external CSS file.</p>
</body>
</html>

CSS File (styles.css):

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

CSS Selectors

Selectors are used to target HTML elements for styling. Here are a few common selectors:

Element Selector: Targets all elements of a specific type.
```
p {
    color: purple;
}
```
Class Selector: Targets elements with a specific class attribute. Classes are prefixed with a dot (.).
```
.highlight {
    background-color: yellow;
}
```
ID Selector: Targets a specific element with a unique ID. IDs are prefixed with a hash (#).
```
#main-header {
    text-align: center;
}
```
Attribute Selector: Targets elements with a specific attribute.
```
[type="text"] {
    border: 1px solid gray;
}
```

Combining Selectors

You can combine selectors to target more specific elements:

/* Targeting paragraphs within a specific div */
div.special p {
    color: orange;
}

/* Targeting elements with both class "box" and ID "special" */
#special.box {
    border: 2px solid blue;
}

This is just a basic overview. CSS has a lot of powerful features and techniques for styling your HTML, including flexbox, grid layout, animations, and media queries for responsive design. If you have any specific styling questions or need examples, feel free to ask!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us