CSS Master Guide
Yashwanth Cherukumalli
Software Engineer || Front-End developer || 1+years experience in angular js || AI & ML || Vibe Coder
CSS (Cascading Style Sheets) is used to style and format HTML elements, controlling the look and feel of a webpage. This guide covers CSS from basics to advanced concepts, including a sample project to reinforce learning.
?? 1. What is CSS?
CSS stands for Cascading Style Sheets.
?? Cascading – Follows a priority order when multiple styles apply.
?? Style Sheets – Describes how HTML elements should be displayed.
CSS allows you to control the layout, colors, fonts, and responsiveness of a webpage.
?? 2. CSS Basics – Core Concepts
Understanding the core concepts of CSS is essential before moving to advanced topics.
?? CSS Syntax
selector {
property: value;
}
?? selector – Targets the HTML element.
?? property – Defines what aspect to style (color, font-size, etc.).
?? value – Specifies the value for the property.
Example:
p {
color: red;
font-size: 16px;
}
?? Styles all <p> elements to have red text and 16px font size.
?? Types of CSS
CSS can be applied in three ways:
<p style="color: red;">This is red text</p>
<style>
p {
color: blue;
}
</style>
<link rel="stylesheet" href="styles.css">
styles.css:
p {
color: green;
}
?? CSS Selectors
Selectors define which HTML elements to style.
?? Universal Selector (*)
Targets all elements:
* {
margin: 0;
padding: 0;
}
?? Element Selector
Targets specific HTML elements:
p {
color: red;
}
?? Class Selector (.)
Targets elements with a specific class:
.my-class {
color: blue;
}
?? ID Selector (#)
Targets elements with a specific ID:
#my-id {
color: green;
}
?? Group Selector (A, B)
Targets multiple elements at once:
h1, h2, h3 {
color: purple;
}
?? Descendant Selector (A B)
Targets elements inside a parent:
div p {
color: orange;
}
?? Child Selector (A gt; B)
Targets direct child elements:
div > p {
color: pink;
}
?? Adjacent Sibling Selector (A + B)
Targets an element immediately after another:
h1 + p {
color: gray;
}
?? General Sibling Selector (A ~ B)
Targets all siblings after an element:
h1 ~ p {
color: cyan;
}
?? CSS Properties
CSS properties define how elements are displayed.
?? Color and Background
color: red; /* Text color */
background-color: yellow; /* Background color */
opacity: 0.5; /* Transparency */
?? Font and Text
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
text-align: center;
?? Box Model
Defines the spacing and sizing of elements.
width: 100px;
height: 50px;
margin: 10px;
padding: 5px;
border: 2px solid black;
?? CSS Master Guide
CSS (Cascading Style Sheets) is used to style and lay out web pages — including design, color, spacing, alignment, and responsiveness. This guide covers CSS from basics to advanced concepts, including properties like position, display, Flexbox, and Grid with detailed examples and use cases.
?? 1. What is CSS?
CSS defines how HTML elements are displayed on the screen, paper, or other media. It separates content (HTML) from presentation (CSS).
?? CSS Syntax:
selector {
property: value;
}
?? Example:
p {
color: blue;
font-size: 16px;
}
?? The p selector targets all <p> elements and sets the text color to blue and the font size to 16px.
?? 2. Types of CSS
There are three ways to apply CSS:
?? Inline CSS → Applied directly to an HTML element using the style attribute.
<p style="color: red;">This is red text.</p>
?? Internal CSS → Defined within a <style> tag inside the <head> section.
<head>
<style>
p {
color: red;
}
</style>
</head>
?? External CSS → Defined in a separate .css file and linked using <link>.
<head>
<link rel="stylesheet" href="styles.css">
</head>
??? 3. CSS Selectors
Selectors define which elements to style.
? Basic Selectors
?? * → Selects all elements.
* {
margin: 0;
padding: 0;
}
?? element → Selects all elements of the specified type.
p {
color: green;
}
?? #id → Selects an element with a specific id.
#intro {
font-weight: bold;
}
?? .class → Selects elements with a specific class.
.highlight {
color: yellow;
}
? Combinators
?? descendant → Selects elements inside another element.
div p {
color: red;
}
?? child (>) → Selects direct child elements only.
div > p {
color: blue;
}
?? adjacent sibling (+) → Selects the next sibling element.
h1 + p {
color: orange;
}
?? general sibling (~) → Selects all following siblings.
h1 ~ p {
color: purple;
}
?? 4. CSS Properties in Depth
?? 4. CSS Properties in Depth
??? a) Position
Defines how an element is positioned within its container.
?? static – Default positioning. Elements are positioned according to the document flow.
?? relative – Positioned relative to its normal position.
?? absolute – Positioned relative to the nearest positioned ancestor (relative, absolute, fixed, or sticky).
?? fixed – Positioned relative to the viewport (does not move when scrolling).
?? sticky – Positioned relative to the scroll position.
? Addon Properties:
.box {
position: absolute;
top: 50px;
left: 100px;
z-index: 10;
clip-path: circle(50%);
}
?? The element is positioned 50px from the top and 100px from the left of its nearest positioned ancestor. ?? The clip-path creates a circular clipping mask around the element.
?? b) Display
Defines how an element is displayed on the page.
?? block – Takes up the full width of the container.
?? inline – Takes up only as much width as necessary.
?? inline-block – Behaves like an inline element but allows width and height.
?? none – Hides the element completely.
?? flex – Activates a flex container (explained in Flexbox section).
?? grid – Activates a grid container (explained in Grid section).
?? contents – Makes the element disappear but keeps the child elements visible.
?? run-in – Behaves as an inline or block element depending on the context.
?? table – Behaves like a table element.
?? ruby – Behaves like a ruby annotation element (used for East Asian typography).
? Example:
span {
display: inline-block;
width: 100px;
height: 50px;
}
div {
display: contents;
}
?? The span behaves like an inline element but allows width and height adjustments. ?? The contents value removes the div element but keeps the child elements visible.
?? 5. Flexbox Layout
Flexbox is used for one-dimensional layouts (row or column).
? a) Flex Container Properties
?? display: flex → Enables flex container.
?? flex-direction → Sets main axis direction:
?? justify-content → Aligns items along the main axis:
?? align-items → Aligns items along the cross axis:
?? align-content → Aligns multiple flex lines:
?? flex-wrap → Controls whether items wrap to a new line:
?? flex-flow → Shorthand for flex-direction and flex-wrap.
? b) Flex Item Properties
?? order → Defines the order of items.
?? flex-grow → Expands to fill available space.
?? flex-shrink → Shrinks to fit container.
?? flex-basis → Sets the initial size of the item.
?? align-self → Overrides align-items for a single item.
? Example:
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
order: 2;
}
?? The container aligns items at the center and allows them to wrap. ?? Items grow, shrink, and adjust their size based on available space.
?? 6. Grid Layout
Grid is used for two-dimensional layouts (rows + columns).
? a) Grid Container Properties
?? display: grid → Enables grid container.
?? grid-template-columns → Defines column sizes.
?? grid-template-rows → Defines row sizes.
?? gap → Sets space between rows and columns.
?? grid-auto-flow → Controls how items are placed.
?? justify-items → Aligns items along the row axis.
?? align-items → Aligns items along the column axis.
?? place-items → Shorthand for justify-items and align-items.
? b) Grid Item Properties
?? grid-column-start → Specifies starting column.
?? grid-column-end → Specifies ending column.
?? grid-row-start → Specifies starting row.
?? grid-row-end → Specifies ending row.
?? grid-area → Shorthand for row and column placement.
?? place-self → Shorthand for justify-self and align-self.
? Example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
?? The container creates a grid with 3 columns and 2 rows. ?? The item starts at column 1 and ends at column 3.
?? 7. Transitions & Animations
?? Transitions → Create smooth state changes:
a {
color: blue;
transition: color 0.3s ease;
}
a:hover {
color: red;
}
?? Animations → Create complex animations:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: fadeIn 2s ease-in-out;
}
?? 5. Transitions & Animations
?? Transitions
Create smooth state changes:
a {
color: blue;
transition: color 0.3s;
}
a:hover {
color: red;
}
?? Animations
Create complex animations:
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
div {
animation: fadeIn 2s;
}
?? 6. Responsive Design
Use media queries for different screen sizes:
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
?? CSS Units
CSS units define how values like size, length, and position are measured in a webpage. Understanding them is essential for creating responsive and consistent designs.
? Absolute Units
Absolute units remain fixed and do not adjust based on screen size or parent element. ?? px – Pixels (1px = 1 dot on the screen).
h1 {
font-size: 24px; /* Always 24 pixels, regardless of screen size */
}
?? cm, mm, in – Centimeters, millimeters, and inches.
div {
width: 5cm; /* Element width is fixed at 5 centimeters */
}
?? pt, pc – Points and picas (used in print).
p {
font-size: 12pt; /* 1 point = 1/72 inch */
}
? Relative Units
Relative units adjust based on the parent element or viewport size.
?? em – Relative to the font size of the parent element.
div {
font-size: 16px;
}
p {
font-size: 2em; /* 2 * 16px = 32px */
}
?? rem – Relative to the root (html) font size.
html {
font-size: 16px;
}
p {
font-size: 2rem; /* 2 * 16px = 32px */
}
?? % – Relative to the parent element’s size.
div {
width: 50%; /* Takes up 50% of the parent element's width */
}
?? vw – Viewport width (1vw = 1% of the viewport width).
div {
width: 50vw; /* Takes up 50% of the viewport width */
}
?? vh – Viewport height (1vh = 1% of the viewport height).
div {
height: 50vh; /* Takes up 50% of the viewport height */
}
?? vmin – Smaller of vw and vh.
div {
width: 50vmin; /* 50% of the smaller dimension (width or height) */
}
?? vmax – Larger of vw and vh.
div {
width: 50vmax; /* 50% of the larger dimension (width or height) */
}
?? ex – Relative to the height of the lowercase x in the font.
?? ch – Relative to the width of the 0 character in the font.
div {
width: 10ch; /* Width is equal to the width of 10 "0" characters */
}
?? When to Use Different Units
?? Use px for fixed, pixel-perfect designs (e.g., buttons).
?? Use %, vw, vh for responsive layouts.
?? Use em and rem for scalable font sizes.
?? Use vmin, vmax for dynamic sizing based on screen dimensions.
?? CSS Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements allow you to style elements based on their state, position, or specific parts of an element without needing extra HTML classes or IDs.
?? 1. What are Pseudo-classes?
Pseudo-classes target elements based on their state or position in the DOM.
领英推荐
? Common Pseudo-classes
?? :hover ?? Styles an element when the mouse pointer hovers over it.
?? :focus ?? Styles an element when it gains focus (like a form input).
?? :active ?? Styles an element when it is being clicked.
?? :nth-child(n) ?? Targets the nth child of a parent element.
?? :first-child ?? Targets the first child of a parent.
?? :last-child ?? Targets the last child of a parent.
?? :not() ?? Excludes elements that match a specific selector.
?? Example
<button class="btn">Click Me</button>
.btn:hover {
background-color: blue;
color: white;
}
.btn:active {
background-color: darkblue;
}
.btn:focus {
outline: 2px solid red;
}
?? :hover – Button turns blue when hovered.
?? :active – Button turns dark blue when clicked.
?? :focus – Red outline appears when focused.
? nth-child and nth-of-type
?? nth-child(n) ?? Selects the nth child of a parent element.
?? nth-of-type(n) ?? Selects the nth element of a specific type within a parent.
?? You can use even, odd, 3n, 3n+1 patterns.
?? Example
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
li:nth-child(odd) {
background-color: #f4f4f4;
}
li:nth-child(even) {
background-color: #ddd;
}
li:nth-of-type(2) {
color: red;
}
?? nth-child(odd) – Styles odd items.
?? nth-child(even) – Styles even items.
?? nth-of-type(2) – Styles the second list item of type <li>.
? :first-child and :last-child
?? :first-child ?? Styles the first child.
?? :last-child ?? Styles the last child.
?? Example
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
li:first-child {
font-weight: bold;
}
li:last-child {
font-style: italic;
}
?? first-child – Makes the first item bold.
?? last-child – Makes the last item italic.
? :not()
?? :not() ?? Excludes elements that match a certain condition.
?? Example
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
li:not(.highlight) {
color: green;
}
?? Styles all <li> except the one with class highlight.
? :checked
?? Targets checkboxes and radio buttons when they are checked.
?? Example
<input type="checkbox" id="check">
<label for="check">Accept terms</label>
input:checked + label {
color: green;
}
?? Styles the label when the checkbox is checked.
? :disabled, :enabled, :required
?? :disabled ?? Styles disabled elements.
?? :enabled ?? Styles enabled elements.
?? :required ?? Styles form elements marked as required.
?? Example
<input type="text" required>
<button disabled>Submit</button>
input:required {
border: 2px solid red;
}
button:disabled {
background-color: gray;
}
?? Red border for required input.
?? Gray background for disabled button.
?? 2. What are Pseudo-elements?
Pseudo-elements target specific parts of an element.
? Common Pseudo-elements
?? ::before ?? Inserts content before an element.
?? ::after ?? Inserts content after an element.
?? ::first-letter ?? Styles the first letter of an element.
?? ::first-line ?? Styles the first line of an element.
?? ::selection ?? Styles text when it's selected.
? ::before and ::after
?? Used to add generated content before or after an element.
?? Requires the content property.
?? Example
<p class="message">Hello World!</p>
.message::before {
content: "?? ";
color: blue;
}
.message::after {
content: " ??";
color: red;
}
?? Adds content before and after the element.
? ::first-letter and ::first-line
?? ::first-letter ?? Styles the first letter of a block element.
?? ::first-line ?? Styles the first line of a block element.
?? Example
<p class="intro">Welcome to the site!</p>
.intro::first-letter {
font-size: 32px;
color: red;
}
.intro::first-line {
font-weight: bold;
}
?? Enlarges the first letter and bolds the first line.
? ::selection
?? Styles text when selected by the user.
?? Example
<p>Select some text in this paragraph.</p>
p::selection {
background-color: yellow;
color: black;
}
?? Highlights selected text with a yellow background.
?? Shadows and Filters, Object-Fit and Object-Position, CSS Transforms
Let’s break down these key CSS concepts with examples and practical tips! ??
?? 1. Shadows
Shadows are used to add depth and elevation to elements, making them visually appealing and modern.
? Types of Shadows
?? box-shadow ?? Adds shadow to elements like div, img, button, etc.
?? text-shadow ?? Adds shadow to text elements (h1, p, etc.).
?? Syntax
/* box-shadow */
box-shadow: offset-x offset-y blur-radius spread-radius color;
/* text-shadow */
text-shadow: offset-x offset-y blur-radius color;
? box-shadow
?? Applies shadow to the boundary of an element.
?? Positive values ?? Push the shadow down and to the right.
?? Negative values ?? Push the shadow up and to the left.
?? Example
<div class="box">Shadow Box</div>
.box {
width: 200px;
height: 100px;
background-color: #f4f4f4;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
?? 5px 5px – Shadow is offset to the right and down.
?? 15px – Blur radius.
?? rgba(0, 0, 0, 0.3) – Black shadow with 30% opacity.
? Inset Shadows
?? Adds shadow inside the element instead of outside.
?? Example
.box {
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}
?? inset ?? Shadow appears inside the element.
? text-shadow
?? Adds shadow to text.
?? Works similarly to box-shadow but applies only to text.
?? Example
<h1 class="heading">Text Shadow</h1>
.heading {
font-size: 40px;
color: #333;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
?? Shadow is offset 3px to the right and 3px down with 5px blur.
?? 2. Filters
CSS filter is used to apply visual effects to images or elements (like blur, brightness, contrast, etc.).
? Common Filters
?? blur(px) ?? Blurs the element.
?? brightness(%) ?? Adjusts brightness.
?? contrast(%) ?? Adjusts contrast.
?? grayscale(%) ?? Converts to grayscale.
?? invert(%) ?? Inverts colors.
?? opacity(%) ?? Adjusts transparency.
?? saturate(%) ?? Adjusts color saturation.
?? sepia(%) ?? Converts to sepia tone.
?? hue-rotate(deg) ?? Rotates hue value.
?? Syntax
filter: blur(5px) brightness(120%) contrast(90%);
? Example
<img src="image.jpg" class="image">
.image {
width: 300px;
height: 200px;
filter: grayscale(100%) blur(2px);
}
?? Converts the image to grayscale and applies a blur.
? Hover to Add Effect
?? You can change the filter on hover for interactive effects.
?? Example
.image:hover {
filter: brightness(120%) saturate(150%);
}
?? Brightens and increases saturation when hovered.
??? 3. Object-Fit and Object-Position
Used to control how an image or video fits inside a container.
? object-fit
?? Defines how an image or video should fit into its container.
?? Values
?? fill ?? Stretches the content to fill the container (may distort).
?? contain ?? Scales content to fit without distortion (may leave empty space).
?? cover ?? Scales content to fill container (may crop).
?? none ?? Keeps the original size, no scaling.
?? scale-down ?? Similar to none but scales down if necessary.
? Example
<img src="image.jpg" class="fit">
.fit {
width: 300px;
height: 200px;
object-fit: cover;
}
?? cover ensures the image fills the box without distortion.
? object-position
?? Defines the starting position of an image inside a container.
?? Works with object-fit.
?? Accepts values like %, px, top, left, bottom, right, center.
? Example
.fit {
object-fit: cover;
object-position: top;
}
?? Positions the image at the top of the container.
? Advanced Example
.fit {
object-fit: contain;
object-position: 50% 50%; /* Centered */
}
?? Centers the image inside the container while maintaining aspect ratio.
?? 4. CSS Transforms
Transforms allow you to modify the position, size, and orientation of elements.
? Types of Transforms
?? translate(x, y) ?? Moves an element along the X and Y axes.
?? rotate(deg) ?? Rotates an element around its center.
?? scale(x, y) ?? Scales an element (x-axis and y-axis).
?? skew(x, y) ?? Skews an element along the X and Y axes.
?? matrix() ?? Combines translate, rotate, scale, and skew in one function.
?? Syntax
transform: translate(10px, 20px) rotate(45deg) scale(1.5);
? translate
?? Moves the element along the X and Y axes.
?? Example
.box {
transform: translate(50px, 20px);
}
?? Moves 50px to the right and 20px down.
? rotate
?? Rotates an element by the specified degrees.
?? Example
.box {
transform: rotate(45deg);
}
?? Rotates the element by 45 degrees.
? scale
?? Scales the element by the specified values.
?? Example
.box {
transform: scale(1.2, 1.5);
}
?? Scales 1.2 times horizontally and 1.5 times vertically.
? skew
?? Skews the element along the X and Y axes.
?? Example
.box {
transform: skew(20deg, 10deg);
}
?? Skews 20 degrees horizontally and 10 degrees vertically.
? 7. Sample Project: Creating a Landing Page
HTML:
<div class="hero">
<h1>Welcome to My Site</h1>
<button>Learn More</button>
</div>
CSS:
.hero {
background-color: #f4f4f4;
padding: 50px;
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
}