Scribd
Upload
8 views96 pages

Complete Css

The CSS Masterclass is a comprehensive course designed to take learners from beginner to pro in CSS, covering foundational styles, advanced techniques, and project-based learning. It includes topics such as CSS selectors, properties, the box model, and debugging, along with practical projects to apply skills. The course emphasizes the importance of responsive design and offers various methods for styling web pages effectively.

Uploaded by

xyz81557
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views96 pages

Complete Css

The CSS Masterclass is a comprehensive course designed to take learners from beginner to pro in CSS, covering foundational styles, advanced techniques, and project-based learning. It includes topics such as CSS selectors, properties, the box model, and debugging, along with practical projects to apply skills. The course emphasizes the importance of responsive design and offers various methods for styling web pages effectively.

Uploaded by

xyz81557
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 96

CSS Masterclass

Series
A complete journey from beginner to pro in CSS.
Master foundational styles, advanced techniques, and
pro-level design skills to create polished, responsive
websites
Basic Advanc Pro level
ed Beginner Projects
1. Introduction to CSS 1.CSS3 Visual Effects
2. CSS Selectors • Profile Card
2 .CSS Pseudo Classes & Elements
3. CSS Syntax & Comments • Photography Gallery
3. CSS Combinators
4. Colors & Backgrounds • Responsive Navbar
4.CSS Layout Techniques
5. Units & Dimensions • Newsletter Signup Form
5. CSS Transitions, Transformations, and
6. Fonts & Text Properties Intermediate Projects
Animations
7. The CSS Box Model • Personal Portfolio Website
6. CSS Inheritance
8. CSS Display & Positioning • Parallax scrolling
7. Media Queries & Responsive Design
9. CSS Overflow • Clock design
8. CSS BEM & SMACSS
10. CSS Debugging • Personal style
9. CSS Variables (Custom Properties)
11. CSS Resets Advanced Projects
10. Custom Scrollbars
12. Understanding Specificity • Responsive course ui
11. CSS Shapes and Clip Paths
• Restaurant Menu Page
12 CSS for Print Media
• Hotels
1: Introduction to CSS
What is CSS?

CSS stands for Cascading Style Sheets


CSS controls the look and feel of a webpage
Benefits:
 Separation of Content and Style
 Consistent Design across multiple pages
 Easy Maintenance

Youtube: softcamper
Types of CSS (Inline, Internal, External)
•Inline CSS – Quick styling for a single element
•Internal CSS – Styling for a single HTML page
•External CSS – Styles multiple pages with one stylesheet

Youtube: softcamper
How to Link CSS in HTML
Inline CSS: CSS inside an HTML tag using style
attribute

Internal CSS: CSS inside the <style> tag within <head>


section

External CSS: CSS in a separate file linked with <link>


tag
CSS Rule Structure
Selector – Targets HTML elements
Declaration – Styles applied to the selected element
Declaration block: {}
Property: The CSS property you want to modify
Value: The specific setting for that property

Youtube: softcamper
2: CSS Selectors

Selectors are patterns used to target HTML elements for styling


They allow applying styles to specific elements or groups efficiently.

Youtube: softcamper
Types of Selectors
Element Selector: Targets all instances of an HTML element

Class Selector: Targets elements with a specific class attribute

ID Selector: Targets an element with a specific ID

Universal Selector: Targets all elements

Youtube: softcamper
Grouping Selectors

Apply the same style to multiple selectors by


separating them with commas.

Attribute Selectors

Target elements based on attributes and their


values

Child Selectors

Descendant Selector (space): Targets


elements inside a specified ancestor.

Youtube: softcamper
3:Adding Comments in CSS
Comments are used to explain code or disable sections for testing.
They don't affect the code and help with readability

Use comments to:


Document complex styles
Explain changes
Disable temporary code

Youtube: softcamper
4. Colors & Backgrounds
4.1. Colors in CSS

CSS allows you to define colors in several formats, which


