English

CSS Tutorial

CSS3 Tutorial

CSS Advanced

CSS References

CSS Responsive

CSS - Inclusion

Hello there, aspiring web developers! Today, we're going to dive into the exciting world of CSS inclusion. As your friendly neighborhood computer teacher, I'm here to guide you through the various ways we can add some style to our HTML documents. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

CSS - Inclusion

Embedded CSS - The <style> Element

Let's begin with the simplest way to include CSS in your HTML document: the <style> element. Imagine you're getting dressed for a party. The <style> element is like choosing your outfit and putting it on right before you leave the house.

Here's how it looks:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Stylish Page!</h1>
</body>
</html>

In this example, we've defined styles for the body and h1 elements. The body will have a light gray background and use Arial font, while the h1 will be dark gray and centered.

Inline CSS - The style Attribute

Next up, we have inline CSS. This is like accessorizing your outfit with a fancy hat or a cool necklace right as you're walking out the door.

Here's an example:

<p style="color: blue; font-size: 18px;">This is a blue paragraph with a larger font size.</p>

In this case, we've applied styles directly to the <p> tag using the style attribute. The text will be blue and have a font size of 18 pixels.

External CSS - The <link> Element

Now, let's talk about external CSS. This is like having a separate wardrobe full of different outfits that you can choose from for any occasion.

First, create a separate CSS file (let's call it styles.css):

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
    text-align: center;
}

Then, link it to your HTML file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Stylish Page!</h1>
</body>
</html>

The <link> element tells the browser where to find our CSS file. It's like giving directions to your wardrobe!

Imported CSS - @import Rule

The @import rule is like having a personal stylist who brings you outfits from different stores. It allows you to import one CSS file into another.

In your main CSS file:

/* main.css */
@import url('typography.css');
@import url('colors.css');

body {
    background-color: #f0f0f0;
}

Here, we're importing two other CSS files into our main CSS file. It's a great way to organize your styles!

CSS Rules Overriding

Now, let's talk about what happens when styles conflict. It's like when you're trying to decide between two outfits and one of them has to win out.

Here's a table of CSS specificity, from least specific to most specific:

Selector Type Example Specificity
Element p 1
Class .highlight 10
ID #header 100
Inline style="color: red;" 1000

The more specific a selector is, the higher priority it has. For example:

<style>
    p { color: blue; }
    .highlight { color: yellow; }
    #special { color: green; }
</style>

<p class="highlight" id="special" style="color: red;">What color am I?</p>

In this case, the text will be red because inline styles have the highest specificity.

Handling old Browsers

Sometimes, we need to cater to older browsers that might not understand our fancy new CSS. It's like having a classic outfit ready just in case.

background-color: #f0f0f0; /* Fallback for older browsers */
background-color: rgba(240, 240, 240, 0.5); /* Modern browsers with alpha transparency */

Here, we provide a solid color for older browsers and a semi-transparent color for modern ones.

CSS Comments

Lastly, let's talk about CSS comments. They're like little notes you leave for yourself (or other developers) to explain your style choices.

/* This is a CSS comment */
body {
    background-color: #f0f0f0; /* Light gray background */
    font-family: Arial, sans-serif; /* Using a sans-serif font for better readability */
}

Comments are ignored by browsers but can be incredibly helpful for understanding and maintaining your code.

And there you have it, folks! We've covered the various ways to include CSS in your HTML documents, from embedded styles to external stylesheets. Remember, practice makes perfect, so don't be afraid to experiment with different methods and see what works best for your projects. Happy styling!

Credits: Image by storyset

Previous Tutorial:
CSS - Selectors
Next Tutorial:
CSS - Measurement Units