CSS / CSS Basics
Applying CSS Styles to HTML
Learn how to bring your HTML to life with CSS styles. In this tutorial, you'll discover the different ways to apply CSS to your HTML and when to use each method.
Section overview
5 resourcesIntroduces the core concepts of CSS, including selectors, properties, and basic styling techniques.
Introduction
This tutorial aims to introduce you to Cascading Style Sheets (CSS), a style sheet language used for describing the look and formatting of a document written in HTML. You will learn the different ways to apply CSS styles to your HTML elements and understand when to use each method.
By the end of this tutorial, you should be able to:
- Understand what CSS is and how it interacts with HTML.
- Inline CSS directly within your HTML tags.
- Use internal CSS in the <style> tag.
- Link to external CSS files using the <link> tag.
Prerequisites: Basic knowledge of HTML is recommended. If you're unfamiliar with HTML, you might want to run through a HTML tutorial before proceeding.
Step-by-Step Guide
Understanding CSS
CSS stands for Cascading Style Sheets. It is used to control the style and layout of multiple web pages all at once. CSS can be added to HTML documents in 3 ways: Inline style, Internal style sheet, External style sheet.
Inline CSS
Inline styles are used to apply the unique style rules to an element, by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.
<p style="color: red;">This is a paragraph.</p>
In the example above, the <p> element is styled with red color text.
Internal CSS
An internal CSS is used to define a style for a single HTML page. The styles are defined within the <style> element, inside the <head> section.
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
Here, all <p> elements on the page will be styled with red color text.
External CSS
An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
In an external style sheet file (styles.css in this case), you might have something like:
p {
color: red;
}
All <p> elements on the pages that link to this style sheet will have red text.
Code Examples
Let's dive into some code examples.
Example 1: Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<div style="color:orange;">This is some text in a div element.</div>
</body>
</html>
In this example, each HTML element is styled differently using inline CSS. The heading is blue and centered, the paragraph is red, and the text in the div is orange.
Example 2: Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
In this example, we apply a linen background to the body, and color the heading blue and the paragraph red.
Example 3: External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
And in the styles.css file:
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
This will style the page in the same way as the previous example, but the CSS is stored in an external file.
Summary
In this tutorial, we have learned how to apply CSS styles to HTML elements in three different ways: inline, internal, and external. The method you choose will depend on your specific needs and the scope of your project.
Practice Exercises
- Create a HTML page and apply inline styles to all elements.
- Convert the inline styles from the first exercise to an internal style sheet.
- Finally, move the styles to an external stylesheet and link it to your HTML page.
Remember, practice makes perfect. The more you code, the better you'll get!
Additional Resources
Happy Coding!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article