provides flexibility for styling your web pages. Here's a
breakdown of each format:
1:Hexadecimal Colors
Description: Hex colors are represented by a
# followed by six hexadecimal digits. The
first two digits represent red, the next two
represent green, and the last two represent
blue. You can also use a shorthand format
with three digits

Youtube: softcamper
2. RGB Colors: RGB stands for Red, Green, and Blue. Each
color is defined by a value between 0 and 255, representing the
intensity of the respective color.

3. RGBA Colors: RGBA is similar to RGB but includes an


alpha channel for transparency. The alpha value ranges from 0
(fully transparent) to 1 (fully opaque).
4. HSL Colors: HSL stands for Hue, Saturation, and Lightness.
Hue is a degree on the color wheel (0-360), saturation is a
percentage (0% is gray, 100% is full color), and lightness is also
a percentage (0% is black, 100% is white).

5. HSLA Colors: HSLA is similar to HSL but includes an alpha


channel for transparency.
Background Properties

CSS provides a set of properties that allow you to customize the


background of elements. Here are the key properties you can use:

1: Background Color: This property sets the background color


of an element

2. Background Image: This property allows you to set an


image as the background of an element.
3. Background Repeat: This property determines whether the
background image should be repeated (tiled) or not. Options:
repeat, repeat-x, repeat-y, no-repeat

4. Background Size: This property specifies the size of the


background image. Options: cover, contain, or specific
dimensions
5. Background Position: This property sets the starting
position of a background image.

Combining Background Properties: You can combine


multiple background properties in a single declaration. Here’s
an example:
5:Units & Dimensions in CSS

CSS uses units to define sizes of elements (width, height).


•Two main types: Absolute (fixed) and Relative (scalable).
•Goal: Combine precision and adaptability for different devices.
5.1:Absolute Units Fixed sizes that don’t adapt to screen or parent
elements.
Best for: Icons, buttons, logos (pixel-perfect design).

Examples:
px – Pixels
cm / mm – Centimeters / Millimeters (used for print)
in – Inches (rare in web design)

Always renders 300px by 150px, regardless of screen size.


5.2 Relative Units Responsive design:
Sizes adjust based on parent or screen.
Ideal for: Typography, layouts, and grids.
Key Types: em – Relative to parent’s font size.
rem – Relative to root font size (default: 16px)
% – Relative to parent’s width/height
vh / vw – Viewport height/width
Example – em and rem in Action

Explanation:2em = Twice the parent’s font size (20px × 2 =


40px) 1.5rem = 24px (1.5 × 16px root size)
5.3 Percentage for Responsive Layouts

If the parent is 800px wide, the box becomes 400px wide.

5.4 Viewport Units (vh and vw)

Box takes up 100% of screen width and height (ideal for hero
sections).
5.6 : Width and Height Best Practices
Fixed sizes (px): Use for icons or buttons that need precise
dimensions.
Fluid sizes (%): Use for grids or containers that need to scale.
Viewport units (vh/vw): Use for fullscreen elements.
Font sizes (em/rem): Use rem for consistent typography and
em for local scaling.

Summary Table
6: Fonts & Text Properties
Typography plays a key role in user experience (UX) and
design consistency.
CSS offers a variety of text properties to ensure your content is
readable, visually appealing, and aligned with the brand
identity.
6.1 font-family
defines the typeface for the text.
It accepts a comma-separated list of fonts to provide fallback options.
Fonts can be serif, sans-serif, monospace, or custom web fonts.

Primary Font: Arial


Fallback: Helvetica (if Arial is unavailable)
Default: Sans-serif (as the final fallback)
Best Practice: Always include fallback fonts to ensure text
displays correctly.
6.2 Font Size

font-size controls the size of text.


Can use absolute units (px, pt) or relative units (em, rem).
Best Practice: Use rem to ensure consistent scaling across the site.

•1.5rem: Scales with the root font size (16px × 1.5 = 24px).
•Using rem ensures text scales uniformly with user preferences.

