| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. CSS separates the content of the document (written in HTML) from its presentation, including layout, colors, and fonts. Here’s a detailed overview of how CSS works with HTML, along with examples:
Basics of CSS
CSS Syntax
CSS is made up of selectors and declaration blocks.
- Selector: Indicates which HTML elements the style applies to.
- Declaration Block: Contains one or more declarations separated by semicolons.
- Declaration: Consists of a property and a value, separated by a colon.
selector {
property: value;
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}
In this example, all <h1> elements will be styled with a blue color and a font size of 24 pixels.
CSS Selectors
Selectors are used to “select” the HTML elements you want to style.
- Type Selector: Selects all elements of a given type.
p {
color: red;
}
- Class Selector: Selects elements with a specific class attribute
.class-name {
color: green;
}
- ID Selector: Selects an element with a specific ID attribute.
#id-name {
color: purple;
}
- Attribute Selector: Selects elements with a specific attribute.
a[target="_blank"] {
color: orange;
}
CSS Box Model
Every HTML element is treated as a box by the CSS Box Model, which consists of:
- Content: The actual content of the box (text, images, etc.).
- Padding: Clears an area around the content. The padding is transparent.
- Border: A border that goes around the padding and content.
- Margin: Clears an area outside the border. The margin is transparent.
div {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
CSS Layouts
Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows or columns.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid
Grid is a two-dimensional layout system for rows and columns
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
Example: HTML and CSS Working Together
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1 id="main-title">Hello World!</h1>
<p class="text">This is a paragraph.</p>
<p class="text">This is another paragraph.</p>
</div>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#main-title {
color: #333;
text-align: center;
}
.text {
color: #666;
line-height: 1.6;
}
Explanation:
HTML Structure:
- A
<div>element with the classcontainerwraps the content. - The
<h1>element with the IDmain-titleis used for the main heading. - Two
<p>elements with the classtextare used for paragraphs.
- A
CSS Styles:
- The
bodyselector sets the global styles for the body, including font family, background color, margin, and padding. - The
.containerclass styles the container with a maximum width, center alignment, padding, background color, border radius, and a shadow effect. - The
#main-titleID selector styles the main heading with color and text alignment. - The
.textclass styles the paragraphs with color and line height
- The
By linking the CSS file to the HTML document, the styles defined in the CSS are applied to the HTML elements, creating a visually styled webpage.
