CSS - Styling and layout (including responsive design using Flexbox/Grid)

1.​ CSS Basics (Selectors, Properties, and Values)​

2.​ Styling Text and Fonts​

3.​ Box Model​

4.​ Positioning and Display​

5.​ Flexbox​

6.​ CSS Grid Layout​

7.​ Responsive Design​

8.​ Advanced CSS Concepts (Transitions, Animations, Variables, etc.)​

9.​ CSS Best Practices and Optimization​

1. CSS Basics

Selectors

CSS Selectors are patterns used to target HTML elements to apply styles.

●​ Basic Selectors:​

○​ Type Selector (div {}) – Targets all <div> elements.​

○​ Class Selector (.className {}) – Targets all elements with a class of

className.​

○​ ID Selector (#idName {}) – Targets an element with the id of idName.​

○​ Universal Selector (* {}) – Targets all elements.​

○​ Attribute Selector (input[type="text"] {}) – Targets inputs with the

type="text" attribute.​
Combinators

●​ Descendant Selector (div p {}) – Targets <p> elements inside <div>.​

●​ Child Selector (div > p {}) – Targets direct children <p> of <div>.​

●​ Adjacent Sibling (h1 + p {}) – Targets the <p> immediately after <h1>.​

●​ General Sibling (h1 ~ p {}) – Targets all <p>s after <h1>.​

Pseudo-classes and Pseudo-elements

Pseudo-classes: Add special states (e.g., :hover, :focus, :nth-child(),
:first-child).​
​
css​
CopyEdit​
a:hover { color: red; }
p:nth-child(2) { background-color: yellow; }

●​

Pseudo-elements: Style specific parts of elements (::before, ::after, ::first-letter,

::first-line).​
​
css​
CopyEdit​
p::first-letter { font-size: 2em; color: red; }

●​

2. Styling Text and Fonts

●​ Font Properties:​

font-family: Sets the font of the text.​

​
css​
CopyEdit​
p { font-family: 'Arial', sans-serif; }
 ○​

font-size: Defines the size of the text, using units like px, em, rem, vw, etc.​
​
css​
CopyEdit​
p { font-size: 16px; }

○​

font-weight: Specifies the thickness of the text.​

​
css​
CopyEdit​
p { font-weight: bold; }

○​

line-height: Sets the space between lines.​

​
css​
CopyEdit​
p { line-height: 1.6; }

○​
●​ Text Properties:​

color: Changes the text color.​

​
css​
CopyEdit​
p { color: #333; }

○​

text-align: Aligns text left, right, center, or justify.​

​
css​
CopyEdit​
p { text-align: center; }

○​
text-transform: Changes case (uppercase, lowercase, capitalize).​
​
css​
CopyEdit​
p { text-transform: uppercase; }

○​

text-decoration: Adds decoration like underline, line-through, overline.​

​
css​
CopyEdit​
a { text-decoration: underline; }

○​

3. Box Model

Every element in HTML can be visualized as a rectangular box using the CSS Box Model,
consisting of four layers:

●​ Content: The actual content, like text or images.​

●​ Padding: The space between the content and the border.​

●​ Border: The boundary of the box.​

●​ Margin: The space outside the border, separating the element from others.​

Box Model Properties:

width, height: Defines the dimensions of the content area.​
​
css​
CopyEdit​
div { width: 200px; height: 150px; }

●​

padding: Space inside the box between content and border.​

​
css​
CopyEdit​
div { padding: 20px; }

●​

border: Defines the style, width, and color of the border.​

​
css​
CopyEdit​
div { border: 2px solid black; }

●​

margin: Space outside the box between the element and others.​
​
css​
CopyEdit​
div { margin: 10px; }

●​

Box-Sizing:
The box-sizing property can be used to include padding and border in the element's width
and height calculation.​
​
css​
CopyEdit​
div {
box-sizing: border-box;
}

●​

4. Positioning and Display

Positioning:

●​ Static (default): Elements are positioned based on the normal flow of the document.​

Relative: The element is positioned relative to its normal position.​

​
css​
CopyEdit​
div { position: relative; top: 10px; left: 20px; }

●​

Absolute: The element is positioned relative to its nearest positioned ancestor (anything that
isn’t static).​
​
css​
CopyEdit​
div { position: absolute; top: 50px; left: 50px; }

●​

Fixed: The element is positioned relative to the browser window and doesn’t scroll with the rest
of the page.​
​
css​
CopyEdit​
div { position: fixed; bottom: 0; right: 0; }

●​

Sticky: The element is positioned based on the user's scroll position.​

​
css​
CopyEdit​
div { position: sticky; top: 0; }

●​

Display:
Block: Elements take up the full width available.​
​
css​
CopyEdit​
div { display: block; }

●​

Inline: Elements take up only as much width as necessary and sit next to other elements.​
​
css​
CopyEdit​
span { display: inline; }

●​

Inline-Block: Elements act like inline elements but maintain their block-level structure.​
​
css​
CopyEdit​
div { display: inline-block; }

●​
●​ Flex and Grid: More advanced display modes, discussed below.​

5. Flexbox (Flexible Box Layout)

Flexbox is a one-dimensional layout model that lets you align elements horizontally or vertically
with flexibility and control.

Key Flexbox Concepts:

●​ Container Properties (display: flex):​

flex-direction: Defines the direction of flex items (row, column).​

​
css​
CopyEdit​
.container { display: flex; flex-direction: row; }

○​

justify-content: Aligns flex items horizontally (center, space-between, space-around).​

​
css​
CopyEdit​
.container { justify-content: space-between; }

○​

align-items: Aligns flex items vertically (stretch, center, flex-start, flex-end).​

​
css​
CopyEdit​
.container { align-items: center; }

○​

flex-wrap: Allows items to wrap onto multiple lines.​

​
css​
CopyEdit​
.container { flex-wrap: wrap; }

○​
●​ Item Properties:​

flex-grow: Specifies how much a flex item should grow relative to others.​
​
css​
CopyEdit​
.item { flex-grow: 1; }

○​

flex-shrink: Defines how much a flex item should shrink if necessary.​

​
css​
CopyEdit​
.item { flex-shrink: 2; }

○​

flex-basis: Sets the initial size of a flex item.​

​
css​
CopyEdit​
.item { flex-basis: 200px; }

○​

align-self: Aligns a single item independently of others.​

​
css​
CopyEdit​
.item { align-self: flex-end; }

○​

6. CSS Grid Layout

CSS Grid is a two-dimensional layout system that lets you design both rows and columns
simultaneously.

Key Grid Concepts:

●​ Container Properties (display: grid):​

grid-template-columns: Defines the columns in the grid.​

​
css​
CopyEdit​
.container { display: grid; grid-template-columns: 1fr 2fr 1fr; }

○​

grid-template-rows: Defines the rows in the grid.​

​
css​
CopyEdit​
.container { grid-template-rows: auto 100px; }

○​

grid-gap: Adds space between rows and columns.​

​
css​
CopyEdit​
.container { grid-gap: 10px; }

○​

grid-template-areas: Allows you to assign specific areas to grid items.​

​
css​
CopyEdit​
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}

○​
●​ Item Properties:​

grid-column: Specifies which column an item should span.​

​
css​
CopyEdit​
.item { grid-column: 1 / 3; }

○​

grid-row: Specifies which row an item should span.​

​
css​
CopyEdit​
.item { grid-row: 2 / 4; }

○​

7. Responsive Design

Responsive design ensures that a website looks good on all devices. It’s achieved using
techniques like media queries, relative units, and flexible grid layouts.

Media Queries:

Media queries apply different styles based on screen size, resolution, or orientation.

css
CopyEdit
@media (max-width: 768px) {
.container { flex-direction: column; }
}
Relative Units:

Use relative units like em, rem, %, vh, and vw instead of fixed units (px).

8. Advanced CSS Concepts

CSS Transitions: Smooth changes between property values.​
​
css​
CopyEdit​
button {
transition: background-color 0.3s ease;
}

●​

CSS Animations: Create keyframe animations.​

​
css​
CopyEdit​
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
div { animation: slideIn 1s forwards; }

●​

CSS Variables: Custom properties for reusable values.​

​
css​
CopyEdit​
:root {
--main-color: #3498db;
}
div { background-color: var(--main-color); }

●​
9. CSS Best Practices and Optimization

●​ Use shorthand properties for compact code.​

●​ Organize CSS with comments and sections.​

●​ Optimize for performance by reducing unused styles.​

●​ Follow BEM (Block Element Modifier) for CSS structure and naming.​

●​ Use preprocessors like SASS or LESS to write maintainable and scalable CSS.​

By following this structured learning, you'll become proficient in CSS3, including Flexbox, Grid,
and responsive design, allowing you to tackle any design challenges with confidence.

The CSS guide I provided covers most of the fundamental and advanced topics needed to
master modern web design. However, there are a few specialized areas and additional
concepts that I haven’t covered in detail, which can further enhance your CSS expertise:

1. CSS Functions
calc() Function: Used to perform calculations to dynamically adjust the size of elements.​
​
css​
CopyEdit​
div { width: calc(100% - 50px); }

●​

clamp() Function: Allows setting a value that adjusts based on viewport size with a minimum
and maximum limit.​
​
css​
CopyEdit​
div { font-size: clamp(1rem, 2vw, 3rem); }

●​

min() and max(): Return the smallest or largest value from a list of values.​
​
css​
CopyEdit​
div { width: min(50%, 400px); }

●​

2. Responsive Design Techniques Beyond Media Queries

Responsive Typography: Using rem or em units and scaling text with media queries or vw
units.​
​
css​
CopyEdit​
h1 { font-size: 4vw; }

●​

Fluid Layouts: Creating layouts that adapt fluidly without relying solely on fixed breakpoints,
using percentage-based widths, max-width, and min-width.​
​
css​
CopyEdit​
div { width: 80%; max-width: 1200px; min-width: 300px; }

●​

3. CSS Logical Properties

These properties help in writing styles that can adapt to different languages (like right-to-left
text).

margin-inline-start, margin-inline-end: Margin based on text direction.​

​
css​
CopyEdit​
div { margin-inline-start: 20px; }

●​

padding-block-start, padding-block-end: Padding for top and bottom (block axis) that
adapts to writing mode.​
​
css​
CopyEdit​
div { padding-block-start: 10px; }
 ●​

4. Advanced Flexbox Concepts

●​ Flexbox Alignment in Complex Scenarios: Dealing with more complex layouts using
nested flexboxes.​

○​ Control alignment and distribution of flex items within different nested flex
containers.​

order: Controls the order of flex items, overriding their natural order in the HTML.​
​
css​
CopyEdit​
.item { order: 2; }

●​

5. CSS Subgrid (Advanced Grid Layout)

Subgrid allows grid items to inherit the grid structure of their parent grid container.​
​
css​
CopyEdit​
.parent { display: grid; grid-template-columns: 1fr 1fr; }
.child { display: subgrid; grid-template-columns: subgrid; }

●​

This feature is still experimental in some browsers, but it's a powerful tool for creating nested
grids.

6. CSS Scroll Snap

Scroll Snap helps create layouts where scrolling snaps to certain points.​
​
css​
CopyEdit​
.container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
}
.item { scroll-snap-align: center; }
 ●​