6.3 Font Weigh


•font-weight controls the thickness of the font.
•Values range from 100 (Thin) to 900 (Black), or use keywords like bold,
normal.

•bold: Applies a bold style to the text.


•300: Light font weight for a thinner appearance.
6.4 Text Alignment

text-align controls horizontal alignment.


Common values: left, center, right, justify.

Aligns the text centered within its parent container.

6.5 Text Decoration


text-decoration controls underlining, overlining, or
strikethrough effects.
•Common values: none, underline, line-through.

underline: Adds an underline to the text.


line-through: Adds a strikethrough effect.
6.6 Text Spacing

Letter Spacing (letter-spacing)Controls the space between


characters.
Line Height (line-height)Sets the vertical spacing between
lines.

letter-spacing: 2px: Adds 2px space between letters.


line-height: 1.5: Makes the vertical space 1.5 times the font size .
6.7 Google Fonts Integration

Google Fonts allows importing web-friendly fonts.


Fonts can be loaded directly via a link tag or @import in CSS.

Import: Load the Roboto font with 400 (regular) and 700 (bold) weights.
Fallback: sans-serif is used if Roboto fails to load.
📌 Best Practice: Use the display=swap parameter to ensure the text remains visible during
font loading.
Summary Table
7:CSS Box Model
The CSS Box Model defines how every HTML element is structured and how it
interacts with other elements in terms of space and layout.
•Each element is a box that consists of content, padding, border, and margin.
Anatomy of the Box Model
Content: The actual content inside the box (e.g., text, image).
Padding: The space between the content and the border.
Border: The edge that wraps around the padding (optional).
Margin: The space outside the border, separating the element from other elements.
Visual Representation of Box Model
7.1 Content, Padding, Border, and Margin in Detail
1.Content
This is the core part where text, images, or other elements
appear.
Example:

2: Padding
Adds space inside the element between the content and the
border.
The background color extends into the padding area.

📌 Padding increases the element’s internal space but does not


affect spacing between elements.
3: Border

A border wraps around the padding and content.


You can control the width, style, and color of the border.

📌 Borders enhance visual separation and can create neat


frames around content.
4: Margin
Creates space outside the element to separate it from other elements.
Margins are transparent and do not affect background color.

📌Margins are essential for layout control and spacing between


elements.
7.2:The Box-Sizing Property

By default, browsers calculate an element’s width and height using the


content size only. The box-sizing property changes this behavior.
•Values of box-sizing:
•content-box (default): Width and height include only the content.
•border-box: Width and height include content, padding, and border.

In the content-box example, the actual width becomes 230px (200px +


10px padding × 2 + 5px border × 2).
In the border-box example,
the total width remains 200px, including content, padding, and border.
Summary Table – CSS Box Model Components
8: CSS Display & Positioning
The Importance of CSS Display & Positioning in Web
Development
CSS Display and Positioning are crucial for building
structured, responsive, and visually appealing layouts. Here's
why these concepts are important:
8.1: Block vs Inline Elements
1. Block Elements
Block-level elements take up the full width of their parent container.
Always start on a new line, forcing any following elements to appear below.
Can contain both block and inline elements.
Examples: <div>, <p>, <h1>, <ul>, <section>
2. Inline Elements Inline elements only take up as much space
as their content requires.They don’t start on a new line; they
appear next to other inline elements.Cannot contain block
elements.Examples: <span>, <a>, <strong>, <em>
8.2: Display Property
The display property determines how an element is rendered on the
page.
Display Values:
Block Takes full width and starts on a new line.

inlineTakes only the necessary width, does not start on a new


line.

inline-block Behaves like inline but allows width/height to be


set.

None Hides the element from the page.

Flex Arranges items in a row or column with flexible alignment.

Grid Organizes content into a grid layout.


8.3: Position Property
Controls how an element is positioned within the page or its
parent element.

