CSS (Cascading Style Sheets) is used to style HTML elements. It controls the layout, colors, and fonts of a webpage.
body{
backgrund-color:lightblue;
}
h1 {
color: black;
text-aligen:center;
}
p {
font-family:verdana;
font-size:20px;
}
p { color: blue; }).classname { background-color: yellow; })#idname { font-size: 20px; })This is a paragraph with blue text (using element selector).
This paragraph has a yellow background (using class selector).
This text is larger (using ID selector).
You can use color names, RGB, HEX values to define colors:
body {
background-color: #f4f4f4;
color: #333;
}
Background Image:
body {
background-image: url('background.jpg');
background-size: cover;
}
CSS allows you to modify the appearance of text:
h1 {
color: darkblue;
font-size: 36px;
text-align: center;
text-transform: uppercase;
line-height: 1.5;
}
Each HTML element is wrapped in a rectangular box. You can control the padding, border, and margin of this box:
.box {
padding: 20px;
border: 2px solid black;
margin: 10px;
}
CSS layout properties control how elements are arranged on a webpage:
.block {
display: block;
}
.hidden {
display: none;
}
.relative {
position: relative;
top: 20px;
left: 10px;
}
Flexbox is used to create flexible and responsive layouts:
.container {
display: flex;
justify-content: space-between;
}
.item {
padding: 20px;
background-color: lightblue;
}
CSS Grid allows for creating grid-based layouts:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #b3e5fc;
padding: 20px;
}
CSS allows you to add animations and transitions to elements:
.box:hover {
transform: scale(1.2);
transition: transform 0.3s ease-in-out;
}
Pseudo-classes apply styles to elements in special states, and pseudo-elements allow targeting parts of an element.
/* Pseudo-class example: */
a:hover {
color: red;
}
/* Pseudo-element example: */
p::first-line {
font-weight: bold;
}
Hover over the link to see the effect.
This is a paragraph where the first line will be bold.
CSS variables make your code more maintainable by allowing you to reuse values:
:root {
--main-color: #4CAF50;
--padding: 10px;
}
body {
background-color: var(--main-color);
padding: var(--padding);
}
Advanced CSS selectors allow more precision when targeting elements:
parent > childelement + siblingelement ~ siblings[attribute=value] /* Example: */
div > p {
color: red;
}
input[type="text"] {
border: 1px solid blue;
}
Media queries help you create responsive layouts that adapt to different screen sizes:
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
body {
background-color: lightblue;
}
}
CSS transforms let you manipulate the appearance of elements using rotate, scale, and translate:
.rotate {
transform: rotate(45deg);
}
.translate {
transform: translate(50px, 100px);
}
The transition property allows smooth transitions between styles over a specific duration.
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
The @keyframes rule allows you to create animations by gradually changing styles over time.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.animate {
width: 100px;
height: 100px;
background-color: red;
animation: example 3s infinite;
}
Flexbox layout allows for responsive design by adjusting the distribution of space within a container.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
}
The CSS Grid layout provides a flexible way to organize content into rows and columns.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
Media queries allow you to apply different styles depending on the screen size or device.
@media only screen and (max-width: 600px) {
.responsive-box {
background-color: lightblue;
}
}
@media only screen and (min-width: 600px) {
.responsive-box {
background-color: lightcoral;
}
}
The z-index property determines the stacking order of elements along the z-axis.
.z-box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
}
.z-box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1;
}
The shape-outside property allows content to wrap around custom shapes.
.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
clip-path: circle(50%);
background: lightcoral;
}
This text will wrap around the circular shape. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Filters allow you to apply visual effects to elements, such as blur, brightness, and contrast.
.filter-box {
width: 200px;
height: 200px;
background-image: url('image.jpg');
filter: blur(5px) brightness(0.8);
}
CSS variables allow you to define reusable values for properties.
:root {
--main-bg-color: lightblue;
--main-text-color: navy;
}
.variable-box {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: 20px;
}
CSS provides different positioning methods: static, relative, absolute, fixed, and sticky.
.relative-box {
position: relative;
top: 20px;
left: 20px;
background-color: lightcoral;
width: 100px;
height: 100px;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
background-color: lightgreen;
width: 100px;
height: 100px;
}
Pseudo-classes like :hover and pseudo-elements like ::before allow you to style elements based on their state or position.
.hover-box:hover {
background-color: lightgreen;
}
.before-box::before {
content: "Before: ";
color: red;
}
Blend modes determine how an element's content blends with the content behind it.
.blend-box {
background-image: url('image.jpg');
background-color: red;
background-blend-mode: multiply;
width: 300px;
height: 200px;
}
The object-fit property controls how the content of a replaced element (such as an image or video) is resized to fit its container.
.fit-box img {
width: 300px;
height: 200px;
object-fit: cover;
}
The clip-path and mask properties allow you to hide parts of an element in creative ways.
.clip-box {
width: 200px;
height: 200px;
background-color: lightblue;
clip-path: circle(50%);
}
Writing modes change the direction in which text is laid out. This is useful for vertical text or languages that are read top-to-bottom.
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
background-color: lightyellow;
padding: 10px;
}
CSS counters allow you to create custom numbering for lists and other elements using counter-reset and counter-increment.
ol {
counter-reset: my-counter;
}
li {
counter-increment: my-counter;
}
li::before {
content: counter(my-counter) ". ";
font-weight: bold;
}
Media queries allow you to apply different styles for different screen sizes, making your website responsive.
.box {
width: 100%;
background-color: lightblue;
}
@media (min-width: 600px) {
.box {
width: 50%;
}
}
CSS Grid allows you to create complex grid layouts for your web pages.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
The subgrid value allows nested grid items to inherit the parent's grid lines, making it easier to create consistent layouts.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nested-grid {
display: grid;
grid-template-columns: subgrid;
}
.nested-item {
background-color: lightgreen;
padding: 10px;
text-align: center;
}
Transitions allow you to smoothly animate changes to CSS properties over time.
.transition-box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 0.5s ease;
}
.transition-box:hover {
background-color: lightcoral;
}
CSS animations allow you to create complex animations using keyframes that describe the stages of the animation.
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.animate-box {
width: 100px;
height: 100px;
background-color: lightgreen;
animation: slide 2s infinite alternate;
}
Flexbox is a layout module that allows items to align and distribute space within a container efficiently, even when their size is dynamic or unknown.
.flex-container {
display: flex;
justify-content: space-around;
}
.flex-item {
background-color: lightblue;
padding: 10px;
width: 100px;
text-align: center;
}
CSS Scroll Snap allows you to control the snapping behavior during scrolling, creating more precise scroll points.
.snap-container {
scroll-snap-type: y mandatory;
height: 300px;
overflow-y: scroll;
}
.snap-item {
height: 300px;
scroll-snap-align: start;
background-color: lightblue;
padding: 20px;
margin-bottom: 10px;
}
The multi-column layout allows you to split content into multiple columns, similar to how content is presented in newspapers or magazines.
.multi-column {
column-count: 3;
column-gap: 20px;
}
This is some text that will be split into multiple columns. The layout automatically adjusts the content based on the number of columns.
Object Fit allows you to control how images or media are resized to fit their containers, while Object Position allows you to position the media inside its container.
.fit-container {
width: 300px;
height: 200px;
background-color: lightgray;
}
.fit-image {
width: 100%;
height: 100%;
object-fit: cover;
}
CSS Shapes allow you to wrap text around custom shapes rather than just rectangular boxes.
.shape-container {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
background-color: lightblue;
border-radius: 50%;
}
This text will wrap around the circular shape, creating a more dynamic and visually interesting layout.
CSS Custom Properties allow you to define reusable variables in your stylesheets, making it easier to maintain consistent design values.
:root {
--primary-color: lightblue;
--secondary-color: lightcoral;
}
.variable-box {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: 20px;
}
Box Alignment in CSS allows you to align elements both horizontally and vertically within flex and grid layouts.
.alignment-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.alignment-item {
padding: 20px;
background-color: lightblue;
}
Pseudo-classes and pseudo-elements allow you to style elements based on their state or insert content before or after an element.
a:hover {
color: red;
}
p::before {
content: "Note: ";
font-weight: bold;
}
Hover over the link to see the pseudo-class in action.
This paragraph demonstrates the ::before pseudo-element.
The CSS Grid Layout module allows you to create complex web layouts by using a two-dimensional grid system, offering flexibility in aligning content in rows and columns.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
Flexbox is a one-dimensional layout method for laying out items in rows or columns. It simplifies the process of aligning and distributing space among items in a container.
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
CSS Animations allow you to animate the transitions between various CSS properties, creating smooth, interactive experiences.
.animate-box {
width: 100px;
height: 100px;
background-color: lightcoral;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
CSS Transitions make it easy to change the property values of an element smoothly over a specific duration.
.transition-box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 1s ease;
}
.transition-box:hover {
background-color: lightgreen;
}
CSS Grid and Flexbox are both powerful layout systems, but they serve different purposes. Grid is best for 2D layouts, while Flexbox is for 1D layouts.
/* Flexbox */
.flex-container {
display: flex;
justify-content: space-around;
}
/* Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
CSS Logical Properties allow you to control layout and design in a language-independent way, useful for supporting right-to-left (RTL) or left-to-right (LTR) languages.
.logical-box {
inline-size: 200px;
block-size: 100px;
margin-inline: auto;
padding-block: 20px;
background-color: lightpink;
}
The cascade and specificity in CSS determine how conflicting styles are resolved and which styles are applied to an element based on their importance.
/* Specificity */
p {
color: blue; /* Low specificity */
}
.specific-class {
color: red; /* Higher specificity */
}
#specific-id {
color: green; /* Highest specificity */
}
This text will be green due to CSS specificity.