7. CSS Shapes
CSS Shapes allow content to wrap around custom shapes instead of the usual box model.​
​
css​
CopyEdit​
float: left;
shape-outside: circle(50%);

●​

This is useful for more dynamic layouts where text can wrap around images or other elements in
a circular or irregular shape.

8. CSS Masking and Clipping

clip-path: Creates custom shapes by clipping parts of elements.​
​
css​
CopyEdit​
div { clip-path: circle(50% at 50% 50%); }

●​

mask: Applies images or gradients to mask an element’s background.​

​
css​
CopyEdit​
div { mask-image: url(mask.png); mask-size: cover; }

●​

9. CSS Blend Modes

mix-blend-mode: Controls how the content of an element blends with its background.​
​
css​
CopyEdit​
div { mix-blend-mode: multiply; }

●​

background-blend-mode: Blends multiple background layers.​

​
css​
CopyEdit​
div { background-blend-mode: overlay; }

●​

10. CSS Filters

Filters apply graphical effects like blurring or color-shifting an element.​
​
css​
CopyEdit​
img { filter: blur(5px); }

●​

You can also apply filters like brightness(), contrast(), grayscale(), and sepia().

11. CSS Writing Modes

Control the text direction and block flow direction.​
​
css​
CopyEdit​
.vertical-text { writing-mode: vertical-rl; }

