Css
Uploaded by
shivajiiitan1224Css
Uploaded by
shivajiiitan1224Sidebar
Welcome to this comprehensive guide to CSS, designed to take you through
everything from the basics to advanced concepts. Whether you're just starting with
web design or aiming to elevate your styling skills, this eBook will equip you with the
tools, techniques, and best practices to master CSS. Focusing on practical application
and real-world examples, you'll learn how to create visually stunning, responsive, and
user-friendly web pages. By the end of this guide, you'll be confident in styling
websites, optimizing layouts, and using modern CSS features to build visually
appealing, performance-driven web applications.
Table of Contents
Chapter 1: Introduction to CSS
Chapter 2: CSS Selectors
Chapter 3: Styling Text and Fonts
Chapter 4: Box Model in CSS
Chapter 5: CSS Layout Techniques
Chapter 6: CSS Colors and Backgrounds
Chapter 7: CSS Transitions and Animations
Chapter 8: Responsive Design with CSS
Chapter 9: CSS Flexbox
Chapter 10: CSS Grid Layout
Chapter 11: CSS Typography and Web Fonts
Chapter 12: CSS Pseudo-classes and Pseudo-elements
Chapter 13: CSS Variables (Custom Properties)
Chapter 14: Advanced CSS Selectors
Chapter 15: CSS Media Queries
Chapter 16: Advanced Layouts with Flexbox and Grid
Chapter 17: CSS Preprocessors (Sass, LESS)
Chapter 18: Advanced Animations and Keyframes
Chapter 19: CSS Transforms and 3D Transforms
Chapter 20: CSS Filters and Effects
Chapter 21: CSS Techniques for Web Performance
Chapter 22: Debugging and Browser Compatibility in CSS
Chapter 23: Advanced CSS Concepts and Best Practices
Chapter 24: CSS for Mobile-first and Accessibility
Chapter 1: Introduction to CSS
CSS (Cascading Style Sheets) is a stylesheet language that describes the
presentation of a document written in HTML or XML. It is used to define the
layout, colors, fonts, and other visual aspects of a webpage. CSS enables
you to control the look and feel of your website, making it aesthetically
appealing and enhancing the user experience.
History of CSS
CSS was first introduced by Håkon Wium Lie in 1994. At that time, HTML
was primarily used for structuring content, and there was limited ability to
control the visual presentation of web pages. CSS allowed web developers
to separate the structure of the webpage (HTML) from the design, making
websites more flexible and maintainable.
Over the years, CSS has undergone significant evolution, with new features
and specifications being introduced to handle the increasing complexity of
modern websites. CSS 2.0, released in 1998, was a major update, adding
more sophisticated layout and positioning tools. Later, CSS3 introduced
modules like Flexbox, Grid, and animation support, further expanding the
power of CSS.
What is CSS?
CSS stands for Cascading Style Sheets, and it is the language used to style
HTML documents. By using CSS, you can control the visual appearance of
web pages, defining how elements such as text, images, and layouts are
displayed on different devices and screen sizes.
CSS allows you to define styles in a variety of ways:
Colors: CSS allows you to define colors for text, background, borders,
and more.
Typography: You can define font styles, sizes, and alignments.
Spacing: Control the margins, padding, and spacing between elements.
Layout: Organize elements using Flexbox, Grid, and positioning
techniques.
Responsive Design: Make websites responsive using media queries for
various screen sizes.
CSS Syntax
CSS is composed of selectors and declaration blocks. The selector targets
HTML elements, and the declaration block contains properties and values
that define the style.
Example: CSS Syntax
/* CSS Syntax Example */
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
Types of CSS
CSS can be applied to HTML documents in three main ways: Inline CSS,
Internal CSS, and External CSS.
Type of
Description Example
CSS
CSS defined directly within an
Inline <h1 style="color:
HTML element using the `style`
CSS blue;">Hello World</h1>
attribute.
CSS written inside the <style> tag
Internal <style> h1 color: blue;
in the <head> section of an HTML
CSS </style>
document.
CSS contained in an external file
External <link rel="stylesheet"
linked to the HTML document
CSS href="styles.css">
using the <link> tag.
CSS Selectors
CSS selectors are used to target specific HTML elements to apply styles.
Here are some common types of selectors:
Element Selector: Targets elements by their name (e.g., `h1`, `p`, `div`).
Class Selector: Targets elements with a specific class attribute (e.g.,
`.class-name`).
ID Selector: Targets an element with a specific ID (e.g., `#id-name`).
Attribute Selector: Targets elements with a specific attribute (e.g.,
`[type="text"]`).
How CSS Works
CSS applies styles to HTML elements based on the rules defined in the
stylesheet. A style rule consists of a selector and a declaration block. When
a browser loads a webpage, it parses the HTML and applies the
corresponding CSS styles to render the page.
CSS follows a system called the "cascade," which determines the order in
which styles are applied. If two rules conflict, the more specific rule takes
precedence. This system makes it easy to manage styles in complex
websites.
Chapter 2: CSS Selectors
CSS Selectors form the foundation of styling in CSS. They define the HTML
elements you want to target and apply styles to. CSS selectors are an
essential part of web development, as they allow developers to create
complex designs and interactions. In this chapter, we’ll explore advanced
selector types, how to use them effectively, and various best practices for
structuring your CSS efficiently.
Basic Selectors
At the core of CSS are the basic selectors: Element selectors, Class
selectors, and ID selectors. These are the most commonly used selectors,
and mastering them is essential for writing clean, maintainable CSS.
Example: Basic Selectors
/* Element Selector */
h1 {
color: blue;
}
/* Class Selector */
.button {
background-color: red;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
/* ID Selector */
#header {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
Grouping Selectors
Grouping selectors allows you to apply the same styles to multiple elements
at once. This technique makes your CSS more efficient and reduces
repetition in your code. It’s especially useful when you need to apply similar
styles to various elements across your layout.
Example: Grouping Selectors
/* Grouping multiple selectors for efficiency */
h1, h2, p {
color: #333;
line-height: 1.5;
}
/* Grouping selectors with more specific styles */
h1, h2 {
font-weight: bold;
}
p {
font-size: 16px;
color: #555;
}
Descendant Selectors
Descendant selectors allow you to target elements that are nested within
other elements. This selector is useful when you want to style child elements
based on their position in the DOM hierarchy, without being too specific.
Example: Descendant Selectors
/* Descendant selector */
.container p {
font-size: 18px;
color: #666;
line-height: 1.6;
}
Child Selectors
Child selectors target only direct children of an element, excluding deeper
nested elements. This selector provides more control over which elements
are selected, and helps avoid unwanted cascading styles.
Example: Child Selectors
/* Child selector */
ul > li {
font-weight: bold;
font-size: 20px;
color: darkblue;
}
Pseudo-Classes
Pseudo-classes target elements in specific states, such as when they are
being hovered over, focused on, or active. These selectors are essential for
adding interactivity and visual feedback to elements without JavaScript.
Example: Pseudo-Classes
/* Pseudo-class example */
a:hover {
color: red;
text-decoration: underline;
}
/* Applying styles on focus */
input:focus {
border-color: blue;
background-color: lightyellow;
}
/* Targeting active state */
button:active {
background-color: #0056b3;
}
Pseudo-Elements
Pseudo-elements allow you to style specific parts of an element. They’re
particularly useful for adding decorative elements like icons, content before
or after elements, or modifying text properties.
Example: Pseudo-Elements
/* Pseudo-elements example */
h2::before {
content: "Chapter ";
font-weight: bold;
}
h2::after {
content: " - Read More!";
color: #ff6347;
}
/* Styling the first letter of a paragraph */
p::first-letter {
font-size: 2rem;
font-weight: bold;
color: #0056b3;
}
Attribute Selectors
Attribute selectors target elements based on their attributes, such as the
`href` of links, the `type` of input fields, or the `alt` text of images. They offer
precise control over how elements are selected and styled.
Example: Attribute Selectors
/* Attribute selectors example */
a[href^="https"] {
color: green;
text-decoration: underline;
}
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
width: 100%;
}
img[alt*="logo"] {
max-width: 200px;
height: auto;
}
Chapter 3: Styling Text and Fonts
Typography is one of the most crucial aspects of web design. Proper text
styling not only enhances readability but also adds personality and helps
communicate the brand’s identity. In this chapter, we will explore the key
CSS properties used for styling text and fonts. You'll learn how to manipulate
text sizes, line heights, font families, weights, and more to create an elegant,
readable design.
Basic Text Styling
The simplest form of text styling in CSS involves properties such as `color`,
`font-size`, `line-height`, and `letter-spacing`. These properties allow us to
control the visual appearance of text at the most fundamental level.
Example: Basic Text Styling
/* Basic Text Styling */
p {
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.5px;
color: #333;
}
/* Styling headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #222;
margin-bottom: 10px;
}
Font Family
The `font-family` property in CSS is used to specify the typeface of your
text. It’s important to pick appropriate fonts for your project to ensure
readability and maintain consistency in branding. Web-safe fonts or custom
web fonts like Google Fonts can be used to ensure text renders correctly
across different devices and browsers.
Example: Font Family
/* Defining a font family */
body {
font-family: 'Arial', sans-serif;
}
/* Applying custom Google Font */
h1 {
font-family: 'Lora', serif;
font-weight: 700;
}
/* Fallback fonts */
h2 {
font-family: 'Open Sans', Arial, sans-serif;
}
Font Size and Line Height
The `font-size` and `line-height` properties are essential for controlling the
text’s size and spacing between lines. Proper line-height is crucial for
readability, especially in large bodies of text.
Example: Font Size and Line Height
/* Font Size */
p {
font-size: 18px;
}
/* Line Height */
h1 {
font-size: 36px;
line-height: 1.2; /* Tighter line height for headings */
}
p {
font-size: 16px;
line-height: 1.8; /* More spacing for better readability */
}
Font Weight
The `font-weight` property controls the thickness of the text. It can be
specified as a numeric value (from 100 to 900) or as keywords like `normal`,
`bold`, and `bolder`. Adjusting the font weight helps in creating emphasis or
making specific elements stand out in a design.
Example: Font Weight
/* Font weight */
p {
font-weight: normal;
}
strong {
font-weight: bold;
}
/* Custom font weight (400 is normal, 700 is bold) */
h1 {
font-weight: 700;
}
h2 {
font-weight: 300;
}
Text Transform
The `text-transform` property is used to control the capitalization of text. It
can be useful when you want to change the case of text without modifying
the underlying HTML content.
Example: Text Transform
/* Text Transform */
h1 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}
button {
text-transform: capitalize;
}
Text Decoration
The `text-decoration` property allows you to add or remove decorations from
text, such as underlines, overlines, or line-through. You can also control the
style and color of these decorations.
Example: Text Decoration
/* Text Decoration */
a {
text-decoration: none; /* Removes underline from links */
}
a:hover {
text-decoration: underline;
}
p.strike {
text-decoration: line-through;
color: red;
}
Text Alignment
The `text-align` property defines the alignment of text within an element. The
most common values are `left`, `right`, `center`, and `justify`.
Example: Text Alignment
/* Text Alignment */
h1 {
text-align: center;
}
p {
text-align: justify;
}
Chapter 4: Box Model in CSS
The CSS box model is one of the most essential concepts for layout design
on the web. Understanding how to manipulate the box model allows you to
create responsive and visually appealing layouts. Every element on a web
page is a rectangular box, and the box model defines how the size and
spacing of elements are calculated. In this chapter, we’ll explore the
components of the box model and how to control their behavior.
What is the Box Model?
The box model describes the rectangular boxes generated for elements in
the HTML document. It consists of the following areas:
Content: The actual content of the element, such as text or images.
Padding: Space around the content, inside the border.
Border: A line surrounding the padding (if defined).
Margin: Space outside the border, creating space between the element and
adjacent elements.
Illustration: Box Model
/* Box Model Layout Example */
div {
width: 300px; /* Content width */
padding: 20px; /* Space around content */
border: 5px solid black; /* Border */
margin: 30px; /* Space around the border */
}
This is the content area with
padding, border, and margin
applied.
Content Area
The content area is the innermost part of the box. It is where the actual
content of the element (text, images, etc.) is displayed. The width and height
of the content area are set using the `width` and `height` properties.
Example: Content Area
/* Content Area */
div {
width: 300px;
height: 200px;
background-color: #f4f4f4;
}
This is the content area with defined
width and height.
Padding
Padding is the space between the content and the border. It helps create
breathing room inside the element, ensuring that the content doesn’t touch
the border. Padding can be set individually for each side of the box (top,
right, bottom, left) using the properties `padding-top`, `padding-right`,
`padding-bottom`, and `padding-left`. You can also use the shorthand
`padding` to apply values for all four sides.
Example: Padding
/* Padding Example */
div {
padding: 20px;
background-color: #e0e0e0;
}
div.custom-padding {
padding-top: 10px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 5px;
}
This div has padding around the content.
Border
The border surrounds the padding (if defined) and content area. You can
define its width, style, and color using the `border-width`, `border-style`, and
`border-color` properties. The shorthand `border` property can be used to
set all three properties in one go.
Example: Border
/* Border Example */
div {
border: 5px solid black;
padding: 20px;
background-color: #f9f9f9;
}
This div has a black border around it.
Margin
Margin is the outermost space that separates the element from its
surroundings. It’s useful for spacing out elements in the layout. Just like
padding, margin can be set for each side individually using the properties
`margin-top`, `margin-right`, `margin-bottom`, and `margin-left`. The
shorthand `margin` property allows you to set all four margins at once.
Example: Margin
/* Margin Example */
div {
margin: 30px;
padding: 20px;
background-color: #e0e0e0;
}
This div has margin around it, creating space between other elements.
Chapter 5: CSS Layout Techniques
CSS offers a wide range of layout techniques to help you design flexible and
responsive web pages. From basic layouts like Flexbox and Grid to more
advanced concepts like CSS Multi-column layout, mastering these
techniques is crucial for any web developer. In this chapter, we’ll dive deep
into these layout methods, showcasing their power, flexibility, and practical
usage.
Flexbox Layout
Flexbox (Flexible Box) is a CSS layout model that allows you to create
complex layouts with ease, even when the size of the elements is dynamic or
unknown. Flexbox enables the distribution of space inside a container and
aligns items both horizontally and vertically.
Example: Flexbox Layout
/* Flexbox Layout Example */
.container {
display: flex;
justify-content: space-between; /* Space between items */
align-items: center; /* Vertically center items */
height: 100px;
}
.item {
width: 30%;
background-color: #e0e0e0;
padding: 20px;
text-align: center;
}
Item 1 Item 2 Item 3
CSS Grid Layout
CSS Grid Layout is a two-dimensional layout system for the web that allows
you to create complex grid-based layouts with rows and columns. Grid gives
you control over both horizontal and vertical alignment and helps manage
space distribution in a more efficient way than traditional layouts.
Example: CSS Grid Layout
/* CSS Grid Layout Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Create three equal-width columns */
gap: 20px; /* Space between items */
}
.item {
background-color: #e0e0e0;
padding: 20px;
text-align: center;
}
Item 1 Item 2 Item 3
Multi-Column Layout
The multi-column layout is perfect for creating newspaper-style columns
where content can flow from one column to another. You can define the
number of columns and space between them using the `column-count` and
`column-gap` properties.
Example: Multi-Column Layout
/* Multi-column Layout Example */
.container {
column-count: 3; /* Create 3 columns */
column-gap: 30px; /* Gap between columns */
padding: 20px;
}
.item {
background-color: #e0e0e0;
margin-bottom: 20px;
padding: 10px;
}
Item 1 Item 2 Item 3
Chapter 6: CSS Colors and
Backgrounds
Colors and backgrounds are essential parts of CSS that define the visual
presentation of elements on a web page. Understanding how to use color
properties effectively, as well as how to style backgrounds, is crucial for
creating visually appealing and accessible web pages. In this chapter, we’ll
explore various methods of applying colors, gradients, and background
images in CSS.
Color Properties
CSS allows you to define colors for text, backgrounds, borders, and other
elements. Colors can be specified in multiple ways, including by name,
hexadecimal values, RGB, RGBA, HSL, and HSLA. Each method provides
flexibility for designing your website's color scheme.
Example: Color Properties
/* Color Properties Example */
.text-primary {
color: #3498db; /* Hex color */
}
.text-secondary {
color: rgba(46, 204, 113, 0.8); /* RGBA color */
}
.text-accent {
color: hsl(120, 100%, 25%); /* HSL color */
}
This is a primary color using hex value (#3498db).
This is a secondary color using RGBA (rgba(46, 204, 113, 0.8)).
This is an accent color using HSL (hsl(120, 100%, 25%)).
Background Properties
CSS provides several ways to style the background of elements, including
background color, images, gradients, and more. The background property
allows you to set these values to create visually striking designs.
Example: Background Properties
/* Background Properties Example */
.container {
background-color: #f0f0f0; /* Solid background color */
background-image: url('background.jpg'); /* Background image */
background-size: cover; /* Scale the background image */
background-position: center; /* Position the background image */
}
.gradient-background {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient background */
}
This container has a background color and image.
This container has a gradient background.
Transparent Backgrounds
Using transparency in CSS backgrounds allows you to create layered effects,
where elements can blend with the background behind them. The `rgba()`
and `hsla()` color functions are particularly useful for setting transparent
colors.
Example: Transparent Backgrounds
/* Transparent Backgrounds Example */
.transparent-background {
background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
}
.overlay-background {
background-color: hsla(0, 0%, 0%, 0.6); /* Transparent black background */
}
This container has a semi-transparent background.
This container has a transparent black background overlay.
Chapter 7: CSS Transitions and
Animations
Transitions and animations in CSS allow you to create smooth and interactive
effects on elements as they change states. While transitions are ideal for
simple changes (like hover effects), animations offer more control and
flexibility to create complex sequences of movements. In this chapter, we'll
explore how to implement both transitions and animations in CSS to enhance
the user experience on your website.
CSS Transitions
CSS transitions allow you to change property values smoothly over a given
duration when an element's state changes (such as when hovering over it).
Transitions are often used for hover effects, focus states, and other visual
changes that need to be smooth and visually appealing.
Example: CSS Transition
/* CSS Transition Example */
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease; /* Transition property
}
.button:hover {
background-color: #2ecc71; /* New background color on hover */
transform: scale(1.1); /* Slightly scale the button */
}
Hover over this button to see the transition effect.
CSS Animations
CSS animations allow you to create complex sequences of movements,
changes, and effects on elements. Unlike transitions, which only animate
from one state to another, animations can define keyframes and iterate
multiple times, offering a higher level of control over the animation flow.
Example: CSS Animation
/* CSS Animation Example */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
.animated-button {
background-color: #f39c12;
color: white;
padding: 10px 20px;
border-radius: 5px;
animation: bounce 1s ease infinite; /* Apply the bounce animation */
}
This button has a bouncing animation applied.
Combining Transitions and Animations
You can also combine both transitions and animations in a single element.
For example, you might want an element to animate continuously, but also
respond to user interactions like hover or click. This can create a rich,
interactive experience for users.
Example: Combining Transitions and Animations
/* Combined Example */
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease; /* Transition property
animation: bounce 1s ease infinite; /* Continuous animation */
}
.button:hover {
background-color: #2ecc71; /* Change background on hover */
transform: scale(1.1); /* Scale up on hover */
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
This button has both a transition on hover and a continuous bounce animation.
Chapter 8: Responsive Design with
CSS
In today's digital world, ensuring that websites work seamlessly across a
variety of devices and screen sizes is crucial. Responsive web design is a
methodology that enables websites to adapt to different screen resolutions
and devices, providing a consistent and optimized user experience. In this
chapter, we'll explore how to implement responsive design techniques using
CSS.
Media Queries
Media queries are the backbone of responsive design. They allow you to
apply different styles depending on the characteristics of the device or
viewport. By using media queries, you can specify different styles for
different screen sizes, orientations, and device capabilities.
Example: Media Queries
/* Media Query Example */
@media (max-width: 768px) {
.container {
padding: 20px;
background-color: lightblue;
}
}
@media (max-width: 480px) {
.container {
padding: 10px;
background-color: lightcoral;
}
}
Resize the window to see the media query effect.
Fluid Layouts
A fluid layout uses relative units like percentages, `vw`, `vh`, `em`, and `rem`
instead of fixed pixel values. This allows the layout to adapt to different
screen sizes and resolutions, making the website more flexible and
responsive.
Example: Fluid Layout
/* Fluid Layout Example */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.box {
width: 30%;
margin: 10px;
padding: 20px;
background-color: lightgray;
display: inline-block;
box-sizing: border-box;
}
@media (max-width: 768px) {
.box {
width: 45%;
}
}
@media (max-width: 480px) {
.box {
width: 100%;
}
}
Box 1Box 2Box 3
Flexbox for Layouts
Flexbox is a powerful layout tool in CSS that allows you to create responsive
and flexible layouts. It is especially useful for aligning items within containers
and handling varying screen sizes and orientations.
Example: Flexbox Layout
/* Flexbox Layout Example */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 10px;
padding: 20px;
background-color: lightyellow;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Item 1Item 2Item 3
Grid Layout for Responsive Design
CSS Grid is another powerful layout system that provides more control over
complex layouts. It is particularly useful for creating multi-column designs
and handling responsive layouts without media queries for every element.
Example: CSS Grid Layout
/* CSS Grid Layout Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.item {
background-color: lightgreen;
padding: 20px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
Item 1 Item 2 Item 3
Chapter 9: CSS Flexbox
Flexbox (Flexible Box) is a powerful layout tool in CSS that makes it easy to
design flexible, responsive layouts. Flexbox simplifies the process of aligning
items inside containers, both horizontally and vertically. It provides more
control over the distribution of space and alignment of items compared to
traditional layout methods. In this chapter, we’ll explore the fundamental
concepts of Flexbox and how it can be used to create various types of
layouts.
Flexbox Basics
Flexbox is designed to distribute space along a single axis (either
horizontally or vertically). The container becomes a flex container, and its
children (the flex items) can be aligned and spaced in various ways.
Example: Basic Flexbox Layout
/* Basic Flexbox Layout Example */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 30%;
padding: 20px;
background-color: lightcoral;
text-align: center;
}
Item 1Item 2Item 3
Flex Container Properties
The Flex container has several properties that allow you to control the layout
and alignment of its items. These properties affect how the flex items are
displayed inside the container.
Example: Flex Container Properties
/* Flex Container Properties Example */
.container {
display: flex;
flex-direction: column; /* Stack items vertically */
justify-content: center; /* Center items vertically */
align-items: flex-start; /* Align items to the left */
gap: 20px; /* Add space between items */
}
Item 1
Item 2
Item 3
Flex Item Properties
Flex items also have several properties that allow you to control their size,
alignment, and how they grow or shrink inside the flex container. These
properties make it easy to create dynamic and responsive layouts.
Example: Flex Item Properties
/* Flex Item Properties Example */
.container {
display: flex;
}
.item {
flex-grow: 1; /* Allow the item to grow */
flex-shrink: 1; /* Allow the item to shrink */
flex-basis: 200px; /* Set the initial size */
margin: 10px;
padding: 20px;
background-color: lightblue;
}
Item 1Item 2Item 3
Flexbox Alignment
Flexbox provides powerful alignment tools to align both the items and the
container. You can align items horizontally (along the main axis) or vertically
(along the cross axis).
Example: Flexbox Alignment
/* Flexbox Alignment Example */
.container {
display: flex;
justify-content: center; /* Align items horizontally */
align-items: center; /* Align items vertically */
height: 300px; /* Set a height for demonstration */
}
.item {
width: 100px;
height: 100px;
background-color: lightgreen;
}
Item 1
Advanced Flexbox Layouts
Flexbox can be combined with other CSS properties to create advanced
layouts. For example, using Flexbox with `wrap`, `order`, and `align-self`
allows you to create more complex and dynamic layouts, such as equal-
height columns or responsive grids.
Example: Advanced Flexbox Layout
/* Advanced Flexbox Layout Example */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 200px; /* Allow items to grow, shrink, and set a base size */
margin: 10px;
padding: 20px;
background-color: lightyellow;
text-align: center;
}
.item:nth-child(odd) {
order: 1; /* Change the order of items */
}
Item 1Item 2Item 3
Chapter 10: CSS Grid Layout
CSS Grid Layout is a powerful layout system that allows you to create
complex, responsive layouts with ease. Unlike Flexbox, which operates on a
one-dimensional layout (either row or column), CSS Grid provides a two-
dimensional layout system that controls both rows and columns
simultaneously. With Grid, you can place items precisely where you want
them, create responsive grids, and manage space distribution with greater
control.
Grid Basics
CSS Grid is based on the concept of a container with rows and columns. The
grid container defines how the space is divided, and the grid items are
placed inside these cells. The container defines the grid structure, and the
items are automatically placed into the grid, but you can also place them
manually for more control.
Example: Basic Grid Layout
/* Basic Grid Layout Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
gap: 10px;
}
.item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Grid Container Properties
The grid container has several properties that control the layout of its items.
These include properties for defining grid columns, rows, gaps, and
alignment. These properties give you great flexibility in creating complex
layouts.
Example: Grid Container Properties
/* Grid Container Properties Example */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
grid-template-rows: auto; /* Automatically size rows */
gap: 15px; /* Add space between grid items */
justify-items: center; /* Align items horizontally */
align-items: center; /* Align items vertically */
}
Item 1 Item 2 Item 3 Item 4
Grid Item Properties
Grid items also have properties that allow you to control how they are
positioned within the grid. You can specify the size of an item, where it
should be placed, and how it should span across rows or columns.
Example: Grid Item Properties
/* Grid Item Properties Example */
.item {
grid-column: span 2; /* Make the item span 2 columns */
grid-row: span 2; /* Make the item span 2 rows */
background-color: lightblue;
padding: 20px;
text-align: center;
}
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Grid Alignment
CSS Grid offers powerful alignment options, allowing you to control the
alignment of both the grid container and grid items. You can align items
along both the rows and columns using properties like `justify-items`, `align-
items`, `justify-self`, and `align-self`.
Example: Grid Alignment
/* Grid Alignment Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* Align items horizontally */
align-items: center; /* Align items vertically */
}
.item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}
Item 1 Item 2 Item 3
Advanced Grid Layouts
CSS Grid Layout allows for more advanced features, such as creating
responsive layouts using media queries, controlling the placement of items
across both rows and columns, and spanning multiple rows or columns.
Example: Advanced Grid Layout
/* Advanced Grid Layout Example */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 20px;
}
.item {
background-color: lightyellow;
padding: 20px;
text-align: center;
}
.item:nth-child(1) {
grid-column: span 2; /* Make this item span 2 columns */
}
.item:nth-child(4) {
grid-row: span 2; /* Make this item span 2 rows */
}
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Chapter 11: CSS Typography and
Web Fonts
Typography plays a crucial role in the design and readability of a website.
CSS provides powerful tools to control the presentation of text, including
font styles, sizes, weights, line heights, and letter spacing. Additionally, web
fonts enable you to use custom fonts that are not limited to the default
system fonts, allowing for unique and creative designs.
Basic Typography Styling
Basic typography styles can be applied using simple CSS properties like
`font-family`, `font-size`, `font-weight`, `line-height`, `letter-spacing`, and
`text-align`. These properties help you control the appearance of text
elements such as paragraphs, headings, and lists.
Example: Basic Typography Styling
/* Basic Typography Styling Example */
h1, h2, h3, h4, h5, h6 {
font-family: 'Arial', sans-serif;
font-weight: bold;
}
p {
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
ul {
font-family: 'Verdana', sans-serif;
letter-spacing: 0.5px;
font-size: 14px;
}
Heading 1
This is a paragraph styled with a serif font family, a larger font size, and line
spacing for improved readability.
Item 1
Item 2
Item 3
Web Fonts
Web fonts allow you to use custom fonts that are not available by default in a
user's system. By linking to web font providers like Google Fonts, you can
easily import fonts and apply them to your content. This gives you more
flexibility and creativity in your typography.
Example: Web Font Usage
/* Web Font Usage Example */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
This is a Heading with Roboto
This paragraph uses the Roboto font, which was imported from Google
Fonts. You can apply different font weights and styles to specific elements.
Font Sizing
Font sizing allows you to set how large or small the text appears. Using
relative units like `em`, `rem`, and percentages offers more flexibility,
especially when designing responsive layouts.
Example: Font Sizing
/* Font Sizing Example */
h1 {
font-size: 3rem; /* 3 times the root font size */
}
p {
font-size: 1rem; /* 1 root font size */
}
small {
font-size: 0.875rem; /* 0.875 of the root font size */
}
This is a large heading
This is a paragraph with normal font size (1rem).
This is a small text.
Font Weight and Style
You can control the weight of the text using the `font-weight` property and
change its style (italic or normal) with the `font-style` property. Font weight
can range from `100` (lightest) to `900` (heaviest), with `normal` and `bold` as
common values.
Example: Font Weight and Style
/* Font Weight and Style Example */
h1 {
font-weight: 700; /* Bold */
font-style: italic; /* Italic */
}
p {
font-weight: 400; /* Normal weight */
font-style: normal; /* Normal style */
}
This is a Bold Italic Heading
This is a normal weight paragraph with regular font style.
Line Height and Letter Spacing
Line height (`line-height`) affects the spacing between lines of text,
improving readability. Letter spacing (`letter-spacing`) controls the space
between characters. Both properties can be adjusted to fine-tune
typography and enhance the visual appearance of text.
Example: Line Height and Letter Spacing
/* Line Height and Letter Spacing Example */
h1 {
line-height: 1.5;
letter-spacing: 2px;
}
p {
line-height: 1.7;
letter-spacing: 1px;
}
This is a Heading with Line
Height and Letter Spacing
This paragraph has adjusted line height and letter spacing to improve readability
and design.
Chapter 12: CSS Pseudo-classes and
Pseudo-elements
CSS pseudo-classes and pseudo-elements allow you to apply styles to
specific parts of elements or certain states of an element. They provide
advanced styling capabilities without adding extra HTML markup. Pseudo-
classes target element states like hover or focus, while pseudo-elements
target specific parts of an element, such as the first letter or line.
CSS Pseudo-classes
A pseudo-class is used to define the special state of an element. It can
target states such as when an element is hovered over, focused, or selected.
Some common pseudo-classes include `:hover`, `:focus`, `:active`, `:nth-
child()`, and `:first-child`.
Example: Pseudo-class Usage
/* Pseudo-class Usage Example */
a:hover {
color: #ff5733; /* Change color on hover */
}
button:focus {
outline: 3px solid #3498db; /* Add outline when focused */
}
li:nth-child(odd) {
background-color: #f2f2f2; /* Odd items have different background */
}
Hover over this link to change color Focus on this button
Item 1
Item 2
Item 3
Item 4
CSS Pseudo-elements
A pseudo-element allows you to style a specific part of an element. Common
pseudo-elements include `::before`, `::after`, `::first-letter`, and `::first-line`.
These pseudo-elements can be used to insert content, style the first letter of
a text, or apply styling to the first line of a paragraph.
Example: Pseudo-element Usage
/* Pseudo-element Usage Example */
p::first-letter {
font-size: 2rem;
font-weight: bold;
}
div::after {
content: ' (Read more)';
color: #3498db;
}
h2::before {
content: '🔥 ';
color: red;
}
This is a paragraph with a styled first letter.
Chapter Heading
This is a div with a custom after content: (Read more)
Combining Pseudo-classes and Pseudo-
elements
You can also combine pseudo-classes and pseudo-elements to target more
specific states and parts of elements. For instance, you can use `:hover` in
combination with `::after` to create hover effects with additional content.
Example: Combining Pseudo-classes and Pseudo-elements
/* Combining Pseudo-classes and Pseudo-elements */
a:hover::after {
content: ' →';
color: #ff5733;
}
button:focus::before {
content: '🔍 ';
color: #3498db;
}
Hover over this link to see an arrow added
Focus on this button to see a search icon
Chapter 13: CSS Variables (Custom
Properties)
CSS Variables, also known as Custom Properties, allow you to store values
that can be reused throughout your stylesheet. This makes it easier to
manage and update styles, especially in large projects. Variables can be
defined globally or scoped to specific sections of a page.
Defining and Using CSS Variables
CSS Variables are defined using the syntax `--variable-name: value;` and are
usually placed inside a selector. Once defined, they can be accessed using
the `var()` function. Variables are case-sensitive and can be defined on the
`:root` pseudo-class for global access, or within specific elements for local
scope.
Example: Defining and Using CSS Variables
/* Defining CSS Variables */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
/* Using CSS Variables */
body {
font-size: var(--font-size);
background-color: var(--primary-color);
}
button {
color: var(--secondary-color);
background-color: var(--primary-color);
padding: 10px 20px;
border: none;
border-radius: 5px;
}
Button styled using CSS Variables
This is a paragraph where the font size is controlled by a CSS variable.
Scope and Inheritance of CSS Variables
CSS Variables can be scoped to specific elements, meaning you can define
a variable inside a class or element, and it will only be accessible within that
scope. Variables defined on the `:root` pseudo-class are global, while those
defined inside specific elements will only apply to that element and its
children.
Example: Scoped CSS Variables
/* Global CSS Variable */
:root {
--global-color: #3498db;
}
/* Scoped CSS Variable */
.card {
--card-color: #2ecc71;
}
body {
background-color: var(--global-color);
}
.card {
background-color: var(--card-color);
padding: 20px;
border-radius: 10px;
}
This card uses a scoped CSS
variable for its background
color.
The background color of the body is controlled by a global CSS variable.
Changing CSS Variables Dynamically
One of the powerful features of CSS Variables is the ability to change their
values dynamically using JavaScript. By modifying the `style` property of an
element or `document.documentElement` (the root), you can update the
values of your CSS variables and see the changes reflected instantly.
Example: Changing CSS Variables with JavaScript
/* Global CSS Variable */
:root {
--background-color: #3498db;
}
/* JavaScript to change CSS Variable */
function changeBackgroundColor() {
document.documentElement.style.setProperty('--background-color', '#e74c3c');
}
Change Background Color
Click the button above to dynamically change the background color using CSS
Variables.
Chapter 14: Advanced CSS Selectors
Advanced CSS selectors provide powerful ways to target elements more
precisely than basic selectors. These selectors help to apply styles to
elements based on various conditions like attributes, positions, relationships,
and more. In this chapter, we'll explore some of these advanced selectors
and demonstrate how to use them effectively in your web projects.
Attribute Selectors
Attribute selectors allow you to target elements based on their attributes and
values. You can use different patterns to match attributes, such as exact
match, partial match, and more.
Example: Attribute Selectors
/* Select elements with a specific attribute */
input[type="text"] {
border: 2px solid #3498db;
}
/* Select elements with an attribute that contains a specific word */
a[href*="example"] {
color: #2ecc71;
}
/* Select elements with an attribute that starts with a specific value */
img[src^="images/"] {
border-radius: 10px;
}
Text input Visit Example
Sample
Pseudo-classes
Pseudo-classes allow you to target elements based on their state or position,
such as when they are hovered, focused, or selected. These selectors are
powerful for interactive designs.
Example: Pseudo-classes
/* Hover effect */
button:hover {
background-color: #3498db;
color: #fff;
}
/* Focus effect */
input:focus {
border-color: #3498db;
outline: none;
}
/* First child */
ul li:first-child {
font-weight: bold;
}
/* Nth-child (even) */
ul li:nth-child(even) {
background-color: #f2f2f2;
}
Hover me! Focus on me!
Item 1
Item 2
Item 3
Pseudo-elements
Pseudo-elements allow you to style specific parts of an element, such as the
first letter, first line, or content inserted before or after an element. These are
useful for adding decorative effects without needing additional HTML.
Example: Pseudo-elements
/* Before pseudo-element */
a::before {
content: "🔗 ";
margin-right: 8px;
}
/* After pseudo-element */
a::after {
content: " (link)";
color: #3498db;
}
/* First letter pseudo-element */
p::first-letter {
font-size: 2rem;
font-weight: bold;
color: #3498db;
}
Example link
This is a paragraph where the first letter is styled with a pseudo-element.
Combinators
Combinators allow you to combine multiple selectors to target elements
based on their relationships in the HTML structure. The four primary
combinators are descendant, child, adjacent sibling, and general sibling.
Example: Combinators
/* Descendant selector */
div p {
color: #3498db;
}
/* Child selector */
ul > li {
list-style-type: square;
}
/* Adjacent sibling */
h1 + p {
margin-top: 0;
}
/* General sibling */
h1 ~ p {
font-style: italic;
}
Main Heading
Paragraph 1
Paragraph 2
Item 1
Item 2
Item 3
Chapter 15: CSS Media Queries
Media queries are a powerful feature of CSS that allow you to apply styles
based on various conditions, such as the viewport width, device orientation,
or screen resolution. They are essential for responsive design, ensuring that
your website adapts to different screen sizes and devices. In this chapter, we
will explore how to use media queries to make your designs flexible and
responsive.
Basic Syntax of Media Queries
The syntax of a media query consists of the @media rule followed by a
condition (such as the width or height of the viewport) and the CSS styles
you want to apply. Media queries are usually placed at the end of the CSS
file to ensure that they override default styles.
Example: Media Queries Syntax
/* Media query for devices with a viewport width of 600px or less */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* Media query for devices with a viewport width of 1024px or more */
@media (min-width: 1024px) {
body {
background-color: lightgreen;
}
}
Resize the window to see the background color change based on the
viewport width.
Breakpoints and Responsive Design
Breakpoints are specific viewport widths at which your design should
change to accommodate different devices, such as smartphones, tablets,
and desktops. Common breakpoints include 480px (mobile), 768px (tablet),
and 1024px (desktop). Media queries are used to target these breakpoints
and adjust the layout and styles accordingly.
Example: Breakpoints for Responsive Design
/* Mobile devices */
@media (max-width: 480px) {
body {
font-size: 14px;
}
}
/* Tablets */
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
/* Desktops */
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
Resize the window to see the font size change based on the viewport width.
Orientation and Media Features
In addition to the viewport width and height, media queries can also be used
to target device orientation (landscape or portrait) and other media features
like resolution, aspect ratio, and color scheme.
Example: Orientation and Media Features
/* Portrait orientation */
@media (orientation: portrait) {
body {
background-color: lightblue;
}
}
/* Landscape orientation */
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
}
/* High-resolution displays */
@media (min-resolution: 192dpi) {
body {
background-color: lightpink;
}
}
Rotate your device to see the background color change based on the
orientation (portrait or landscape).
Combining Multiple Conditions
You can combine multiple media queries using logical operators like and,
not, and only. This allows you to create more complex and specific
conditions for applying styles.
Example: Combining Media Queries
/* Apply styles for devices that are 768px wide or less AND in portrait mode */
@media (max-width: 768px) and (orientation: portrait) {
body {
font-size: 14px;
}
}
/* Apply styles for devices that are not in portrait mode */
@media not all and (orientation: portrait) {
body {
background-color: lightcoral;
}
}
Resize or rotate the window to see how combining media queries works.
Using Media Queries in a Responsive Layout
Media queries are a core part of creating responsive layouts. By using
breakpoints and adjusting styles for different screen sizes, you can ensure
your website looks great on all devices. Let's see an example of using media
queries to create a responsive grid layout.
Example: Responsive Grid Layout
/* Default grid layout */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* Apply 3-column layout for medium screens */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
/* Apply 2-column layout for small screens */
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/* Apply single column layout for very small screens */
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
Item 1 Item 2 Item 3 Item 4
Chapter 16: Advanced Layouts with
Flexbox and Grid
Flexbox and Grid are two of the most powerful CSS layout tools available
today. While both are designed to create complex layouts with ease, they
excel in different areas. In this chapter, we will explore advanced layout
techniques using both Flexbox and Grid, showing how to combine their
strengths to create responsive, modern web designs.
Advanced Flexbox Layouts
Flexbox is ideal for creating one-dimensional layouts where elements are
arranged in a row or column. However, when combined with more advanced
properties, Flexbox can achieve highly flexible layouts. Let's dive deeper into
how you can use Flexbox for more advanced designs.
Example: Creating a Complex Flexbox Layout
/* Flex container with wrapping and alignment */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
/* Flex item styling */
.container > div {
flex: 1 1 calc(33.33% - 20px);
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
/* Flex item on small screens */
@media (max-width: 768px) {
.container > div {
flex: 1 1 100%;
}
}
Item 1 Item 2 Item 3
Advanced CSS Grid Layouts
Grid is a two-dimensional layout system, making it perfect for more complex,
multi-row, and multi-column designs. By using grid-template-areas, grid-
template-rows, and grid-template-columns, you can create advanced,
responsive grid layouts.
Example: Creating an Advanced Grid Layout
/* Grid container with custom row and column layout */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"header header header"
"sidebar main sidebar"
"footer footer footer";
gap: 20px;
}
/* Grid item styling */
header {
grid-area: header;
background-color: #f0f0f0;
padding: 20px;
}
sidebar {
grid-area: sidebar;
background-color: #f0f0f0;
padding: 20px;
}
main {
grid-area: main;
background-color: #f0f0f0;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 20px;
}
/* Responsive layout for smaller screens */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
Header Sidebar Main Content Footer
Combining Flexbox and Grid
One of the most powerful ways to create layouts is by combining the
strengths of Flexbox and Grid. Flexbox can be used for one-dimensional
layouts inside a grid, while Grid can be used for more complex, two-
dimensional structures. Let's see an example of combining both.
Example: Combining Flexbox and Grid Layouts
/* Outer grid container */
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
/* Flexbox layout inside the main content */
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.main-content > div {
flex: 1 1 calc(33.33% - 20px);
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}
/* Inner grid layout for the footer */
.footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* Responsive layout for smaller screens */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.main-content > div {
flex: 1 1 100%;
}
.footer {
grid-template-columns: 1fr;
}
}
Item 1 Item 2
Footer Footer Footer
1 2 3
Item 3
Chapter 17: CSS Preprocessors
(Sass, LESS)
CSS preprocessors like Sass and LESS allow for more powerful, dynamic,
and maintainable stylesheets. By introducing variables, nesting, mixins, and
other features, preprocessors help to improve code organization and make
stylesheets easier to manage. In this chapter, we will explore the basics of
Sass and LESS, their features, and how to integrate them into your workflow.
Introduction to Sass
Sass (Syntactically Awesome Style Sheets) is one of the most popular CSS
preprocessors. It extends CSS with powerful features such as variables,
nesting, mixins, and inheritance. Let's take a look at how these features can
help improve your styling workflow.
Example: Sass with Variables and Nesting
/* Defining variables in Sass */
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: "Helvetica, Arial, sans-serif";
/* Using variables and nesting styles */
body {
font-family: $font-stack;
background-color: $primary-color;
color: white;
h1 {
color: $secondary-color;
}
.container {
display: flex;
justify-content: space-between;
padding: 20px;
.box {
background-color: darken($primary-color, 10%);
padding: 15px;
border-radius: 5px;
}
}
}
Box 1 Box 2
Introduction to LESS
LESS is another widely used CSS preprocessor that shares many features
with Sass, such as variables, mixins, and nesting. LESS, however, uses a
more CSS-like syntax. It's a great choice for developers who prefer a simpler
approach while still enjoying the benefits of preprocessors.
Example: LESS with Variables and Nesting
/* Defining variables in LESS */
@primary-color: #3498db;
@secondary-color: #2ecc71;
@font-stack: "Helvetica, Arial, sans-serif";
/* Using variables and nesting styles */
body {
font-family: @font-stack;
background-color: @primary-color;
color: white;
h1 {
color: @secondary-color;
}
.container {
display: flex;
justify-content: space-between;
padding: 20px;
.box {
background-color: darken(@primary-color, 10%);
padding: 15px;
border-radius: 5px;
}
}
}
Box 1 Box 2
Key Features of Sass and LESS
Both Sass and LESS provide a range of features that enhance the CSS
authoring process. Below are some of the key features of each
preprocessor:
Variables: Both Sass and LESS allow you to store values (like colors, fonts, or any
CSS value) in variables, which can be reused throughout the stylesheet. This
improves maintainability and reduces repetition.
Nesting: Both preprocessors allow you to nest CSS selectors in a hierarchical
manner, making the structure of your stylesheets more readable and easier to
manage.
Mixins: Sass and LESS offer mixins, which are reusable pieces of code that can
be included in other selectors to avoid code duplication.
Functions and Operations: Both preprocessors support mathematical operations
and functions like color manipulation (e.g., lighten, darken), string manipulation,
and more.
Inheritance: Sass offers inheritance with the `@extend` directive, allowing one
selector to inherit styles from another.
Modularization: Both Sass and LESS allow you to break your CSS into smaller,
modular files that can be imported into one main file. This keeps your stylesheets
organized and maintainable.
How to Set Up Sass and LESS
Setting up Sass or LESS in your project is simple and requires a few steps.
Here’s how to get started with both preprocessors.
Setting Up Sass
Install Node.js and npm (if you haven't already).
Install Sass globally using npm: npm install -g sass
Compile Sass files using the following command: sass input.scss output.css
Set up a watcher to automatically compile Sass files on changes: sass --watch
input.scss:output.css
Setting Up LESS
Install Node.js and npm (if you haven't already).
Install LESS globally using npm: npm install -g less
Compile LESS files using the following command: lessc input.less output.css
Set up a watcher to automatically compile LESS files on changes: lessc --watch
input.less output.css
Chapter 18: Advanced Animations
and Keyframes
Animations in CSS allow for dynamic, eye-catching transitions on web
pages, adding interactivity and flair to your design. Keyframes are at the core
of CSS animations, letting you define styles at various points in the animation
sequence. In this chapter, we’ll dive into advanced animation techniques,
including keyframes, easing functions, and complex animation sequences.
Understanding Keyframes
Keyframes allow you to define intermediate steps in your animation,
specifying how styles should change at various points. You can use
keyframes to create complex animations by describing the state of an
element at different times during its lifecycle.
Example: Bouncing Ball Animation with Keyframes
/* Defining keyframes for a bouncing ball */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* Applying the keyframe animation */
.bouncing-ball {
width: 50px;
height: 50px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 2s ease-in-out infinite;
}
Easing Functions
Easing functions control the speed of the animation, making it appear more
natural. By default, animations follow a linear path, but easing functions allow
for smooth acceleration and deceleration. Here are some common easing
functions:
ease: Starts slow, becomes fast, and then slows down again.
linear: The animation moves at a constant speed.
ease-in: Starts slowly and accelerates.
ease-out: Starts fast and decelerates.
ease-in-out: Starts and ends slowly, with acceleration in the middle.
cubic-bezier: Custom easing, where you define your own acceleration curve
using four control points.
Example: Animation with Easing Functions
/* Easing with cubic-bezier function */
@keyframes move-left-right {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
.move-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: move-left-right 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
Combining Multiple Animations
You can combine multiple animations to create more complex visual effects.
By using different keyframes and animation properties, you can animate
multiple elements or properties at once.
Example: Combining Scaling and Rotation
/* Combining scaling and rotating animation */
@keyframes scale-rotate {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.5) rotate(180deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
.scale-rotate-box {
width: 100px;
height: 100px;
background-color: #f39c12;
animation: scale-rotate 3s ease-in-out infinite;
}
Staggering Animations
Staggering animations can make elements animate one after another,
creating a more dynamic and fluid visual effect. You can achieve this by
applying a delay to each animation, creating a cascading effect.
Example: Staggered Animations
/* Staggering animation with delay */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.staggered-items div {
width: 50px;
height: 50px;
background-color: #9b59b6;
margin: 10px;
opacity: 0;
animation: fadeIn 1s forwards;
}
.staggered-items div:nth-child(1) {
animation-delay: 0s;
}
.staggered-items div:nth-child(2) {
animation-delay: 0.3s;
}
.staggered-items div:nth-child(3) {
animation-delay: 0.6s;
}
Chapter 19: CSS Transforms and 3D
Transforms
CSS transforms are a powerful way to manipulate the position, size, and
orientation of elements. With transforms, you can scale, rotate, skew, and
move elements in both 2D and 3D spaces. This chapter will explore the
basics of 2D transforms, followed by an introduction to 3D transforms,
allowing you to create interactive and visually dynamic designs.
Basic 2D Transforms
In 2D transforms, we can move, scale, rotate, and skew elements on the X
and Y axes. These transforms allow for simple yet effective animations and
interactions on the web.
Example: Moving an Element (Translate)
/* Moving an element 100px to the right */
.element {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translateX(100px); /* Move right */
}
Scaling Elements
The scale() transform allows you to increase or decrease the size of an
element. It works on both the X and Y axes, which means you can scale an
element proportionally or non-proportionally.
Example: Scaling an Element
/* Scaling an element by 1.5 times */
.element {
width: 100px;
height: 100px;
background-color: #3498db;
transform: scale(1.5); /* Scale up by 1.5 times */
}
Rotating Elements
The rotate() transform rotates an element around a specified point, often
the center of the element. You can specify the angle of rotation in degrees.
Example: Rotating an Element
/* Rotating an element by 45 degrees */
.element {
width: 100px;
height: 100px;
background-color: #f39c12;
transform: rotate(45deg); /* Rotate 45 degrees */
}
Skewing Elements
The skew() transform allows you to slant an element along the X or Y axis.
This can create interesting effects when combined with other transforms.
Example: Skewing an Element
/* Skewing an element along the X-axis by 20 degrees */
.element {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: skewX(20deg); /* Skew along X-axis */
}
3D Transforms
3D transforms add depth and perspective to your elements, enabling you to
create more immersive and dynamic effects. By using the perspective
property and 3D transform functions, you can manipulate elements in three
dimensions.
Example: Rotating in 3D Space
/* Enabling 3D space with perspective and rotating in 3D */
.container {
width: 200px;
height: 200px;
perspective: 500px; /* Set perspective to create 3D effect */
}
.element {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg); /* 3D Rotation around the Y-axis */
}
3D Cube Example
One of the most exciting uses of 3D transforms is creating 3D objects, like
cubes. By combining multiple 3D transforms, you can create rotating cubes,
carousels, and other interactive 3D effects.
Example: Rotating 3D Cube
/* Creating a rotating 3D cube */
.container {
width: 200px;
height: 200px;
perspective: 1000px;
}
.cube {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d; /* Preserve 3D space */
animation: rotateCube 3s infinite linear;
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
border: 2px solid #3498db;
}
.cube .front {
transform: translateZ(50px);
}
.cube .back {
transform: rotateY(180deg) translateZ(50px);
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
}
@keyframes rotateCube {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
Chapter 20: CSS Filters and Effects
CSS filters are a powerful tool that allows you to apply various visual effects
to elements, such as blurring, brightness adjustment, contrast, grayscale,
and more. Filters can be used to create engaging effects for images,
backgrounds, and even text. In this chapter, we will explore the most
common CSS filters and how to use them creatively to enhance your web
designs.
Applying Filters
CSS filters are applied using the filter property, which can take a list of
filter functions. Each filter function applies a specific effect, such as blur or
brightness, to the selected element.
Example: Applying a Blur Effect
/* Applying a blur effect */
.element {
width: 200px;
height: 200px;
background-color: #9b59b6;
filter: blur(5px); /* Apply blur effect */
}
Common Filters
There are several common CSS filters that can be used to apply effects to
elements. Some of the most popular filters include:
Blur: Adds a blur effect to the element.
Brightness: Adjusts the brightness of an element.
Contrast: Increases or decreases the contrast of an element.
Grayscale: Converts an element to grayscale.
Saturate: Increases or decreases the saturation of an element.
Invert: Inverts the colors of an element.
Sepia: Applies a sepia-tone effect to the element.
Brightness and Contrast
The brightness() filter adjusts the brightness of an element, while the
contrast() filter modifies the contrast. These filters can be used to create
vibrant and dynamic visuals.
Example: Adjusting Brightness
/* Increasing brightness */
.element {
width: 200px;
height: 200px;
background-color: #f39c12;
filter: brightness(150%); /* Increase brightness */
}
Example: Adjusting Contrast
/* Increasing contrast */
.element {
width: 200px;
height: 200px;
background-color: #2ecc71;
filter: contrast(200%); /* Increase contrast */
}
Grayscale, Sepia, and Invert
These filters allow you to create various color-based effects. The
grayscale() filter removes color, sepia() gives an image a warm brown
tone, and invert() swaps the colors of an element.
Example: Grayscale
/* Converting to grayscale */
.element {
width: 200px;
height: 200px;
background-color: #e74c3c;
filter: grayscale(100%); /* Convert to grayscale */
}
Example: Sepia
/* Applying sepia effect */
.element {
width: 200px;
height: 200px;
background-color: #f39c12;
filter: sepia(100%); /* Apply sepia tone */
}
Example: Invert
/* Inverting colors */
.element {
width: 200px;
height: 200px;
background-color: #3498db;
filter: invert(100%); /* Invert colors */
}
Combining Filters
Filters can be combined to create complex visual effects. You can apply
multiple filters to an element by separating them with spaces. Here's how
you can combine different filters to achieve more interesting results.
Example: Combining Multiple Filters
/* Combining grayscale, brightness, and blur */
.element {
width: 200px;
height: 200px;
background-color: #e74c3c;
filter: grayscale(50%) brightness(150%) blur(5px);
}
Chapter 21: CSS Techniques for Web
Performance
Web performance is crucial for providing a smooth and engaging user
experience. Optimizing CSS can lead to faster page loads, improved
interactivity, and better overall performance, especially on mobile devices. In
this chapter, we will explore various CSS techniques that can help improve
the performance of your website or web application.
Minifying CSS
Minification is the process of removing unnecessary characters from your
CSS files, such as whitespace, comments, and line breaks. This reduces the
file size and helps speed up loading times, especially for mobile users with
limited bandwidth.
Tools for Minifying CSS
CSSO: A popular tool for optimizing and minifying CSS.
PostCSS: A tool that allows you to use plugins to optimize CSS, including
minification.
Terser: A JavaScript-based minifier that can also handle CSS.
Removing Unused CSS
Unused CSS refers to styles that are written but not applied to any elements
in your website or application. Removing unused CSS helps reduce the file
size, leading to faster load times. There are several tools available to help
identify and eliminate unused CSS.
Tools for Removing Unused CSS
PurgeCSS: A tool that analyzes your HTML and CSS files to remove
unused CSS rules.
UnCSS: A tool that removes unused CSS based on the content of your
HTML files.
Tree-shaking: Some build tools, such as Webpack, have built-in support
for tree-shaking, which removes unused CSS as part of the bundling
process.
Using CSS Grid and Flexbox Responsibly
While both CSS Grid and Flexbox are powerful layout systems, they can have
a performance impact if overused or used incorrectly. Optimizing their use
can help improve page performance.
Optimizing Grid and Flexbox
Use Flexbox for simpler layouts: Flexbox is great for simple, one-
dimensional layouts. If your layout is more complex, CSS Grid is more
appropriate.
Avoid excessive nesting: Overusing nested Flexbox or Grid containers
can lead to performance issues, so keep nesting to a minimum.
Define explicit dimensions: Defining widths and heights explicitly can
help improve performance, as browsers won't need to perform complex
layout calculations.
Async Loading of CSS
Loading CSS asynchronously allows the browser to load the CSS after the
HTML and JavaScript are loaded. This improves the page load time,
especially on slower networks.
Example: Asynchronous CSS Loading
<link rel="stylesheet" href="style.css" media="none" onload="if(media!='all')media='al
Critical CSS
Critical CSS is the minimum amount of CSS required to render the above-
the-fold content of a page. By extracting and inlining this CSS, you can
speed up the page's first render and reduce render-blocking.
Example: Inlining Critical CSS
<style>
/* Critical CSS */
body {
margin: 0;
padding: 0;
}
.header {
background: #333;
color: #fff;
}
</style>
Use of Will-Change Property
The will-change property tells the browser that an element will change in
the future, so the browser can optimize for this change in advance. This can
improve performance for animations and transitions.
Example: Using Will-Change
/* Optimizing for a transformation */
.element {
will-change: transform; /* Tell the browser to optimize for transform */
transform: translateX(100px);
}
Font Loading Optimization
Fonts can be a major performance bottleneck if not loaded correctly. Use
strategies like font-display, and preloading fonts to avoid blocking the page
render while fonts are being loaded.
Example: Using Font Display
/* Using font-display to control font loading behavior */
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: swap; /* Swap the font once it's loaded */
}
Chapter 22: Debugging and Browser
Compatibility in CSS
Debugging CSS and ensuring cross-browser compatibility can be
challenging. Different browsers may interpret CSS rules differently, and small
issues can lead to layout problems and inconsistent designs. This chapter
will explore effective techniques for debugging CSS, ensuring browser
compatibility, and using the right tools to create consistent experiences
across multiple platforms.
Debugging CSS
Debugging CSS can be tricky, especially when dealing with layout issues,
unexpected behavior, or style conflicts. The key is to isolate the problem,
inspect the styles, and identify the root cause.
1. Use Browser Developer Tools
Modern browsers like Chrome, Firefox, and Edge provide excellent developer
tools that allow you to inspect, edit, and debug CSS styles. You can:
Inspect elements to view applied CSS styles.
Use the "box model" visualization to identify spacing, padding, and
margin issues.
Check for CSS overrides or conflicting styles in the "Styles" tab.
Live-edit CSS rules and immediately see changes on the page.
2. Simplify the Problem
If you're facing a complex issue, try isolating it by temporarily disabling other
styles or removing unrelated HTML elements. This will help you identify the
specific CSS rule or combination that's causing the issue.
3. Use Debugging Tools and Frameworks
Consider using debugging tools such as:
CSSLint: A tool to identify errors and potential problems in your CSS
code.
PostCSS Plugins: Plugins like "postcss-preset-env" can help with
automatic fixes and features like autoprefixing.
Chrome DevTools CSS Overview: An overview of CSS styles and their
impact on performance.
Browser Compatibility
Ensuring cross-browser compatibility is one of the most important aspects
of CSS development. Different browsers interpret CSS properties in slightly
different ways, so it's essential to test your styles on multiple browsers and
devices.
1. Check for Vendor Prefixes
Some CSS properties require vendor prefixes to work across different
browsers. For instance, older versions of Safari might require the "-webkit-"
prefix for certain properties. Ensure you use these prefixes when needed:
/* Example of vendor prefixes */
div {
-webkit-transform: rotate(45deg); /* Safari */
-ms-transform: rotate(45deg); /* IE */
transform: rotate(45deg); /* Standard */
}
2. Use Can I Use
The Can I Use website is an excellent resource to check the compatibility of
CSS properties across different browsers. It provides detailed information
about which browsers support specific features and whether they require
prefixes.
3. Graceful Degradation and Progressive Enhancement
To ensure your website is accessible to all users, even those using older
browsers, practice graceful degradation. This involves building your website
with modern features while ensuring that essential content and functionality
are available to users with less capable browsers. Progressive enhancement,
on the other hand, means building a basic, functional version of your site
that works across all browsers and then enhancing it with advanced features
for more modern browsers.
Tools for Cross-Browser Testing
Cross-browser testing tools can help automate the process of checking your
website on multiple browsers and devices. Some popular tools include:
BrowserStack: A cloud-based testing platform that allows you to test your
site on different browsers, devices, and OS versions.
CrossBrowserTesting: Another cloud-based service for testing websites
on multiple browsers and operating systems.
LambdaTest: A cross-browser testing tool with real-time testing
capabilities across various browsers and OS environments.
Debugging CSS Layout Issues
Layout issues are among the most common challenges when working with
CSS. Some strategies for debugging layout issues include:
Using the "outline" property to highlight and visualize elements and their
boundaries.
Temporarily setting background colors or borders to better understand
the positioning of elements.
Checking for floating elements that may cause layout shifts.
Inspecting CSS properties like position, z-index, flex, and grid to
ensure proper layout behavior.
Fixing CSS Issues for Mobile Devices
Mobile browsers sometimes behave differently from desktop browsers due
to limited resources or screen size. Consider the following:
Test layouts on small screens using the responsive design mode in
browser developer tools.
Use media queries to adapt styles specifically for mobile devices.
Avoid fixed widths and use percentage-based widths or CSS Grid/Flexbox
layouts to create fluid layouts.
Chapter 23: Advanced CSS Concepts
and Best Practices
In this chapter, we will dive into advanced CSS concepts that help elevate
your design to the next level. By using modern tools and techniques, you can
create highly maintainable, efficient, and robust CSS that scales well for
large projects. We will also explore best practices for writing clean, scalable,
and performance-optimized CSS.
Using Advanced Selectors
CSS selectors are powerful tools that enable you to target specific elements
on a page. Mastering advanced selectors will help you write cleaner, more
efficient code.
1. Attribute Selectors
Attribute selectors allow you to target elements based on their attributes or
values. For example, you can style all links that point to an external URL or all
elements with a specific data attribute.
/* Selects all <a> elements with href starting with 'https' */
a[href^="https"] {
color: green;
}
/* Selects all <input> elements with a specific type */
input[type="email"] {
border: 2px solid blue;
}
2. Combinator Selectors
Combinators allow you to define relationships between elements. For
example, selecting a div inside a nav or a sibling h2 inside a section.
/* Selects all <p> elements inside <div> */
div > p {
color: red;
}
/* Selects all <h2> elements that are next to another <h2> */
h2 + h2 {
margin-top: 20px;
}
3. Pseudo-classes and Pseudo-elements
Pseudo-classes like :hover, :focus, and :nth-child allow you to apply
styles based on the state of an element. Pseudo-elements like ::before and
::after are used to insert content before or after an element.
/* Apply a style when a link is hovered */
a:hover {
color: red;
}
/* Insert content before each <li> */
li::before {
content: "• ";
color: gray;
}
Writing Modular and Maintainable CSS
As projects grow larger, it becomes essential to write modular and
maintainable CSS. This section will cover how to structure your CSS to make
it scalable and easy to maintain over time.
1. BEM (Block Element Modifier) Methodology
BEM is a popular methodology that helps to create modular CSS by
organizing your class names into blocks, elements, and modifiers. This
improves readability and scalability by clearly indicating the relationships
between elements.
/* Block */
.button {
background-color: blue;
}
/* Element */
.button__icon {
margin-right: 8px;
}
/* Modifier */
.button--large {
font-size: 18px;
}
2. CSS Methodologies
Several CSS methodologies can help in writing scalable CSS:
OOCSS (Object-Oriented CSS): Encourages code reuse and abstraction
of design elements.
SMACSS (Scalable and Modular Architecture for CSS): Focuses on
categorizing CSS rules into base, layout, module, state, and theme styles.
Atomic CSS: A utility-first approach where classes are as small as
possible to focus on a single purpose (e.g., .text-center, .padding-5).
Optimizing CSS for Performance
Optimizing CSS for performance is crucial to ensure your website loads
quickly and performs well on all devices. Below are some best practices for
writing efficient CSS.
1. Minimize CSS File Size
Keeping your CSS file size small improves page load times. You can minimize
your CSS by:
Removing unused CSS with tools like PurifyCSS or UnCSS.
Minifying your CSS files using tools like CSSNano or Terser.
Combining multiple CSS files into one file to reduce HTTP requests.
2. Use Efficient Selectors
Avoid using overly complex or deep CSS selectors, as they can lead to
slower rendering times. For example, avoid using overly specific or
descendant selectors like:
/* Inefficient selector */
div > p > span > a {
color: blue;
}
3. Load CSS Asynchronously
By loading CSS files asynchronously, you can improve page load
performance. This ensures that non-critical styles do not block the rendering
of the page.
Best Practices for Maintaining Clean CSS
Writing clean, readable, and maintainable CSS is essential for the long-term
success of any project. Below are some tips for keeping your CSS codebase
clean:
Write descriptive class names that clearly define the purpose of the
element.
Group related CSS rules together and use consistent formatting.
Comment your CSS to explain complex styles or decisions.
Use a CSS linter to enforce coding standards and catch errors early.
Keep your CSS modular and avoid making styles too specific or tightly
coupled with HTML structure.
Chapter 24: CSS for Mobile-first and
Accessibility
In this chapter, we will explore how to design websites that prioritize mobile-
first experiences while also ensuring they are accessible to all users. With
more users browsing the web on mobile devices than ever before, it is
essential to ensure your website is optimized for smaller screens.
Additionally, accessibility is crucial to make sure your website is usable by
people with various disabilities. We'll cover how to implement mobile-first
CSS and incorporate accessibility best practices into your design.
Mobile-first Design
Mobile-first design is an approach where you prioritize designing for mobile
screens first, then progressively enhance the layout and functionality for
larger screens. This ensures that your website performs well on small
devices, where space and resources are limited.
1. Mobile-first Layout Strategy
The core idea of mobile-first design is to create a functional layout and
design optimized for mobile screens, which then adapts to larger screens as
needed. You can achieve this with CSS by using responsive design
techniques like media queries.
/* Mobile-first styles */
body {
font-size: 16px;
padding: 10px;
}
nav {
display: block;
}
/* Tablet and larger screens */
@media (min-width: 768px) {
body {
font-size: 18px;
}
nav {
display: flex;
justify-content: space-between;
}
}
/* Desktop and larger screens */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
nav {
justify-content: space-evenly;
}
}
2. Fluid Layouts and Flexible Units
For a mobile-first approach, it is important to use fluid layouts and flexible
units like percentages, viewport widths (vw), and viewport heights (vh) to
create layouts that scale smoothly across different screen sizes.
/* Use percentages and viewport units for fluid layouts */
.container {
width: 100%;
max-width: 1200px;
padding: 5%;
}
header {
height: 10vh;
background-color: lightblue;
}
Accessibility in CSS
Accessibility (a11y) is the practice of making web content usable by all users,
including people with disabilities. This section will cover how to implement
accessibility principles in your CSS design to ensure that your website can
be used by a diverse range of people.
1. Color Contrast
One of the key elements in accessibility is ensuring sufficient color contrast.
Text should be readable for people with low vision or color blindness. Tools
like the W3C Contrast Checker can help determine whether your text has
enough contrast against its background.
/* Ensure text has high contrast */
body {
color: #333;
background-color: #f9f9f9;
}
/* Links with high contrast */
a {
color: #0066cc;
text-decoration: none;
}
a:focus, a:hover {
color: #004499;
background-color: #e0e0e0;
}
2. Accessible Focus States
It's important to make sure interactive elements, such as links, buttons, and
form elements, have visible focus states to make navigation easier for users
with disabilities, especially those who rely on keyboard navigation.
/* Ensure focus states are visible */
a:focus, button:focus {
outline: 3px solid #ffbf47;
outline-offset: 2px;
}
3. Avoiding Content that Flashes
Flashing or strobing content can trigger seizures in some individuals. Make
sure your CSS animations or transitions are not too fast, or avoid using
animations that cause content to flash.
/* Avoid flashing content */
@keyframes example {
from { background-color: blue; }
to { background-color: red; }
}
.element {
animation: example 3s infinite linear;
animation-timing-function: ease-in-out;
}
4. Use of ARIA (Accessible Rich Internet Applications)
While ARIA is not strictly CSS, using ARIA roles and properties enhances
accessibility for users who rely on screen readers. Ensure you implement
appropriate ARIA attributes for interactive elements.
Testing and Validating Accessibility
Testing your website for accessibility is essential to ensure it is usable by all
users. You can use tools such as the WAVE Web Accessibility Evaluation
Tool or Axe Accessibility Checker to audit your site for accessibility issues.
Keyboard Navigation: Ensure all interactive elements can be accessed
using the keyboard (Tab, Enter, Space, etc.).
Screen Reader Compatibility: Check that all content is correctly read
aloud by screen readers.
Color Blindness Testing: Test your design with color-blind users in mind,
using tools like Color Oracle.
You might also like
- Core Web Development: CW412 Programming in CSSNo ratings yetCore Web Development: CW412 Programming in CSS92 pages
- Cascading Style Sheets (CSS) : The Basics ofNo ratings yetCascading Style Sheets (CSS) : The Basics of64 pages
- Developing Cascading Style Sheets Edited133No ratings yetDeveloping Cascading Style Sheets Edited13362 pages
- Rank Booster JEE MAIN Maths Part 1.2-CompressedNo ratings yetRank Booster JEE MAIN Maths Part 1.2-Compressed111 pages
- Away We Go Read With Dick and Jane Penguin Young Readers Read WithNo ratings yetAway We Go Read With Dick and Jane Penguin Young Readers Read With40 pages
- PDF (DOWNLOAD) Flirting With Stocks: Stock Market Investing For Beginners READ ONLINENo ratings yetPDF (DOWNLOAD) Flirting With Stocks: Stock Market Investing For Beginners READ ONLINE1 page
- Ebooks File Financial Intelligence Revised Edition All Chapters100% (4)Ebooks File Financial Intelligence Revised Edition All Chapters34 pages
- Invoice: BSP Staffing T.A.V. Leo Vuijst Lentedans 49 B 2907 Ax Capelle Aan Den IjsselNo ratings yetInvoice: BSP Staffing T.A.V. Leo Vuijst Lentedans 49 B 2907 Ax Capelle Aan Den Ijssel2 pages
- E-Learning Notes During Movement Control Order (Mco) Due To Covid 19No ratings yetE-Learning Notes During Movement Control Order (Mco) Due To Covid 1913 pages
- Punjab Badminton Association: Age Certificate For PlayersNo ratings yetPunjab Badminton Association: Age Certificate For Players2 pages
- Orc Eroica, Vol. 3: Conjecture Chronicles Rifujin Na Magonote & Asanagi Full Chapter PDF100% (16)Orc Eroica, Vol. 3: Conjecture Chronicles Rifujin Na Magonote & Asanagi Full Chapter PDF5 pages
- Philately Quiz - PDF - Postage Stamp - PhilatelyNo ratings yetPhilately Quiz - PDF - Postage Stamp - Philately88 pages
- ITS Postal Auction No.60 - Last Date 13th April 2013No ratings yetITS Postal Auction No.60 - Last Date 13th April 20135 pages
