This repository contains the code and resources for a CSS Crash Course, designed to teach the fundamentals of Cascading Style Sheets (CSS) in a concise, hands-on format. Whether you're a beginner or need a quick refresher, this guide covers essential CSS concepts and includes a practical project to apply what you learn.
- Introduction to CSS
- Syntax and Selectors
- Colors and Backgrounds
- Box Model
- Typography
- Layouts (Flexbox and Grid)
- Responsive Design
- Pseudo-Classes and Pseudo-Elements
- Transitions and Animations
- Best Practices and Next Steps
- Example Project
- Resources
CSS (Cascading Style Sheets) styles HTML elements to control their appearance, layout, and behavior. You can include CSS in three ways:
- Inline:
<p style="color: blue;">Text</p> - Internal:
<style> p { color: blue; } </style>in<head> - External:
<link rel="stylesheet" href="styles.css">(recommended)
Example:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>/* styles.css */
h1 {
color: navy;
}
Syntax and Selectors CSS uses the
syntax: selector {
property: value;
}
.selectorstargethtmlelements. Element: p {
font-size: 16px;
}
class: .class-name {
color: red;
}
id: #id-name {
background: yellow;
}
universal: * {
margin: 0;
}
attribute: [type= 'text'] {
border: 1px solid;
}
combinators: div p (descendant), ul > li (child);Example:
.highlight {
background: yellow;
}
#header {
text-align: center;
}Specify colors using names, hex, RGB, or RGBA. Background properties style element backgrounds.
- Color:
color: #FF0000;orcolor: rgb(255,0, 0); - Background:
background-color: blue;,background-image: url('image.jpg'); - Gradient:
background: linear-gradient(to right, blue, red);
Example:
.box {
background: linear-gradient(to right, blue, red);
color: white;
}The box model defines an element’s structure: content, padding, border, and margin.
- Padding: Space inside border (
padding: 10px;) - Border: Surrounds padding (
border: 1px solid black;) - Margin: Space outside border (
margin: 20px;) - Box-Sizing: Use
box-sizing: border-boxfor predictable sizing.
Example:
.container {
width: 200px;
padding: 15px;
border: 2px solid gray;
margin: 10px;
box-sizing: border-box;
}Control text appearance with font and text properties.
- Font:
font-family: "Arial", sans-serif;,font-size: 1rem;,font-weight: bold; - Line Height:
line-height: 1.5;,text-align: center;,text-decoration: none;
Example:
p {
font-family: 'Helvetica', sans-serif;
font-size: 1.2rem;
line-height: 1.6;
text-align: justify;
}Modern CSS layouts use Flexbox and Grid for flexible, responsive designs.
- Flexbox:
- Container:
display: flex;,justify-content: space-between;,align-items: center; - Items:
flex: 1;
- Container:
- Grid:
- Container:
display: grid;,grid-template-columns: repeat(3, 1fr);,gap: 10px; - Items:
flex: 1;
- Container:
Example:
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}Make websites adapt to different screen sizes using relative units and media queries.
- Units:
rem,em,vw,vh,%(relative);px(fixed) - Media Queries:
@media (max-width: 600px) {
body {
font-size: 14px;
}
}Example:
.responsive-box {
width: 100%;
max-width: 800px;
margin: 0 auto;
}Add interactivity and styling with pseudo-classes and pseudo-elements.
- Pseudo-Classes:
:hover, :focus- Example:
a:hover { color: red; }
- Example:
- Pseudo-Elements:
::before,::after- Example:
.box::before {
content: '★';
color: gold;
}Create smooth effects with transitions and animations.
- Transitions:
transition: property duration timing-function;
Example:
.box {
width: 100px;
transition: width 0.3s ease;
}
.box:hover {
width: 200px;
}- Animations: Use
@keyframesfor custom animations. Example:
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.animate {
animation: slide 2s infinite;
}- Best Practices:
- Use external stylesheets.
- Keep selectors simple and specific.
- Apply
box-sizing: border-box;globally. - Test responsiveness across devices.
- Next Steps:
- Explore CSS frameworks (e.g., Bootstrap, Tailwind).
- Learn preprocessors (e.g., Sass).
- Build projects like portfolios or landing pages.
This repository includes a simple webpage demonstrating the concepts covered. The project features:
- A centered header with a gradient background.
- A flexbox layout with three cards.
- Hover effects on cards.
- Responsive design for mobile devices.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>CSS Crash Course</h1>
</header>
<main>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</main>
</body>
</html>styles.css:
* {
box-sizing: border-box;
margin: 0;
}
header {
background: linear-gradient(to right, #81ff6b, #4231b0);
text-align: center;
padding: 20px;
color: white;
}
main {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
}
.card {
background: #f4f4f4;
padding: 15px;
border-radius: 8px;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
@media (max-width: 600px) {
main {
flex-direction: column;
align-items: center;
}
}- Clone this repository:
git clone <repo-url> - Open index.html in a browser to view the styled webpage.
- Experiment with the CSS to try different styles or layouts.
Happy coding! Contributions to improve this project or crash course are welcome. Feel free to open an issue or submit a pull request. </repo-url>