1. CSS Home
CSS is used to style and layout web pages...
/* Example: Applying CSS to an element */
h1 {
color: blue;
font-size: 24px;
}
This is a styled heading
2. CSS Introduction
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document...
/* CSS Example */
p {
font-family: Arial, sans-serif;
line-height: 1.5;
}
This is a paragraph styled with CSS.
3. CSS Syntax
CSS uses a simple syntax consisting of selectors, properties, and values...
/* Syntax Example */
selector {
property: value;
}
Example of CSS syntax
4. CSS Selectors
CSS selectors are patterns used to select the elements you want to style...
/* Selector Example */
.example {
background-color: yellow;
}
5. CSS How To
You can add CSS to your HTML document in three ways: inline, internal, or external...
CSS can be added via external stylesheets.
6. CSS Comments
Comments are used to explain the code and are ignored by the browser...
/* This is a CSS comment */
body {
background-color: lightgrey;
}
The background is styled using CSS.
7. CSS Colors
CSS allows you to define colors using names, HEX codes, RGB, HSL, and more...
/* Color Example */
h1 {
color: red;
}
This is a red heading.
8. CSS Backgrounds
CSS provides properties to style the background of elements...
/* Background Example */
body {
background-image: url('background.jpg');
background-size: cover;
}
The background is styled with an image.
9. CSS Borders
CSS borders are used to define the boundary of an element...
/* Border Example */
div {
border: 2px solid black;
}
10. CSS Margins
CSS margins are used to create space around elements outside their border...
/* Margin Example */
div {
margin: 20px;
}
11. CSS Padding
CSS padding is used to create space around an element's content, inside its border...
/* Padding Example */
div {
padding: 15px;
}
12. CSS Height/Width
CSS allows you to set the height and width of elements...
/* Height and Width Example */
div {
height: 200px;
width: 300px;
background-color: lightblue;
}
13. CSS Box Model
The CSS Box Model describes the rectangular boxes generated for elements...
/* Box Model Example */
div {
margin: 10px;
border: 5px solid black;
padding: 20px;
width: 200px;
}
14. CSS Outline
CSS outlines are lines drawn around elements, outside the border...
/* Outline Example */
p {
outline: 2px dashed red;
}
This paragraph has an outline.
15. CSS Text
CSS provides properties to control the appearance of text...
/* Text Example */
p {
text-align: center;
color: darkgreen;
text-decoration: underline;
}
This is styled text.
16. CSS Fonts
CSS allows you to define custom fonts for your content...
/* Font Example */
p {
font-family: 'Arial', sans-serif;
font-size: 18px;
}
This paragraph uses custom fonts.
17. CSS Icons
CSS makes it easy to include and style icons in your web pages...
/* Icon Example */
.icon {
font-size: 24px;
color: purple;
}
18. CSS Links
CSS allows you to style links in different states like hover, visited, and active...
/* Link Example */
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
19. CSS Lists
CSS provides properties to style ordered, unordered, and definition lists...
/* List Example */
ul {
list-style-type: square;
}
- Item 1
- Item 2
- Item 3
20. CSS Tables
CSS allows you to style tables to improve their appearance...
/* Table Example */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 10px;
}
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
21. CSS Display
CSS display property determines how an element is displayed on the page...
/* Display Example */
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: teal;
}
22. CSS Max-width
The max-width property specifies the maximum width of an element...
/* Max-width Example */
img {
max-width: 100%;
height: auto;
}
23. CSS Position
The position property specifies the type of positioning method used for an element...
/* Position Example */
.box {
position: absolute;
top: 50px;
left: 100px;
}
24. CSS Z-index
The z-index property specifies the stack order of elements...
/* Z-index Example */
.box1 {
position: absolute;
z-index: 1;
background-color: red;
}
.box2 {
position: absolute;
z-index: 2;
background-color: blue;
}
25. CSS Overflow
The overflow property specifies what happens if content overflows an element's box...
/* Overflow Example */
div {
width: 150px;
height: 100px;
overflow: scroll;
}
26. CSS Float
The float property is used for positioning and formatting content...
/* Float Example */
div {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
27. CSS Inline-block
The inline-block property allows elements to sit side by side...
/* Inline-block Example */
div {
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
28. CSS Align
The CSS align properties help in aligning elements within their containers...
/* Align Example */
div {
text-align: center;
}
29. CSS Combinators
CSS combinators explain the relationship between selectors...
/* Combinator Example */
div > p {
color: blue;
}
This paragraph is styled using a child combinator.
30. CSS Pseudo-classes
Pseudo-classes define the special state of an element...
/* Pseudo-class Example */
a:hover {
color: red;
}
31. CSS Pseudo-elements
Pseudo-elements allow you to style specific parts of an element...
/* Pseudo-element Example */
p::first-line {
font-weight: bold;
}
This is a paragraph where the first line is styled.
32. CSS Opacity
Opacity specifies the transparency of an element...
/* Opacity Example */
div {
opacity: 0.5;
}
34. CSS Dropdowns
CSS allows you to create dropdown menus...
/* Dropdown Example */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
35. CSS Image Gallery
CSS helps you create stylish image galleries...
/* Image Gallery Example */
.gallery {
display: flex;
gap: 10px;
}
.gallery img {
width: 100px;
height: auto;
}
36. CSS Image Sprites
CSS sprites combine multiple images into one...
/* Image Sprite Example */
.sprite {
background: url('sprite.png') no-repeat;
}
.icon {
width: 50px;
height: 50px;
background-position: -50px -50px;
}
37. CSS Attribute Selectors
CSS attribute selectors are used to style elements based on their attributes...
/* Attribute Selector Example */
input[type="text"] {
border: 2px solid blue;
}
38. CSS Forms
CSS allows you to style form elements for better user experience...
/* Form Example */
input {
padding: 10px;
border: 1px solid gray;
border-radius: 5px;
}
39. CSS Counters
CSS counters are used to add numbering to elements...
/* Counter Example */
ol {
counter-reset: section;
}
li::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
- First item
- Second item
40. CSS Website Layout
CSS provides properties for creating responsive layouts...
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
41. CSS Units
CSS units define measurements such as width, height, margins, etc...
/* Unit Example */
div {
width: 50%;
height: 100px;
}
42. CSS Specificity
CSS specificity determines which rules are applied to an element...
/* Specificity Example */
#idSelector {
color: red;
}
.classSelector {
color: blue;
}
This is styled with specificity rules.
43. CSS !important
The !important rule overrides other styles...
/* !important Example */
p {
color: blue !important;
}
This text uses the !important rule.
44. CSS Math Functions
CSS math functions (e.g., calc, min, max, clamp) allow for dynamic calculations...
/* Math Functions Example */
div {
width: calc(100% - 50px);
}
45. CSS Advanced
CSS provides advanced features like animations, variables, and more...
/* Advanced Example */
:root {
--main-color: coral;
}
div {
background-color: var(--main-color);
}
46. CSS Rounded Corners
CSS allows you to add rounded corners to elements...
/* Rounded Corners Example */
div {
border-radius: 15px;
}
47. CSS Border Images
CSS border images allow you to use images as borders...
/* Border Image Example */
div {
border: 10px solid transparent;
border-image: url('border.png') 30 round;
}
48. CSS Backgrounds
CSS backgrounds allow you to style the background of elements...
/* Background Example */
body {
background-image: url('background.jpg');
background-size: cover;
}
The background is styled with an image.
49. CSS Colors
CSS provides various ways to define colors...
/* Color Example */
p {
color: rgb(255, 0, 0);
}
This text is red using RGB.
50. CSS Color Keywords
CSS has predefined color keywords like red, blue, green...
/* Color Keywords Example */
p {
color: crimson;
}
This text uses a color keyword.
51. CSS Gradients
CSS gradients allow you to create smooth color transitions...
/* Gradient Example */
div {
background: linear-gradient(to right, red, yellow);
}
52. CSS Shadows
CSS provides properties to add shadows to elements...
/* Shadow Example */
div {
box-shadow: 5px 5px 10px gray;
}
53. CSS Text Effects
CSS provides text effects like shadows, transformations, etc...
/* Text Effect Example */
p {
text-shadow: 2px 2px 5px red;
}
This text has a shadow.
54. CSS Web Fonts
CSS web fonts allow you to use custom fonts...
/* Web Fonts Example */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff');
}
p {
font-family: 'MyFont', sans-serif;
}
This text uses a custom web font.
55. CSS 2D Transforms
CSS 2D transforms allow you to rotate, scale, move, or skew an element...
/* 2D Transform Example */
div {
transform: rotate(45deg);
}
56. CSS 3D Transforms
CSS 3D transforms add depth to elements using the perspective property...
/* 3D Transform Example */
div {
transform: rotateY(45deg);
perspective: 500px;
}
57. CSS Transitions
CSS transitions allow smooth changes between property values...
/* Transition Example */
div {
transition: background-color 0.5s ease;
}
div:hover {
background-color: lightgreen;
}
58. CSS Animations
CSS animations allow you to create moving elements...
/* Animation Example */
@keyframes example {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
div {
animation: example 2s infinite alternate;
}
59. CSS Tooltips
CSS tooltips display informative text when users hover over an element...
/* Tooltip Example */
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 5px;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
60. CSS Image Styling
CSS provides various ways to style images...
/* Image Styling Example */
img {
border: 5px solid black;
border-radius: 10px;
box-shadow: 5px 5px 10px gray;
}
61. CSS Image Centering
CSS makes it easy to center images within containers...
/* Image Centering Example */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
62. CSS Image Filters
CSS filters allow you to apply effects to images...
/* Image Filter Example */
img {
filter: grayscale(100%);
}
63. CSS Image Shapes
CSS lets you create unique image shapes using clip-path...
/* Image Shape Example */
img {
clip-path: circle(50%);
}
64. CSS Object-fit
The object-fit property controls how content fits in a container...
/* Object-fit Example */
img {
object-fit: cover;
width: 300px;
height: 200px;
}
65. CSS Object-position
Object-position controls the position of content within a container...
/* Object-position Example */
img {
object-fit: none;
object-position: center top;
}
66. CSS Masking
CSS masking allows you to hide parts of an element using a mask...
/* Masking Example */
div {
mask-image: url('mask.png');
}
68. CSS Pagination
CSS allows you to style pagination for navigation between pages...
/* Pagination Example */
.pagination {
display: flex;
list-style-type: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
text-decoration: none;
color: black;
padding: 5px 10px;
border: 1px solid gray;
border-radius: 5px;
}
.pagination a:hover {
background-color: lightgray;
}
69. CSS Multiple Columns
CSS multiple columns property lets you create newspaper-style layouts...
/* Multiple Columns Example */
div {
column-count: 3;
column-gap: 20px;
}
This is an example of multiple columns.
70. CSS User Interface
CSS provides properties to enhance user interface elements...
/* User Interface Example */
button {
appearance: none;
outline: none;
cursor: pointer;
}
71. CSS Variables
CSS variables allow you to reuse values throughout your stylesheet...
/* Variables Example */
:root {
--main-color: teal;
--padding: 10px;
}
div {
background-color: var(--main-color);
padding: var(--padding);
}
72. CSS @property
CSS @property allows you to register custom properties with specific behavior...
/* @property Example */
@property --custom-color {
syntax: '';
inherits: false;
initial-value: blue;
}
div {
background-color: var(--custom-color);
}
73. CSS Box Sizing
The box-sizing property defines how the total width and height of an element are calculated...
/* Box Sizing Example */
div {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 2px solid black;
}
74. CSS Media Queries
Media queries are used to apply styles based on device characteristics...
/* Media Query Example */
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
Resize the browser to see media query effects.
75. CSS MQ Examples
CSS media query examples demonstrate responsive design techniques...
/* Media Query Example */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
View this on different devices for responsiveness.
76. CSS Flexbox
CSS Flexbox provides a layout model for arranging items in rows or columns...
/* Flexbox Example */
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 100px;
height: 100px;
background-color: lightcoral;
}
77. CSS Responsive
CSS responsiveness ensures that websites adapt to different screen sizes...
/* Responsive Example */
img {
max-width: 100%;
height: auto;
}
78. RWD Intro
Responsive Web Design (RWD) is an approach to web design aimed at building mobile-friendly sites...
/* RWD Intro Example */
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Resize the browser to see font size changes.
79. RWD Viewport
The viewport meta tag allows you to control the layout on mobile devices...
This page is mobile-friendly.
80. RWD Grid View
Responsive grid layouts use CSS Grid to create flexible designs...
/* Grid View Example */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
81. RWD Media Queries
Media queries help make responsive designs adaptable to different screen sizes...
/* Media Queries Example */
@media (max-width: 768px) {
div {
background-color: lightcoral;
}
}
82. RWD Images
Responsive images adjust automatically to fit different screen sizes...
/* Responsive Images Example */
img {
max-width: 100%;
height: auto;
}
83. RWD Videos
Responsive videos adapt to different screen sizes using CSS...
/* RWD Videos Example */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
84. RWD Frameworks
Responsive web design frameworks like Bootstrap provide ready-made solutions for responsive layouts...
Column 1
Column 2
Bootstrap framework example.
85. RWD Templates
RWD templates are pre-designed responsive layouts for websites...
Header
Main Content
Responsive website template example.
86. CSS Grid
CSS Grid Layout is a powerful tool for creating two-dimensional layouts...
/* Grid Example */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
87. Grid Intro
Grid Layout introduces a new system for creating flexible layouts...
/* Grid Intro Example */
.grid {
display: grid;
grid-template-rows: 1fr 2fr;
}
88. Grid Container
The grid container defines the grid structure and its behavior...
/* Grid Container Example */
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
89. Grid Item
Grid items are the children of a grid container and are automatically placed...
/* Grid Item Example */
.grid-item {
grid-column: span 2;
}
90. CSS SASS
SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds features...
/* SASS Example */
$primary-color: blue;
body {
background-color: $primary-color;
}
Example of a SASS preprocessor.
91. SASS Tutorial
A detailed tutorial on how to use SASS for advanced CSS...
/* SASS Example */
$padding: 10px;
div {
padding: $padding;
}
92. CSS Examples
Explore practical examples to learn CSS...
/* CSS Example */
h1 {
color: darkblue;
text-align: center;
}
CSS Example Heading
93. CSS Templates
Pre-designed CSS templates for creating stylish websites...
Header
Main Section
CSS Template Example.
94. CSS Editor
Explore online CSS editors to try and test your code...
/* Editor Example */
body {
font-family: Arial, sans-serif;
}
Try the code in an online CSS editor.
95. CSS Snippets
CSS snippets are reusable code examples for common styles...
/* Snippet Example */
.btn {
background-color: blue;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
}
96. CSS Quiz
Interactive quizzes to test your CSS knowledge...
/* Quiz Example */
What does "color: red;" do?
a) Sets the background color
b) Changes the text color
c) Changes the border color
Answer: b) Changes the text color.
97. CSS Exercises
Practice CSS with hands-on exercises...
/* Exercise Example */
Style a button with rounded corners and a shadow.
98. CSS Website
Learn how to build a complete website using CSS...
Header
Content
CSS Website Example.
99. CSS Syllabus
Understand the comprehensive syllabus for mastering CSS...
/* Syllabus Example */
1. Introduction to CSS
2. CSS Basics
3. Advanced CSS Topics
CSS syllabus includes topics from basics to advanced levels.
100. CSS Study Plan
Plan your CSS learning with a structured study plan...
/* Study Plan Example */
Week 1: Basics of CSS
Week 2: CSS Layouts
Week 3: Advanced CSS and Responsive Design
Follow this study plan for learning CSS effectively.
101. CSS Interview Prep
Prepare for CSS-related questions asked in technical interviews...
/* Sample Interview Question */
Q: What is the difference between "absolute" and "relative" positioning in CSS?
Review common CSS interview questions and their answers.
102. CSS Bootcamp
Join a CSS bootcamp to get hands-on training...
/* Bootcamp Topics */
1. Basics of CSS
2. Responsive Web Design
3. Advanced Animations
A bootcamp focuses on practical CSS skills.
103. CSS Certificate
Earn a certification in CSS to showcase your skills...
/* Certificate Program */
Learn and complete projects to qualify for a CSS certification.
Get certified in CSS and improve your portfolio.
104. CSS References
Comprehensive CSS references for properties, functions, and selectors...
/* Reference Example */
color: Defines the text color.
background-color: Sets the background color.
Check CSS references to understand every property and value.
105. CSS Selectors
Selectors are used to target HTML elements for styling...
/* Selector Example */
div {
color: red;
}
106. CSS Combinators
CSS combinators define relationships between selectors...
/* Combinator Example */
div > p {
font-size: 16px;
}
This paragraph uses a child combinator.
107. CSS Pseudo-classes
Pseudo-classes style elements based on their state...
/* Pseudo-class Example */
a:hover {
text-decoration: underline;
}
108. CSS Pseudo-elements
Pseudo-elements allow styling of specific parts of an element...
/* Pseudo-element Example */
p::first-letter {
font-size: 20px;
font-weight: bold;
}
This is a styled first letter.
109. CSS At-rules
At-rules like @media, @keyframes, and @import control CSS behavior...
/* At-rule Example */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Resize the browser to see the media query effect.
110. CSS Functions
CSS functions like calc(), var(), and url() enhance CSS capabilities...
/* Function Example */
div {
width: calc(100% - 50px);
}
111. CSS Reference Aural
Aural CSS properties control how content is spoken...
/* Aural Example */
@media speech {
body {
speak: always;
}
}
Aural styles are used for screen readers.
112. CSS Web Safe Fonts
Learn about commonly used web-safe fonts that work across all browsers...
/* Quiz Example */
Which of these is a web-safe font?
a) Arial
b) Comic Sans MS
c) Both a and b
Answer: c) Both a and b.
113. CSS Animatable
Understand which CSS properties can be animated using CSS animations...
/* Quiz Example */
Which property is not animatable in CSS?
a) background-color
b) width
c) display
Answer: c) display.
114. CSS Units
Learn about different CSS units like px, em, rem, %, etc...
/* Quiz Example */
What does "em" unit represent in CSS?
a) A fixed pixel value
b) Relative to the parent element's font size
c) Relative to the viewport
Answer: b) Relative to the parent element's font size.
115. CSS PX-EM Converter
Learn how to convert between px and em units in CSS...
/* Quiz Example */
How many "em"s are equal to 16px if the font size of the parent element is 16px?
a) 0.5em
b) 1em
c) 2em
Answer: b) 1em.
116. CSS Colors
Understand how to use colors in CSS with different notations...
/* Quiz Example */
Which of these is a valid way to define a color in CSS?
a) #ff5733
b) rgb(255, 87, 51)
c) Both a and b
Answer: c) Both a and b.
117. CSS Color Values
Learn the different ways to represent color values in CSS...
/* Quiz Example */
Which color value is used for transparent colors in CSS?
a) rgba()
b) hex
c) hsl()
Answer: a) rgba().
118. CSS Default Values
Learn about the default values of various CSS properties...
/* Quiz Example */
What is the default value of the "display" property in a div element?
a) block
b) inline
c) flex
Answer: a) block.
119. CSS Browser Support
Understand browser support for various CSS properties...
/* Quiz Example */
Which CSS property has the best browser support?
a) border-radius
b) flexbox
c) grid
Answer: a) border-radius.