HTML Styles

HTML styles define the visual presentation of web pages using CSS (Cascading Style Sheets). CSS allows you to control the appearance of text, layout, colors, spacing, and more.

There are three primary ways to apply CSS styles in HTML:

Table of Contents

1. Inline CSS (Inside an HTML Tag)

Inline CSS applies styles directly to a specific HTML element using the style attribute. This method is useful for quick styling but is not recommended for large-scale projects because it makes maintenance difficult.

Example:

<p style="color: blue; font-size: 18px; font-weight: bold;">This is an inline-styled paragraph.</p>

HTML

Explanation:

color: blue; → Sets the text color to blue.
font-size: 18px; → Increases text size to 18 pixels.
font-weight: bold; → Makes the text bold.

When to Use Inline CSS?

🔹 For quick styling of a single element.
🔹 Not recommended for large projects due to poor maintainability.

2. Internal CSS (Inside a <style> Tag in the <head> Section)

Internal CSS applies styles to multiple elements in a web page by placing CSS rules inside a <style> tag in the <head> section.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            font-size: 20px;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <h1>Welcome to Internal CSS</h1>
    <p>This is a paragraph styled using internal CSS.</p>
</body>
</html>

HTML

Explanation:

background-color: lightgray; → Changes the page background to light gray.
color: darkblue; → Changes the h1 heading text color to dark blue.
text-align: center; → Centers the heading text.
font-size: 20px; → Increases paragraph text size.
color: darkgreen; → Changes paragraph text color to dark green.

When to Use Internal CSS?

🔹 Useful for single-page projects or testing styles.
🔹 Not ideal for large projects because it does not separate design from content.

3. External CSS (Using a Separate .css File)

External CSS stores styles in a separate .css file and links it to the HTML document using the <link> tag. This is the best practice for styling because it keeps HTML clean and allows reusability across multiple pages.

Example:

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>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to External CSS</h1>
    <p>This is a paragraph styled using an external CSS file.</p>
</body>
</html>

HTML

CSS File (styles.css)

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
    font-size: 28px;
}

p {
    font-size: 18px;
    color: #555;
    text-align: justify;
}

CSS

Explanation:

The HTML file does not contain styles, keeping it clean.
The CSS file is linked using <link rel="stylesheet" href="styles.css">.
All styles are applied consistently across multiple pages.

When to Use External CSS?

🔹 Best for large projects with multiple pages.
🔹 Improves maintainability and consistency.
🔹 Allows caching for better performance.

4. Common CSS Properties Used in Styling

Here are some commonly used CSS properties:

Property	Description	Example
`color`	Sets the text color	`color: red;`
`background-color`	Sets the background color	`background-color: yellow;`
`font-size`	Sets the text size	`font-size: 18px;`
`font-family`	Defines the text font style	`font-family: Arial, sans-serif;`
`text-align`	Aligns text	`text-align: center;`
`margin`	Adds space outside an element	`margin: 10px;`
`padding`	Adds space inside an element	`padding: 15px;`
`border`	Adds a border around an element	`border: 2px solid black;`

5. Advanced CSS Styling Techniques

a. CSS Selectors

Selectors define which HTML elements should be styled.

Selector	Description	Example
`*`	Universal selector (selects all elements)	`* { margin: 0; padding: 0; }`
`p`	Element selector (selects all `<p>` elements)	`p { color: blue; }`
`.className`	Class selector (selects elements with a class)	`.box { background: red; }`
`#idName`	ID selector (selects an element with an ID)	`#header { font-size: 24px; }`

b. CSS Box Model

The box model consists of four parts:

Content – The actual content inside the element.
Padding – Space inside the border around the content.
Border – A line surrounding the padding and content.
Margin – Space outside the border.

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

CSS

c. CSS Flexbox (For Responsive Layouts)

Flexbox makes it easy to align items in a row or column.

.container {
    display: flex;
    justify-content: space-between;
}

CSS

Conclusion

🔹 Inline CSS is quick but not recommended for large projects.

🔹 Internal CSS is useful for small projects but hard to manage.

🔹 External CSS is the best approach for clean and maintainable code.

🔹 Understanding CSS properties, selectors, and layout techniques helps in creating modern and responsive web designs.