What is CSS?
CSS (Cascading Style Sheets) is the language we use to style web pages. It's the artistic palette that brings HTML to life, controlling layout, colors, fonts, spacing, and more.
Styling
Define colors, fonts, and visual appearance of elements
Layout
Control positioning and arrangement of elements
Responsive Design
Create layouts that adapt to different screen sizes
Animations
Add dynamic effects and transitions
Evolution of CSS
1994: The Beginning
Håkon Wium Lie proposes CSS while working at CERN alongside HTML creator Tim Berners-Lee
1996: CSS1
CSS Level 1 becomes a W3C Recommendation, introducing basic styling capabilities
1998: CSS2
CSS Level 2 adds positioning, z-index, media types, and bidirectional text
2011: CSS3
CSS Level 3 introduces modules with animations, flexbox, grid, and more
Characteristics of CSS
- Time-saving: CSS allows you to apply styles to multiple HTML elements at once, saving time and effort compared to inline styles.
- Superior to HTML: CSS provides more advanced styling options, such as layout control, typography, and animations, which are not easily achievable with HTML alone.
- Offline browsing: CSS files can be cached by the browser, allowing for faster page loading and offline browsing.
- Separation of concerns: CSS separates the presentation from the content, making it easier to maintain and update the website's appearance.
Three Ways to Insert CSS
Inline CSS
Applied directly to HTML elements
Internal CSS
Written in the HTML file's head section
External CSS
Stored in a separate .css file
1. Inline CSS Example
Applied directly to HTML elements using the style attribute
<p style="color: blue; font-size: 16px; margin: 10px;">This is styled text</p>
2. Internal CSS Example
Written in the HTML file's head section using style tags
<head>
<style>
p {
color: blue;
font-size: 16px;
margin: 10px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
3. External CSS Example
Linked to HTML file using the link tag
<head>
<link rel="stylesheet" href="styles.css">
</head>
Contents of styles.css:
/* styles.css */
p {
color: blue;
font-size: 16px;
margin: 10px;
}
.highlight {
background-color: yellow;
}
Priorities of CSS
Understanding CSS specificity is crucial for managing styles effectively. Here's the complete hierarchy from highest to lowest priority:
-
!important Declaration
Overrides all other styles
p { color: blue !important; } -
Inline Styles
Styles applied directly to HTML elements
<p style="color: blue;">Text</p> -
ID Selectors
Unique identifiers for elements
#uniqueElement { color: blue; } -
Class, Attribute, and Pseudo-class Selectors
Reusable styles for multiple elements
.highlight { color: blue; } -
Element Selectors
Styles applied to HTML tags
p { color: blue; }
CSS Syntax
The basic CSS syntax consists of three parts:
Selector{ Property:Value; }
Selector
The HTML element or elements you want to style.
p, h1, div {
Property
The specific style attribute you want to change.
color: blue;
Value
The new value you want to apply to the property.
font-size: 16px;
Complete Example
p, h1, div {
color: blue;
font-size: 16px;
margin: 10px;
}
CSS Selectors
1. Universal Selector (*)
Applies styles to all elements on the page.
* {
margin: 0;
padding: 0;
}
2. ID Selector (#)
Targets a unique element based on its ID attribute.
#my-element {
color: red;
}
3. Class Selector (.)
Targets elements based on their class attribute.
.my-class {
font-size: 18px;
}
4. Attribute Selector ([attr])
Targets elements based on their attribute values.
a[target="_blank"] {
color: green;
}
5. Attribute Equal Value Selector ([attr="value"])
Targets elements with a specific attribute value.
input[type="text"] {
border: 1px solid #ccc;
}
4. Group Selector (element, element)
Applies the same style to multiple elements.
h1, h2, h3 {
font-weight: bold;
}
5. Descendant Selector (element element)
Targets elements that are descendants of a specified element.
div p {
color: blue;
}
6. Child Selector (element > element)
Targets direct children of a specified element.
ul > li {
list-style-type: square;
}
7. Adjacent Sibling Selector (element + element)
Targets an element that is immediately preceded by another element.
h1 + p {
font-style: italic;
}
8. General Sibling Selector (element ~ element)
Targets all siblings of an element that follow it.
h1 ~ p {
font-size: 14px;
}
9. :nth-child() Pseudo-Class
Targets elements based on their position in a parent element.
li:nth-child(2) {
background-color: lightgray;
}