Position Values:
1.static (default)
•The element follows the normal document flow.
2.relative
•Positioned relative to its normal position. You can shift it using top, left, right, or bottom.
3.absolute
•Positioned relative to the nearest non-static parent.
4.fixed
•Positioned relative to the viewport. Stays in place during scrolling.
5.sticky
•Sticks to a position until the scroll threshold is reached.
8.4 CSS Floats & Clearfix

CSS Floats & Clearfix


1. Floats
Floats align elements to the left or right of their container, allowing text to flow around
them.
8.5: CSS Z-Index

• The z-index property controls the stacking order of elements.

• Elements with a higher z-index appear on top of those with a lower one.

• Works only on positioned elements (e.g., relative, absolute, fixed).


Summary
9:CSS Overflow
The overflow property in CSS controls what happens to content
that exceeds the size of its container. It determines how the
extra content is managed and whether it is visible, hidden,
scrollable, or automatically adjusted.

Overflow is useful when:


The content inside an element is larger than the element's height
or width.
You need to control whether the extra content should be shown,
clipped, or scrollable.
9.1 Types of Overflow Properties

Overflow: visible (Default)


The content is not clipped and overflows outside the element if it exceeds the container’s
dimensions.
No scrollbars are added, and the overflowing part is still visible

The text will extend beyond the borders of the container.


overflow: hidden

•The overflowing content is clipped (hidden), and no scrollbars are provided to access the hidden
content.

The extra content will not be visible beyond the boundaries of


the element.
overflow: Scroll
Scrollbars are always shown, even if the content fits within the container.
Both horizontal and vertical scrollbars appear if necessary.

The element will have scrollbars, even if the content does not
overflow.
overflow: auto
Scrollbars appear only if the content overflows.
If the content fits within the element, no scrollbars are shown.

If the content is larger than the container, scrollbars will appear


automatically.
9.2:Controlling Overflow on Specific Axes
You can apply overflow separately for the horizontal (x-axis) and vertical (y-axis) using:
•overflow-x
•overflow-y

Horizontal scrollbar appears, but vertical overflow is hidden.


9.3: Combining Overflow with Box Model
When working with the box model (padding, borders, margins), overflowing content can cause layout
issues.
The box-sizing property helps control how width/height includes padding and borders.

<div style="width: 200px; height: 100px; overflow: auto; box-sizing: border-box; padding: 20px;
border: 1px solid black;"> Content inside with padding and scrollable overflow. </div>
Summary of Overflow Properties
10: CSS Debugging
CSS debugging ensures your styles are applied correctly and
helps identify layout, spacing, or display issues. The most
effective tool for CSS debugging is Browser Developer
Tools.

What Are Browser Dev Tools?


DevTools are built into browsers (like Chrome, Firefox, and Edge) to
inspect and debug CSS and HTML in real-time.
Shortcut:
Windows/Linux: F12 or Ctrl + Shift + I
Mac: Cmd + Option + I
Key DevTools Features for CSS Debugging
Inspect Element
Right-click on any element → Inspect to see the HTML and applied CSS.
View the computed styles to check how CSS properties are resolved.
Styles Panel
Modify CSS properties in real-time to test changes.
View inherited styles and overridden rules with strikethrough formatting.
Box Model
Visualize margin, padding, border, and content directly in the layout panel.
Helps identify spacing and alignment issues.
Computed Tab
Shows the final computed values of all CSS properties, accounting for inheritance and specificity.
Debugging Tips and Best Practices
Disable CSS: Temporarily turn off specific rules to check

their effect.

Use Color Pickers: Adjust colors directly in DevTools.

Network Tab: Identify if CSS files are not loading properly.


11:CSS Resets
CSS resets are used to remove default styling provided by browsers to ensure
consistent appearance across different browsers and devices.
Each browser applies its own default margins, paddings, and font styles, which can
cause layout inconsistencies.
Resetting CSS ensures a level playing field for all elements.

Purpose of CSS Resets Browsers apply default styles


