Cookie Consent by Free Privacy Policy Generator 📌 EXCITING WAYS TO ADD CSS IN HTML: UNDERSTANDING INLINE, INTERNAL & EXTERNAL


✅ EXCITING WAYS TO ADD CSS IN HTML: UNDERSTANDING INLINE, INTERNAL & EXTERNAL


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

This article provides a comprehensive guide for Web development learners on CSS styling methods.

CSS stands for Cascading Style Sheet and is defined as a programming language used to design website content. HTML (Hyper Text Mark Up Language) is a programming language for creating websites' structure and content, let's say that it was possible to do some basic styling using HTML. Therefore, both languages work hand in hand.

**

DISCUSSING TYPES OF CSS

**

There are 3 types of CSS. Below is a highlight of the same;

Inline Styling: This is done when we apply a style directly to a particular HTML element. In other words, we use the style attribute within an HTML Tag. This style overrides Internal and External styles.

Embedded/ Internal Styling: This is done when we include our style in the HTML document; usually we declare the <style> tag at the head section of the HTML file.

External Styling: When we write our style in a separate file with a .css extension, then apply style properties to the file. A <link> tag is then used to link this file to the HTML file.

Image description

Note: We will be using the VS Code editor and will go ahead to create both the HTML and CSS files represented below:

We will also create an HTML code with the title; ‘Types of CSS’ and a paragraph <p> ’I am learning CSS styles, it’s not easy but I am determined to commit at least 2 hours daily just to learn’. We will also create a CSS file and utilize it later.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

Image description

Below is the output that we get on the browser with no styling.

Image description

HOW TO ADD INTERNAL STYLING WITH CODE EXAMPLES

We will go ahead and apply internal styling with the code above. Think about it for a moment, how do you change the color of the paragraph? Well, here is how you do it using the internal styling; see the below code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
</head>
<body>
    <p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

The Output is as below on the browser;

Image description

See? We have used the style attribute within the paragraph tag <p> to make the paragraph color red.

HOW TO ADD EMBEDDED/INTERNAL STYLING WITH CODE EXAMPLES

We will also go ahead and apply the embedded or internal style to our paragraph above; remember, in this type of CSS, we declare the <style> tag at the head section of our HTML file as per the below, and for that case, let's pick a different color for our paragraph, let's go by color BLUE. It's important to note that all rulesets must have the opening and closing curly braces in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

Below is the final Output of the code above;

Image description

What do you notice here? Did the color change to Blue? It remained Red, right? This is because Inline styling is much stronger and overrides Internal and External styles. To change the outcome, we will have to eliminate the inline style and when we do, the outcome is as below;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>

Image description

HOW TO ADD EXTERNAL STYLING WITH CODE EXAMPLES

Remember we created a file by the name style.css? This is where we will make use of it. So we will go ahead and open the style.css file and declare our style on the paragraph as below; To note, Internal/Embedded styling is much stronger and overrides External style. So we shall eliminate the internal style in our HTML file.

We must link our HTML and CSS files together otherwise the styles will not affect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Types of CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <p>I am learning types of CSS, it's not easy but I am determined to commit at
        least 2 hours daily to just learn</p>
</body>
</html>


p {
    color:darkorange;
}

This is our output on the browser.

Image description

NOTE: It’s important to note that we have only worked with one Property Type, the Color, otherwise many CSS Properties and decorations can be applied including background, borders, positioning, etc.

There is also another type of CSS called Importing Style which is not commonly used. The style is somehow similar to linking; however, the syntax for importing the style sheet is @import followed by the keyword URL and the actual URL of the style sheet.

**

IMPORTANCE OF CSS IN HTML

**

CSS is a critical component for web development as it provides the required tools for styling and designing websites. HTML alone provides the structure of a website, and CSS is majorly responsible for making a website visually appealing.

**

SUMMARY

**

We have discussed the different types of CSS and how they can be used. All these styles are equally important as they style up websites and their contents differently. Developers can make informed decisions on which style to go for and when to use each style.

We have only discussed the basics of CSS, building an eye-catching website requires a deep understanding of both HTML and CSS. Beginner developers are encouraged to practice the different styles.

...

✅ EXCITING WAYS TO ADD CSS IN HTML: UNDERSTANDING INLINE, INTERNAL & EXTERNAL


📈 89.4 Punkte

✅ Understanding CSS: Advantages and Disadvantages of Inline, Internal, and External Styles


📈 53.01 Punkte

✅ how to use inline, internal, and external CSS in HTML


📈 48.93 Punkte

✅ how to use inline, internal, and external CSS in HTML


📈 48.93 Punkte

✅ Difference between Inline, Internal and External CSS


📈 44.63 Punkte

✅ External CSS to Inline CSS Converter


📈 41.87 Punkte

✅ Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 37.65 Punkte

✅ ✨ CSS Evolves - Discover Inline if() & CSS Flow Charts


📈 35.43 Punkte

✅ Tailwind CSS Is So Much More Than Just Inline CSS


📈 33.31 Punkte

✅ Low CVE-2022-1829: Inline google maps project Inline google maps


📈 33.27 Punkte

✅ Why we add CSS and three ways to insert CSS


📈 31.18 Punkte

✅ Firefox Blocks Inline and Eval JavaScript on Internal Pages to Prevent Injection Attacks


📈 27.73 Punkte

✅ Firefox Blocks Inline and Eval JavaScript on Internal Pages to Prevent Injection Attacks


📈 27.73 Punkte

✅ How to create navigation menu with HTML CSS step by step | web design tutorial | HTML CSS tutorial


📈 25.28 Punkte

✅ CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 25.01 Punkte

✅ Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


📈 25.01 Punkte

✅ A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 25.01 Punkte

✅ Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 25.01 Punkte

✅ Inline if() in CSS 🤔: What You Need to Know About This Upcoming Feature


📈 24.97 Punkte

✅ Learn CSS by Building the Microsoft Logo 2 Different Ways in Pure CSS


📈 24.25 Punkte

✅ What are some of the most exciting ways you've seen Linux used to repurpose old Android phones?


📈 23.03 Punkte

✅ Modern Web Development: Centering DIVs in new exciting wrong ways with AI!


📈 23.03 Punkte

✅ Internal Linking yang Baik: Cara Meningkatkan SEO On-Page dengan Strategi Internal Linking yang Tepat


📈 22.19 Punkte

✅ Microsoft’s lagging internal AI efforts sparked OpenAI investment, internal email reveals


📈 22.19 Punkte

✅ Internal Developer Platform vs Internal Developer Portal


📈 22.19 Punkte

✅ How To Add A Serverless Authentication Microservice To Your HTML, CSS & Javascript App


📈 21.7 Punkte

✅ Attackers can hide 'external sender' email warnings with HTML and CSS


📈 21.2 Punkte

✅ Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti


📈 20.98 Punkte

✅ Complete Website using HTML And CSS | CSS Project


📈 20.98 Punkte

✅ HTML and CSS and JS icons (css pure)


📈 20.98 Punkte

✅ HTML Inline vs. Block Elements


📈 20.94 Punkte











matomo

Datei nicht gefunden!