1.
Text and Font Styling
color: Sets the text color.
font-size: Defines the size of the text.
font-family: Specifies the font style (e.g., Arial, Times New Roman).
font-weight: Makes text bold (normal, bold, lighter, numeric values like
100, 400).
font-style: Sets text style (normal, italic, oblique).
text-align: Aligns text (left, center, right, justify).
text-transform: Changes text case (uppercase, lowercase, capitalize).
text-decoration: Adds/Removes decoration (underline, overline, line-
through, none).
line-height: Adjusts spacing between lines.
letter-spacing: Controls space between letters.
word-spacing: Adjusts space between words.
2. Background Styling
background-color: Sets the background color.
background-image: Adds an image as the background.
background-repeat: Repeats or stops repeating the background image
(repeat, no-repeat).
background-size: Defines the size of the background (cover, contain, or
specific dimensions like 100px).
background-position: Positions the background image (center, top, left).
background-attachment: Fixes the background during scrolling (fixed,
scroll).
3. Borders and Outline
border: Sets the border for an element (border: 2px solid black;).
border-width: Specifies the width of the border.
border-style: Defines the border type (solid, dotted, dashed, double, none).
border-color: Sets the border color.
border-radius: Creates rounded corners.
outline: Adds a line outside the border.
outline-color: Sets the outline color.
outline-style: Specifies the outline style.
4. Box Model (Spacing)
margin: Creates space outside the element.
padding: Creates space inside the element.
width: Sets the width of the element.
height: Sets the height of the element.
max-width: Specifies the maximum width.
max-height: Specifies the maximum height.
box-shadow: Adds a shadow to the element.
5. Positioning and Layout
display: Defines how an element is displayed (block, inline, flex, grid,
none).
position: Positions an element (static, relative, absolute, fixed, sticky).
top, right, bottom, left: Positions an element relative to its container.
codes implementation:
1.Inline CSS (Directly in HTML elements):
html
<p style="color: red;">This is red text.</p>
2.Internal CSS (Inside a <style> tag in the HTML file):
html
<style>
body {
background-color: lightblue;
</style>
3.External CSS (In a separate CSS file):
HTML File:
html
<link rel="stylesheet" href="styles.css">
CSS File (styles.css):
css
Copy code
body {
background-color: lightblue;
1. CSS Selectors
Target all elements:
css
*{
margin: 0;
padding: 0;
Tag Selector:
css
p{
color: blue;
Class Selector:
css
.highlight {
background-color: yellow;
ID Selector:
css
#main {
font-size: 20px;
2. Colors
Set text color:
css
Copy code
h1 {
color: red;
Set background color:
css
Copy code
body {
background-color: lightgray;
3. Fonts
Font size:
css
Copy code
p{
font-size: 16px;
Font family:
css
Copy code
body {
font-family: Arial, sans-serif;
4. Text Styling
Center-align text:
css
h1 {
text-align: center;
Add bold text:
css
strong {
font-weight: bold;
5. Borders and Padding
Add a border:
css
div {
border: 2px solid black;
Add padding:
css
div {
padding: 10px;
}
6. Margins
Add space around an element:
css
h2 {
margin: 20px;
7. Hover Effects
Change color when hovering:
css
a:hover {
color: green;
8. Background Images
Add a background image:
css
body {
background-image: url('background.jpg');
background-size: cover;
}
