1. What is CSS?
CSS (Cascading Style Sheets) is used to control the layout and appearance of HTML elements. It defines how HTML elements are displayed on the screen. CSS allows for separation of content (HTML) and style (CSS), making it easier to manage and update a website.
2. Basic Syntax
The syntax of CSS consists of selectors, properties, and values.
selector {
property: value;
}
- Selector: Targets an HTML element (like a
<p>
,<div>
, orclass
). - Property: Specifies what aspect of the element you want to style (like
color
,font-size
, ormargin
). - Value: Defines the value you want to apply for that property (like
red
,16px
, or20px
).
3. Selectors in CSS
Selectors define which elements the styles will apply to.
- Element Selector: Targets HTML tags.
p { color: blue; }
- Class Selector: Targets elements with a specific class attribute.
.highlight { background-color: yellow; }
- ID Selector: Targets an element with a specific ID attribute.
#header { font-size: 24px; }
- Universal Selector: Targets all elements.
* { margin: 0; padding: 0; }
4. Box Model Concept
In CSS, every element is considered a box. The box model is crucial for understanding element sizing and layout.
- Content: The actual content (text, images, etc.).
- Padding: Space between the content and the border.
- Border: The outer edge around the padding (if any).
- Margin: Space outside the border, separating elements.
Here’s an example of applying the box model:
div {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}
5. Positioning
CSS offers several ways to position elements on the page:
- Static (default): Elements are positioned according to the normal document flow.
p { position: static; }
- Relative: Element is positioned relative to its normal position.
div { position: relative; top: 10px; left: 20px; }
- Absolute: Element is positioned relative to the nearest positioned ancestor (anything other than static).
.popup { position: absolute; top: 50px; left: 100px; }
- Fixed: Element is positioned relative to the viewport, and stays fixed even when the page is scrolled.
header { position: fixed; top: 0; width: 100%; }
6. Flexbox
Flexbox is a modern layout model in CSS used to arrange items in rows or columns.
.container {
display: flex;
justify-content: center; /* Horizontally center items */
align-items: center; /* Vertically center items */
}
.item {
flex: 1; /* Items will expand to fill the container */
}
7. Grid Layout
The CSS Grid Layout provides a two-dimensional grid-based approach to arranging elements.
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns, 1:2 ratio */
gap: 20px; /* Space between items */
}
.item {
background-color: lightgray;
}
8. Text Styling
There are various properties to style text, such as:
- font-family: Specifies the font of the text.
p { font-family: Arial, sans-serif; }
- font-size: Specifies the size of the font.
h1 { font-size: 36px; }
- color: Sets the color of the text.
.highlight { color: red; }
- line-height: Controls the spacing between lines of text.
p { line-height: 1.5; }
9. Transitions and Animations
CSS transitions and animations allow for smooth changes to property values.
- Transition: Change an element’s property smoothly over time.
.box { background-color: blue; transition: background-color 0.5s ease; } .box:hover { background-color: red; }
- Animation: Define keyframes to create more complex animations.
@keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } .box { animation: bounce 1s infinite; }
10. Responsive Design with Media Queries
Media queries allow you to apply different styles depending on the screen size, which is essential for responsive design.
/* Default styles (desktop) */
body {
font-size: 18px;
}
/* Mobile styles */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
This is just a start! CSS offers a wide range of properties and techniques to achieve almost any layout or design you can imagine. You can experiment with these concepts to build visually appealing, responsive websites.
#HTML CSS Transitions and Animations #HTML Responsive Design with Media Queries #HTML Selectors in CSS #What is CSS?