HTML
📌 HTML Css
HTML CSS page provides a basic guide on CSS (Cascading Style Sheets) used to add styles to HTML documents. CSS is used to control the appearance and layout of a web page. The page explains what CSS is, how to use it, and the different ways to apply styles.
What is CSS?
Some common color names:
- CSS is a language used to define colors, fonts, sizes, alignment, backgrounds, borders, and more for HTML elements.
- With CSS, it’s possible to control the appearance of multiple web pages using a single stylesheet.
- The term Cascading means that a style applied to a parent element will also affect all its child elements.
- For example, a style applied to the
<body>tag will apply to all headings and paragraphs inside it.
Ways to Use CSS
CSS can be applied to HTML documents in three different ways:
1. Inline CSS
Some common color names:
- Adding styles directly inside an HTML element.
- This method applies the style only to that specific element.
Example:
HTML
<h1 style="color:blue;">Blue Heading</h1>
<p style="color:red;">Red paragraph.</p>- Here, the
<h1>appears in blue, and the<p>appears in red.
2. Internal CSS
Some common color names:
- Defining styles inside a
<style>tag in the HTML<head>section. - This method applies only to that page.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- In this example, the page background is light blue, the heading is blue, and the paragraph is red.
3. External CSS
- Writing styles in a separate CSS file and linking it to the HTML document using the
<link>tag. - This method allows the same style to be used across multiple pages.
Example:
CSS
style.css
body {background-color: lightblue;}
h1 {color: blue;}
p {color: red;}
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- Here, an external CSS file is used to define the styles.
Summary
- Inline CSS → styles added directly to an element.
- Internal CSS → styles defined inside a
<style>tag. - External CSS → styles defined in a separate file and linked to HTML.