CSS Basics
CSS (Cascading Style Sheets) is a styling language used to define the
look and feel of HTML documents. It allows you to control layout,
colors, fonts, spacing, and other visual aspects of your web pages.
Inline CSS: Applies styles directly within an HTML tag using
the style attribute.
<p style="color: red;">This text is red.</p>
Internal CSS: Defined within a <style> block in the HTML
<head> section.
<head>
<style>
p { color: blue; }
</style>
</head>
External CSS: Stored in a separate .css file and linked to the
HTML file.
<link rel="stylesheet" href="styles.css">
CSS Selectors
Selectors are patterns used to select HTML elements to apply styles
to.
1. Universal Selector (*): Selects all elements.
* { color: black; }
2. Element Selector: Selects all elements of a specific type.
p { font-size: 16px; }
3. ID Selector: Selects an element with a specific id. Prefix with #.
#header { background-color: lightblue; }
4. Class Selector: Selects all elements with a specific class. Prefix
with ..
.content { padding: 10px; }
5. Attribute Selector: Selects elements with a specific attribute.
[type="text"] { border: 1px solid #ccc; }
6. Combinators:
o Descendant Selector: Selects elements that are inside
another element.
div p { color: gray; }
o Child Selector (>): Selects immediate child elements.
div > p { color: blue; }
o Adjacent Sibling Selector (+): Selects an element that is
the immediate sibling of another.
h1 + p { margin-top: 0; }
o General Sibling Selector (~): Selects all siblings of a
specified element.
h1 ~ p { color: green; }
CSS Colors
CSS provides different ways to specify colors for elements.
1. Named Colors: Common colors like red, blue, green.
p { color: red; }
2. HEX Colors: Uses hexadecimal values (#RRGGBB format).
h1 { color: #ff5733; }
3. RGB and RGBA: RGB specifies colors with red, green, and
blue values, while RGBA includes an alpha (opacity)
component.
body { background-color: rgb(255, 0, 0); }
div { background-color: rgba(0, 0, 255, 0.5); }
4. HSL and HSLA: HSL stands for hue, saturation, and lightness,
while HSLA includes an alpha channel.
p { color: hsl(120, 100%, 50%); }
p { color: hsla(240, 100%, 50%, 0.3); }
CSS Background
Background properties are used to define the background color,
image, position, and more for HTML elements.
1. Background Color: Sets a background color for an element.
body { background-color: lightgray; }
2. Background Image: Adds an image to the background.
div { background-image: url('background.jpg'); }
3. Background Repeat: Controls whether the background image
is repeated.
div { background-repeat: no-repeat; }
4. Background Position: Positions the background image.
div { background-position: center; }
5. Background Attachment: Determines whether the background
scrolls with the page or is fixed.
div { background-attachment: fixed; }
6. Shorthand Background Property: Sets all background
properties in one line.
body { background: #ffffff url('bg.png') no-repeat right top; }
CSS Borders
Borders are used to create visual separation around elements.
1. Border Style: Specifies the style of the border (solid, dashed,
dotted, double).
p { border-style: solid; }
2. Border Width: Specifies the width of the border.
p { border-width: 2px; }
3. Border Color: Sets the color of the border.
p { border-color: blue; }
4. Shorthand Border Property: Combines style, width, and color.
p { border: 2px solid red; }
5. Rounded Borders (Border Radius): Adds rounded corners to
elements.
div { border-radius: 10px; }
Examples
Example 1: Applying Borders and Background
.box {
background-color: lightblue;
border: 2px solid blue;
border-radius: 8px;
padding: 20px;
}
Example 2: Styling with Selectors
#header {
color: white;
background-color: navy;
}
.main-content p {
font-size: 18px;
color: gray;
}