differently (e.g., margins on <h1> or <p> elements).
Common CSS Reset Methods
Universal Reset (Basic)
Uses the * selector to reset margins, padding, and borders for all elements.
Simple but aggressive, as it removes all spacing.

Pros: Ensures consistency across all elements.


Cons: Can remove useful default styles (e.g., form elements).
12: Understanding Specificity
CSS specificity determines which styles are applied when
multiple rules target the same element. It’s a priority system
—the higher the specificity, the more likely the rule will be
applied. Proper understanding of specificity helps avoid
unexpected style conflicts.

What is CSS Specificity?


Specificity is a score or rank that determines which CSS rule
wins when multiple rules apply to the same element.
Higher specificity overrides lower specificity
12.1 How Specificity Works (The Scoring System)
Specificity is calculated using four levels, represented as (A, B, C, D):
Specificity in Action
Using !important The !important keyword overrides all
specificity.
Use sparingly to avoid maintenance issues.

Tips for Managing Specificity IssuesAvoid overusing IDs;


prefer classes for reusability.
Use reset or normalization CSS to minimize conflicts.Keep
your selectors as simple as possible.Use !important only as a
last resort.
Advanced part
1: CSS3 Visual Effects
CSS3 introduces several visual effects that allow for rich,
dynamic designs without relying on images or complex

code. These include gradients, shadows, and filters,


which can add depth and polish to web elements.
CSS3 Gradients

Gradients are smooth transitions between colors, commonly used as backgrounds to


enhance visual appeal.
1.Linear Gradients
•A transition of colors along a line (vertical, horizontal, or diagonal).
•Syntax: linear-gradient(direction, color1, color2, ...)

1. Radial Gradients
•Colors radiate outward from a central point, creating a circular or
elliptical gradient.
•Syntax: radial-gradient(shape size, color1, color2, ...)
CSS3 Shadows

Text Shadow
Adds shadows to text for depth or glow effects.
Syntax: text-shadow: h-offset v-offset blur-radius color;

Box Shadow
Adds shadows to boxes (such as divs or images).
Syntax: box-shadow: x-offset ,y-offset, blur-radius and color;
CSS3 Filters
Filters add effects like blurring or color changes to elements, particularly images.
1.Blur: Makes an element appear soft and out of focus.
•Syntax: filter: blur(px);
•Example: filter: blur(4px);
2.Grayscale: Converts an element to shades of gray.
•Syntax: filter: grayscale(percentage);
•Example: filter: grayscale(100%);
3.Sepia: Adds a warm, brown tint for a vintage effect.
•Syntax: filter: sepia(percentage);
•Example: filter: sepia(70%);
4.Other Filters:
•Brightness, Contrast, Invert: Adjusts the color intensity, contrast, or inversion
2: CSS Pseudo Classes & Elements
CSS pseudo-classes and pseudo-elements allow you to style elements based on their state
or specific portions of content, creating interactive and visually engaging designs without
extra HTML markup.

CSS Pseudo-Classes
Pseudo-classes apply styles to an element based on its state
or position in the DOM.
1. Styles an element when the user hovers over it
with a mouse.
2. Example: Change button color on hover.
Styles an element when it is focused (e.g., a form input selected by the user).
Example: Add a border to focused input fields

(n)
Targets elements based on their order in a parent container, where n can be any number or
pattern (e.g., even or odd).
Example: Alternate row colors in a table .
Applies styles to the first child element within a parent.

Example: Style the first item in a list differently .


Pseudo-Elements

Pseudo-elements let you style specific parts of an element or


add content before or after an element.
::before
Inserts content before the selected element, often used for
decorative icons or styles.
Example: Add an icon before each list item.