●​

This is particularly useful for languages like Chinese, Japanese, and Korean or for creating
more creative text layouts.

12. CSS Houdini (Experimental)

●​ Houdini is a set of APIs that allow developers to write custom CSS that can directly
affect the browser's CSS engine.​

●​ You can create custom properties, paint custom elements, or even write your own
layout engine.​

13. CSS Frameworks and Methodologies

While this isn't directly a part of CSS, learning how to integrate your CSS knowledge with
frameworks and methodologies can make your development process faster and more
structured.

●​ CSS Methodologies: BEM (Block Element Modifier), OOCSS (Object-Oriented CSS),

SMACSS (Scalable and Modular Architecture for CSS).​

●​ CSS Frameworks: Tailwind CSS, Bootstrap, Bulma, and others.​

○​ Tailwind CSS: Utility-first framework where you apply predefined classes to build
custom designs.​

○​ Bootstrap: A popular framework that comes with pre-built components and

responsive grid systems.​

14. Accessibility (a11y) in CSS

Creating websites that are accessible to all users, including those with disabilities, is crucial.

Focus States: Style focusable elements (:focus) for keyboard navigation.​

​
css​
CopyEdit​
a:focus { outline: 2px solid blue; }

●​

Visible Text Contrast: Ensuring enough contrast between text and its background for
readability.​
​
css​
CopyEdit​
p { color: #333; background-color: #fff; }

●​

Prefers Reduced Motion: Respect user settings for reduced motion (like turning off
animations).​
​
css​
CopyEdit​
@media (prefers-reduced-motion: reduce) {
 * { animation: none; }

CSS FRAMEWORKS - BOOTSTRAP AND TAILWIND

1. Bootstrap

What is Bootstrap?

Bootstrap is a powerful, open-source CSS framework that helps you

build responsive, mobile-first websites quickly and easily. It
includes ready-made components, utilities, and a flexible grid system.

Why Use Bootstrap?

●​ Responsive Layout: Mobile-first, responsive grid system that

adapts to different screen sizes.​

●​ Pre-built Components: Includes buttons, modals, cards, forms,

etc.​

●​ Cross-browser Compatibility: Works across most modern browsers.​

●​ Customizable: Easy to customize with SCSS or through Bootstrap's

theme options.​

Getting Started with Bootstrap

1.​Include Bootstrap in Your Project:​

You can use a CDN link to get started quickly:​

html
CopyEdit

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.
min.css" rel="stylesheet">

Alternatively, install via npm for local development:

bash

CopyEdit

npm install bootstrap

2.​Basic HTML Structure:​

Here’s how to structure a basic Bootstrap-enabled page:​

html

CopyEdit

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.
min.css" rel="stylesheet">

<title>Bootstrap Example</title>

</head>
<body>

<div class="container">

<h1 class="text-center">Hello, Bootstrap!</h1>

</div>

</body>

</html>

Bootstrap Grid System

Bootstrap’s grid system is based on 12 columns, which allows you to

create complex layouts quickly by dividing your content into rows and
columns.

Basic Grid Example:

html

CopyEdit

<div class="container">

<div class="row">

<div class="col-md-6">Column 1</div>

<div class="col-md-6">Column 2</div>

</div>

</div>

Responsive Grids:
You can create responsive layouts using different breakpoints (sm, md,
lg, xl, xxl):

html

CopyEdit

<div class="row">

<div class="col-sm-12 col-md-8 col-lg-6">Responsive Column</div>

</div>

Common Bootstrap Components

Buttons:​
​
html​
CopyEdit​
<button type="button" class="btn btn-primary">Primary Button</button>

<button type="button" class="btn btn-secondary">Secondary

Button</button>

1.​

Navbar:​
​
html​
CopyEdit​
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#navbarNav">

<span class="navbar-toggler-icon"></span>
 </button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Home</a>

</li>

</ul>

</div>

</nav>

2.​

Modals:​
​
html​
CopyEdit​
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">

Launch Modal

</button>

<div class="modal fade" id="exampleModal" tabindex="-1"

aria-labelledby="exampleModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Modal

Title</h5>
 <button type="button" class="btn-close"
data-bs-dismiss="modal"></button>

</div>

<div class="modal-body">Modal content here.</div>

</div>

</div>

</div>

3.​

Advanced Bootstrap Customizations

Customizing via SCSS:

Bootstrap is built with SCSS, so you can customize it by overriding

variables.

Install Bootstrap SCSS:​

​
bash​
CopyEdit​
npm install bootstrap@5.1.3

●​

Create a custom SCSS file:​

​
scss​
CopyEdit​
$primary: #ff5733; // Change primary color

@import "bootstrap/scss/bootstrap";

●​

Bootstrap Utilities:
Bootstrap provides many utility classes for spacing, typography,
visibility, and flexbox/grid utilities.

Spacing Utilities: You can easily add padding/margins using these

classes:​
​
html​
CopyEdit​
<div class="p-3 m-2">Padded and Margined Element</div>

●​

Flexbox Utilities: Easily create flexible layouts:​

​
html​
CopyEdit​
<div class="d-flex justify-content-between">

<div>Item 1</div>

<div>Item 2</div>

</div>

●​

2. Tailwind CSS

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level

utility classes to build custom designs without leaving your HTML.

Why Use Tailwind CSS?

●​ Highly Customizable: Build unique designs without needing to

override styles.​
 ●​ Utility-First: Focus on writing minimal CSS by using pre-built
classes.​

●​ Responsive Design: Tailwind provides utilities for creating

responsive layouts.​

●​ Consistency: Offers consistent spacing, colors, and typography.​

Getting Started with Tailwind CSS

Install Tailwind via npm:​

​
bash​
CopyEdit​
npm install -D tailwindcss

npx tailwindcss init

1.​

Tailwind Configuration: Tailwind’s tailwind.config.js file lets you

customize your theme:​
​
js​
CopyEdit​
module.exports = {

theme: {

extend: {

colors: {

primary: '#1DA1F2',

},

},
 },

};

2.​

Basic HTML Structure:​

​
html​
CopyEdit​
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>Tailwind CSS Example</title>

<link href="styles.css" rel="stylesheet">

</head>

<body class="bg-gray-100">

<div class="container mx-auto p-4">

<h1 class="text-4xl text-blue-500">Hello, Tailwind!</h1>

</div>

</body>

</html>

3.​

Common Tailwind Utilities

Typography Utilities:​
​
html​
CopyEdit​
<h1 class="text-3xl font-bold">Title</h1>

<p class="text-gray-600">Lorem ipsum dolor sit amet.</p>

1.​

Spacing Utilities:​
​
html​
CopyEdit​
<div class="p-4 m-2">Padded and Margined Element</div>

2.​

Flexbox Layout:​
​
html​
CopyEdit​
<div class="flex justify-between">

<div class="p-4 bg-red-500">Item 1</div>

<div class="p-4 bg-blue-500">Item 2</div>

</div>

3.​

Tailwind Responsive Design

Tailwind includes built-in responsive breakpoints for small (sm),

medium (md), large (lg), and extra-large (xl) screens.

Example:

html
CopyEdit

<div class="bg-gray-200 p-2 md:bg-red-200 lg:bg-green-200">

Responsive Element

</div>

The element changes its background color based on the screen size.

Tailwind CSS Customization

Tailwind is highly customizable via its configuration file, allowing

you to extend or override the default styles.

Extend Theme: Add custom colors, spacing, and fonts:​

​
js​
CopyEdit​
module.exports = {

theme: {

extend: {

colors: {

primary: '#3490dc',

},

spacing: {

'72': '18rem',

'84': '21rem',

},

},
 },

};

1.​

Purge Unused CSS: To optimize for production, use Tailwind’s purge

feature to remove unused CSS:​
​
js​
CopyEdit​
module.exports = {

purge: ['./src/**/*.html'],

theme: {},

variants: {},

plugins: [],

};

2.​

Tailwind Plugins

Tailwind has a rich plugin ecosystem that extends the framework’s core
functionality. For example, you can use Tailwind Forms to style form
elements:

bash

CopyEdit

npm install @tailwindcss/forms

js
CopyEdit

// tailwind.config.js

module.exports = {

plugins: [

require('@tailwindcss/forms'),

],

};

This automatically styles your form elements with minimal effort:

html

CopyEdit

<input type="text" class="form-input" />

Tailwind Dark Mode

Tailwind makes it easy to implement dark mode by adding a simple dark

variant to your CSS classes.

Example:

html

CopyEdit

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">

This text will be white on dark mode.

</div>
Conclusion

Bootstrap:

●​ Best for rapid prototyping with pre-built components and an

established design system.​

●​ Perfect for developers looking for a "plug-and-play" approach.​

Tailwind CSS:

●​ Best for developers who prefer to customize everything from

scratch while still having useful utility classes at their
disposal.​

●​ Ideal for those who want full control over their designs.​

Both frameworks can be used for modern, responsive UI development, but

each offers different strengths depending on your project’s needs. If
you want to create a clean, pre-designed UI quickly, use Bootstrap. If
you need flexibility and a utility-first approach, Tailwind CSS is
your go-to.