}css
CSS (Cascading Style Sheets) is used to style HTML elements. It allows web developers to control the layout, colors, fonts, and spacing of web pages.
🌟 Inline CSS - Applied directly inside an HTML tag using the `style` attribute.
🌟 Internal CSS - Defined inside the `<style>` tag within the `<head>` section of an HTML document.
🌟 External CSS - Stored in a separate `.css` file and linked to the HTML document using `<link>`.
🔸 **Inline CSS Example:**
<p
style="color: blue; font-size: 18px;">This is styled
using inline CSS.</p>
🔸 **Internal CSS Example:**
<style>
p { color: red; font-size: 20px; }
</style>
<p>This
is styled using internal CSS.</p>
🔸 **External CSS Example:**
<link
rel="stylesheet" href="styles.css">
<p>This
is styled using an external CSS file.</p>
🌟 **Class (`.`) - Used to style multiple elements with the same styling.**
<style>
.highlight { color: green; font-weight:
bold; }
</style>
<p class="highlight">This
paragraph is highlighted.</p>
🌟 **ID (`#`) - Used to uniquely style a single element.**
<style>
#mainTitle { color: purple; font-size:
24px; }
</style>
<h1 id="mainTitle">This
is a unique title.</h1>
🌟 **Changing Font Color:**
<p style="color: blue;">This text is blue.</p>
🌟 **Changing Background Color:**
<body style="background-color: yellow;">
🌟 **Using Background Image:**
<body style="background-image:
url('background.jpg');">
🌟 **Character Spacing (`letter-spacing`):**
<p style="letter-spacing: 3px;">This text has
more space between letters.</p>
🌟 **Line Height (`line-height`):**
<p style="line-height: 1.8;">This paragraph has
increased line height.</p>
🌟 **Adding a Border (`border`):**
<p style="border: 2px solid black;">This text
has a black border.</p>
🌟 **Adding an Outline (`outline`):**
<p style="outline: 2px dashed red;">This text
has a red dashed outline.</p>
🌟 **Margins - Controls the space outside an element.**
<p style="margin: 20px;">This paragraph has a
margin of 20px.</p>
🌟 **Padding - Controls the space inside an element (inside the border).**
<p style="padding: 15px;">This paragraph has
15px padding.</p>
🌟 Font Family (`font-family`) - Used to define the typeface of text.
p {
font-family: Arial, sans-serif;
}
🌟
Font Size (`font-size`) - Used to control the size of the text.
h1 {
font-size: 24px;
}
🌟 Change Color on Hover (`:hover`) - Used to change an element’s appearance when hovered.
button:hover {
background-color: blue;
color:
white;
}
🌟 Add Underline on Hover
a:hover {
text-decoration: underline;
}
🌟 Left Alignment (`text-align: left;`)
p {
text-align: left;
}
🌟 Center Alignment (`text-align: center;`)
h2 {
text-align: center;
}
🌟 Right Alignment (`text-align: right;`)
div {
text-align: right;
}
🌟 Justify Alignment (`text-align: justify;`)
p {
text-align: justify;
}
🌟 Center an Image
img {
display: block;
margin: 0 auto;
}
🌟 Float Image to the Left
img {
float: left;
margin-right: 10px;
}
🌟 Float Image to the Right
img {
float: right;
margin-left: 10px;
}
🌟 Style All `<p>` Elements
p {
color: green;
font-size: 18px;
}
🌟
Style All `<h1>` Headings
h1 {
font-weight: bold;
text-transform: uppercase;
}
🌟
Style All Links (`<a>`)
a {
color: red;
text-decoration: none;
}