::after
Inserts content after the selected element, commonly used to
add decorative elements.
Example: Add a clearfix to ensure an element contains
floated child elements
Combining Pseudo-Classes and Pseudo-Elements
You can combine pseudo-classes and pseudo-elements to create more
complex styling scenarios.
Example:
• Highlight the first paragraph in a container on hover.
3:CSS Combinators
CSS combinators are used to define the relationships between elements, allowing us to
target elements more precisely based on their hierarchy or position relative to each other.
The main combinators include descendant, child, adjacent sibling, and general sibling
Descendant Combinator ( )
The descendant combinator targets any element inside another, regardless of nesting depth.
•Syntax: selectorA selectorB
•Targets all elements matching selectorB that are inside any selectorA.

Explanation: Selects all <p> elements inside any <div>, regardless of how deeply nested they are.
Child Combinator ( > )
The child combinator targets direct children only, excluding deeper descendants.
•Syntax: selectorA > selectorB
•Applies styles only to elements matching selectorB that are immediate children of selectorA.

Explanation: Selects <li> elements that are direct children of a <ul>, ignoring any nested <li>
elements within those children.
Adjacent Sibling Combinator ( + )
The adjacent sibling combinator selects the element immediately following a specified element.
•Syntax: selectorA + selectorB
•Targets the first selectorB element that appears directly after selectorA.

Explanation: Selects the first <p> element directly following an <h1> element, applying a margin
only to that immediate sibling.
General Sibling Combinator ( ~ )
The general sibling combinator selects all elements that are siblings of a specified element,
regardless of position.
•Syntax: selectorA ~ selectorB
•Targets all selectorB elements that are siblings of selectorA within the same parent.

Explanation: Selects all <p> elements that are siblings of an <h1> within the same parent
container.
4: CSS Layout Techniques
CSS Flexbox
•Basics: One-dimensional layout method for arranging items in a row or
column.
•Alignment: Flexbox offers powerful alignment options (e.g., justify-
content, align-items, align-self) for precise control of spacing and
positioning.
•Wrapping: Controls whether items should wrap onto multiple lines
(flex-wrap) when space is insufficient.
•Order: Allows reordering of elements with the order property, without
changing the HTML structure.
CSS Grid
Tracks: Define rows and columns using grid-template-rows and grid-template-columns.
Auto-Placement: Automatically places items within the grid; useful for layouts where content size is
variable.
Areas: Enables naming grid areas, allowing precise control over where content should be placed.
Nesting: Grids can be nested within other grids, offering flexibility for complex layouts.
Multi-Column Layout
Designed for creating newspaper-like column layouts.
Uses properties like column-count, column-gap, and column-width to control the number and width
of columns.
Best for text-heavy content that can be split across multiple columns for improved readability.
5: CSS Transitions, Transformations, and
Animations
1.CSS Transitions
Used to create smooth transitions between property changes.
Duration: Controls the length of the transition (e.g., transition-duration: 0.3s).
Timing Functions: Defines the speed curve, such as ease, linear, ease-in, and ease-out.
Delays: Allows you to delay the start of a transition (e.g., transition-delay: 0.2s).
CSS Transforms
Rotate: Rotates an element (e.g., transform: rotate(45deg);).
Scale: Changes the size of an element (transform: scale(1.2);).
Skew: Tilts an element (e.g., transform: skew(20deg);).
Translate: Moves an element from its original position (e.g., transform: translate(50px, 0);).
CSS Keyframe Animations
Allows creating more complex animations that are not tied to user actions.

Define the animation steps using @keyframes.


Properties like animation-name, animation-duration, animation-timing-function, and
animation-iteration-count control the animation behavior.
Combining Transitions and Transforms
Transitions can enhance transform effects for smoother, interactive animations.
By adding transition properties to an element with transform properties, you can
control how changes to scale, rotate, translate, or skew are animated.
6: CSS Inheritance
CSS inheritance is a fundamental concept that determines how property values are passed from parent
elements to their child elements in the Document Object Model (DOM). Understanding inheritance is crucial
for efficient CSS styling and maintaining a clean and manageable stylesheet.
How CSS Inheritance Works
1.Inherited Properties:
•Some CSS properties are inherited by default. This means that if you set a property on a parent
element, its child elements will inherit that property unless overridden. Common inherited properties
include:
color
font-family
font-size
line-height
text-align
Non-Inherited Properties:
Many properties do not inherit by default. These properties need to be explicitly set on each element if
you want them to have the same styling. Examples of non-inherited properties include:

margin
padding
border
background
width
height
7: Media Queries & Responsive Design
Media queries and responsive design techniques allow websites to adapt to different
screen sizes and devices, ensuring a smooth and accessible experience for all users.
Media Queries Syntax and Usage
Media queries let you apply CSS styles based on the characteristics of the
user’s device, like screen size, resolution, orientation, etc.
Syntax:
Common Conditions:
min-width and max-width: Often used to create responsive breakpoints.
orientation: Checks if the device is in landscape or portrait mode.
resolution: Applies styles based on screen resolution (useful for high-resolution displays).
Breakpoints and Responsive Layouts
• Breakpoints: Specific screen widths where
layout changes should occur to fit various devices
(e.g., mobile, tablet, desktop).
• Common Breakpoints:
• Mobile: 320px - 480px
• Tablet: 768px - 1024px
• Desktop: 1024px and above
• Responsive Layout: Adjusts layout, spacing, and
content to fit the screen size, typically by stacking
elements vertically on smaller screens or
changing font sizes and paddings for readability.
Mobile-First Design Philosophy
•Mobile-First Approach: Start by designing for the
smallest screen size and then add styles for larger
screens.
•Benefits:
•Ensures the core functionality and content are
optimized for mobile users.
•Encourages lightweight, performant design, as
smaller screens are generally less powerful.
•Implementation:
•Define base styles for mobile devices and use
min-width media queries to enhance layouts for
larger screens.
8: CSS BEM & SMACSS
• BEM and SMACSS are CSS methodologies that help
developers write modular, reusable, and maintainable
styles for scalable applications. Each offers a
structured approach to organizing CSS, reducing
specificity issues, and enhancing readability.

• Block, Element, Modifier (BEM) Methodology


• BEM is a naming convention developed by Yandex that breaks down the UI into small, reusable components.
• BEM Structure:
• Block: A standalone component that is meaningful on its own (e.g., button, header).
• Element: A part of a block that has no standalone meaning and is tied to the block (e.g., button__icon,
header__logo).
• Modifier: A flag on a block or element that changes its appearance or behavior (e.g., button--primary,
header__logo--large).
• BEM Naming Convention:
• block__element--modifier
Examples:

Explanation:
•button: The main block component.
•button--primary: A modified version of the button block.
•button__icon: An element within the button block.
•button__icon--small: A modified version of the button__icon element

Benefits of BEM:
Clear, consistent naming convention that reflects component structure.
Reduced CSS specificity issues since the structure encourages low
specificity selectors.
Easy to read and understand, making it maintainable across teams.
Scalable and Modular Architecture for CSS
(SMACSS)
• SMACSS, developed by Jonathan Snook, is a
methodology for organizing CSS based on
design patterns rather than UI components. It
emphasizes scalability and modularity,
especially in large projects.
SMACSS Categories:
Base: Contains default styles for HTML
elements (e.g., resets, typography).
Layout: Defines the major structural
components (e.g., header, footer, grid).
Module: Styles for individual reusable
components (e.g., buttons, cards).
State: Defines styles that describe the UI
state (e.g., hidden, active).
Theme: Contains styles for themes or
specific visual adjustments
9:CSS Variables (Custom Properties)
CSS Variables, also known as custom properties, allow you to define reusable
values in CSS, making it easier to manage and update styles, especially in larger
projects.
Syntax:
Creating and Using CSS Variables
•CSS variables are defined using the -- prefix and are
scoped to the selector they are defined on, often set in
the :root to make them globally accessible.

Using CSS Variables:


