Introduction to Using CSS in HTML
CSS, or Cascading Style Sheets, allows us to style and visually enhance our HTML websites. HTML provides structure, while CSS defines the appearance. These two languages go hand in hand on every website.
What is CSS?
CSS is a styling language used to format HTML elements. It lets you define text color, size, margins, backgrounds, positioning, and much more. It helps separate content from design, making websites easier to maintain.
Inline CSS
Inline CSS is written directly into the HTML element using the style attribute. It's quick and easy but not recommended for larger projects.
html
<p style="color: blue;">This text is blue.</p>Internal CSS
Internal CSS is placed within a <style> tag inside the <head> of the HTML file. It's useful when a specific page needs custom styling.
html
<style>
p {
font-size: 18px;
color: green;
}
</style>External CSS
This is the most common method. CSS is placed in a separate file and linked in the <head> of the HTML. It allows you to manage styles for the entire site in one place.
html
<link rel="stylesheet" href="styles.css">Using Classes and IDs
The class attribute can be used on multiple elements. IDs are unique and should only be used once. In CSS, classes are written with a dot (.), and IDs with a hash (#).
html
<p class="note">This is a note</p>
<p id="unique">This is a unique paragraph</p>css
.note {
color: orange;
}
#unique {
font-weight: bold;
}Basic CSS Syntax
Every CSS rule starts with a selector (e.g., h1), followed by curly braces containing property-value pairs. Each line ends with a semicolon.
css
selector {
property: value;
}Summary
Without CSS, a website would be just plain text and structure. CSS provides the visual layer users see. The three main methods – inline, internal, and external – give you flexibility in styling. Learning CSS early is essential, as it's the foundation of all web development.
Select Language
Set theme
© 2025 ReadyTools. All rights reserved.