•To use a variable, reference it with the var()
function.
•Example
CSS Variables in Media Queries
• CSS variables can be particularly powerful in media
queries, allowing you to adjust values based on screen
size.
• Example:
Explanation:
•In this example, --spacing and --font-size
will automatically adjust based on the
viewport width.
•On screens smaller than 768px, --spacing is
16px and --font-size is 1rem.
•On screens 768px and larger, --spacing is
updated to 24px and --font-size to 1.25rem.
Benefits of CSS Variables:
• Consistency: Ensures the same value is used throughout the stylesheet.
• Ease of Updates: Changing a value in one place (e.g., :root) updates it
across all elements using that variable.
• Dynamic Values: CSS variables can be updated in real-time using
JavaScript, which makes them more dynamic than traditional CSS
10: Custom Scrollbars
Customizing scrollbars can improve the aesthetics and user experience of web applications,
particularly when the default scrollbars clash with the design. CSS allows for significant
customization of scrollbar appearance on web applications, especially with WebKit-based
browsers (e.g., Chrome, Safari) and newer versions of Firefox.

Basic Styling of Scrollbars in WebKit Browsers


•WebKit Browsers (e.g., Chrome, Safari) support pseudo-elements for styling
scrollbars directly in CSS.
•Pseudo-elements:
•::-webkit-scrollbar: Targets the entire scrollbar.
•::-webkit-scrollbar-thumb: Styles the scrollbar "thumb" (the draggable part).
•::-webkit-scrollbar-track: Styles the scrollbar track (the background area
behind the thumb).
•::-webkit-scrollbar-corner: Targets the bottom corner where horizontal and
vertical scrollbars meet.
Example:

Explanation:
•This example sets the scrollbar width and height
to 10px.
•The scrollbar track has a light gray background
(#f0f0f0).
•The scrollbar thumb is styled with a primary blue
color (#3498db), rounded edges, and a border to
give it a distinct look against the track.
11: CSS Shapes and Clip Paths
• CSS provides powerful tools for creating non-rectangular shapes that
can enhance the design of web applications by breaking away from the
typical boxy look. With CSS Clip Paths and Shapes, you can easily
create circles, polygons, ellipses, and other unique shapes without
relying on images or complex markup.

• CSS Clip Paths


• Clip paths are used to define a visible area of an element
by "clipping" parts of it into non-rectangular shapes.
• This can be applied to images, divs, and other elements
to create shapes like circles, polygons, and custom
forms.
Common Shapes:
•Circle: Creates a circular clip path with the circle() function .

Ellipse: Similar to a circle but with distinct horizontal and


vertical radii.

Polygon: Allows you to specify any number of points to


create complex shapes.

CSS Shapes with the shape-outside Property


•shape-outside works on floated elements and lets you define a custom shape for
the text to flow around it.
•Shape Options:
•Circle: Define a circle for text wrapping
Polygon: Create custom, complex shapes for wrapping.

Combining Shapes and Clip Paths for Design


•You can use clip-path for defining visual shapes, and shape-outside to wrap text around them.
This allows for creative layouts with elements like circular images and custom shapes.
12: CSS for Print Media: Writing Styles
for Printed Documents
Creating styles for printed documents is essential for ensuring that web content is clear,
well-organized, and professional-looking when printed. By using CSS print styles, you
can control how your web page appears on paper, hiding unnecessary elements, adjusting
layouts, and optimizing readability.

Using the Print Media Query


•The @media print query lets you apply specific styles only when the document
is printed.
•Syntax
Adjusting Layout and Visibility
• Hide Unnecessary Elements: For print, remove
elements like navigation bars, ads, or interactive
components that aren’t relevant.
Optimize Layout: Adjust layouts to single-column formats
for better readability on paper.

Styling Text for Print


• Fonts: Use serif fonts like Times New Roman, Georgia,
or Garamond for printed text, as these are generally
easier to read on paper.
Colors: Use black or dark text on a white background to
save ink and improve readability. Set background colors to
white and text colors to black.

You might also like