27/02/2025, 14:31 Complete CSS Tutorial
CSS(Cascading Style Sheets)
1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation
of web pages written in HTML or XML. CSS defines how elements are displayed, including
layout, colors, fonts, and spacing. It enables developers to create visually appealing websites
with consistent styles across multiple pages.
Features of CSS:
Separation of Content and Design: Allows HTML to focus on structure while CSS
manages styling.
Consistency: Ensures uniform design across all web pages.
Improved Performance: Faster page loading by reducing inline styles and redundancy.
Reusability: Styles can be reused across different web pages, improving maintainability.
2. Why Use CSS?
CSS enhances web development by offering flexibility and efficiency in designing web pages.
Key Benefits:
Separation of Concerns: Keeps HTML for structure and CSS for presentation.
Better Readability & Maintainability: Reduces inline styles, making code easier to
manage.
Device Compatibility: Enables responsive design for mobile, tablet, and desktop.
Faster Load Times: External CSS reduces HTML file size and speeds up rendering.
3. Types of CSS
CSS can be applied in three different ways:
1. Inline CSS
Applied directly within an HTML tag using the style attribute.
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
https://aksharacs.netlify.app/css 1/10
27/02/2025, 14:31 Complete CSS Tutorial
Use case: Quick styling for a single element (not recommended for large-scale projects).
2. Internal CSS
Defined within a <style> block inside the <head> section of an HTML document.
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
Use case: Useful for single-page designs.
3. External CSS
Stored in a separate .css file and linked to the HTML document.
<link rel="stylesheet" href="styles.css">
h1 {
color: blue;
font-size: 24px;
}
Use case: Recommended for large-scale projects to maintain consistency and reusability.
4. CSS Syntax
A CSS rule consists of a selector and a declaration block.
selector {
property: value;
}
Example:
p {
font-size: 16px;
https://aksharacs.netlify.app/css 2/10
27/02/2025, 14:31 Complete CSS Tutorial
color: gray;
}
Components:
Selector: Targets the HTML element (p in this case).
Property: Defines the style (e.g., font-size, color).
Value: Specifies the property’s appearance (e.g., 16px, gray).
5. CSS Selectors
CSS selectors are used to target HTML elements for styling.
Common Selectors:
1. Universal Selector
* {
margin: 0;
padding: 0;
}
Use case: Selects all elements.
2. Element Selector
h1 {
color: green;
}
Use case: Targets specific HTML elements.
3. Class Selector
.highlight {
background-color: yellow;
}
Use case: Targets elements with a specific class.
Example:
https://aksharacs.netlify.app/css 3/10
27/02/2025, 14:31 Complete CSS Tutorial
<p class="highlight">This is highlighted text.</p>
4. ID Selector
#header {
font-size: 24px;
}
Use case: Targets an element with a unique ID.
Example:
<div id="header">Welcome!</div>
5. Group Selector
h1, h2, p {
font-family: Arial, sans-serif;
}
Use case: Applies styles to multiple elements.
6. Descendant Selector
div p {
color: red;
}
Use case: Targets <p> elements inside a <div>.
6. CSS Box Model
The CSS box model represents the structure of elements on a webpage.
Box Model Components:
Content: The actual content inside the element.
Padding: Space around the content.
Border: Surrounds the padding and content.
Margin: Space outside the border.
https://aksharacs.netlify.app/css 4/10
27/02/2025, 14:31 Complete CSS Tutorial
Example:
p {
margin: 10px;
padding: 20px;
border: 2px solid black;
}
7. CSS Positioning
CSS positioning controls the placement of elements on a webpage.
Positioning Types:
Static: Default positioning. Elements are placed according to the normal document flow.
Relative: Positions the element relative to itself, allowing for movement from its normal
position.
Absolute: Positions the element relative to its nearest positioned ancestor (i.e., an
element with position other than static).
Fixed: Positions the element relative to the viewport. It remains fixed on the page even
when scrolling.
Sticky: Toggles between relative and fixed, depending on the scroll position.
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}
8. CSS Flexbox
CSS Flexbox is a layout model for arranging elements efficiently in a container.
Example:
.container {
display: flex;
justify-content: center;
https://aksharacs.netlify.app/css 5/10
27/02/2025, 14:31 Complete CSS Tutorial
align-items: center;
height: 100vh;
}
9. CSS Grid
CSS Grid is a two-dimensional layout system for creating complex designs.
Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
10. Responsive Design
Responsive design ensures that web pages look good on all screen sizes, from mobile devices
to large desktop monitors.
Media Queries:
Media queries allow you to apply different styles depending on the device's characteristics (e.g.,
screen width, resolution).
@media (max-width: 768px) {
body {
background-color: lightblue;
margin: 10px; /* Reduces margin around the page */
padding: 10px; /* Adds some padding to prevent content from touching t
}
}
Units for Responsiveness:
em: Relative to the font size of the parent element. Useful for scalable typography.
rem: Relative to the root (html) element's font size. This allows for consistent scaling
across the entire page.
https://aksharacs.netlify.app/css 6/10
27/02/2025, 14:31 Complete CSS Tutorial
%: Percentage-based values, typically used for widths, heights, and margins. Relative to
the parent element.
vh: Viewport height. 1vh is 1% of the height of the viewport.
vw: Viewport width. 1vw is 1% of the width of the viewport.
11. CSS Frameworks
CSS Frameworks are pre-written collections of CSS styles, components, and tools that help
web developers build websites faster and more consistently. They offer a structure for web
development by providing common design patterns and components, so you don't have to write
all the CSS code from scratch.
Why Use CSS Frameworks?
Faster Development: CSS frameworks come with predefined styles, layouts, and
components (like buttons, grids, navigation bars, etc.). By using them, developers can
speed up the development process since they don’t need to build everything from the
ground up.
Consistency: Frameworks provide consistent styling across the entire website. Since the
same styles are reused, your website will look uniform across all pages.
Cross-Browser Compatibility: Most popular CSS frameworks have been tested and
optimized for various browsers. This means the layout and design are consistent across
multiple web browsers (like Chrome, Firefox, Safari, etc.).
Responsive Design: Many CSS frameworks come with built-in media queries to make
the site responsive, meaning it will look good on desktops, tablets, and mobile devices.
Customizable: Although frameworks come with predefined styles, they are often
customizable, so you can modify them to suit the needs of your specific project.
Popular CSS Frameworks
1. Bootstrap
Overview: Bootstrap is one of the most widely used CSS frameworks. It was originally
developed by Twitter and provides a rich set of design components, such as navigation bars,
buttons, form elements, and more.
Features:
Grid System: Bootstrap offers a flexible grid system that allows you to create complex
layouts using columns and rows.
https://aksharacs.netlify.app/css 7/10
27/02/2025, 14:31 Complete CSS Tutorial
Pre-styled Components: It includes pre-designed components like buttons, forms, alerts,
carousels, and modals, which can be used without writing custom styles.
JavaScript Plugins: Bootstrap also comes with some JavaScript plugins like dropdowns,
modals, tooltips, and popovers that are easy to implement with simple HTML markup.
Responsiveness: Bootstrap includes media queries and CSS classes for responsive
design, so your site adapts automatically to different screen sizes.
Usage:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.
2. Tailwind CSS
Overview: Tailwind CSS is a utility-first CSS framework, which is different from traditional
frameworks like Bootstrap. Instead of providing pre-designed components, Tailwind gives you
utility classes that you can use to build your own custom designs.
Features:
Utility-first: Tailwind encourages using utility classes like bg-blue-500, text-center,
px-4, etc., to style elements directly in the HTML markup. This gives you a lot of flexibility
to create unique designs without overriding predefined styles.
Customizability: Tailwind is highly customizable. You can configure the framework to
your needs by editing the tailwind.config.js file and defining your own breakpoints,
colors, fonts, and more.
Responsive Design: Tailwind includes built-in responsive utilities, so you can easily
design for different screen sizes by using classes like md:text-lg (apply large text on
medium-sized screens).
No Opinionated Design: Unlike Bootstrap, which provides predefined components,
Tailwind does not impose any visual style. This gives you complete freedom to design
your website as you like.
Usage:
https://aksharacs.netlify.app/css 8/10
27/02/2025, 14:31 Complete CSS Tutorial
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.c
3. Foundation
Overview: Foundation is another popular CSS framework created by ZURB. It provides a set of
tools to help create responsive websites and web applications.
Features:
Flexible Grid: Like Bootstrap, Foundation has a flexible grid system, but it also supports
nested grids.
Pre-designed Components: Foundation provides many customizable components like
navigation bars, buttons, forms, and modals.
JavaScript Plugins: It offers many JavaScript plugins for responsive navigation,
carousels, and other dynamic features.
Mobile-first Approach: Foundation is designed with a mobile-first approach, so it works
well on mobile devices by default and adapts to larger screens.
Usage:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/found
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/found
4. Bulma
Overview: Bulma is a lightweight CSS framework that is based on Flexbox, making it easier to
create responsive layouts.
Features:
Flexbox-based: Bulma uses Flexbox to make layouts responsive and easy to control.
Pre-styled Components: It includes components like buttons, cards, navbars, and forms.
Minimalistic: Bulma is relatively simple and doesn’t come with a lot of JavaScript
dependencies, making it a good choice if you want a lightweight framework.
Customizable: Bulma allows you to modify its default settings using variables.
Usage:
https://aksharacs.netlify.app/css 9/10
27/02/2025, 14:31 Complete CSS Tutorial
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="s
Conclusion
CSS frameworks like Bootstrap, Tailwind CSS, Foundation, and Bulma provide pre-written
CSS code, components, and layout systems that make it easier to build websites quickly and
consistently. Depending on your project requirements, you can choose a framework that best
suits your design philosophy:
Bootstrap: Best for quick, standardized designs with pre-styled components.
Tailwind CSS: Best for developers who prefer building custom designs using utility
classes.
Foundation: Ideal for mobile-first responsive websites.
Bulma: Great for lightweight, Flexbox-based designs.
By using a framework, you can reduce development time, ensure cross-browser compatibility,
and create responsive, modern websites with minimal effort.
CSS is a powerful tool for web design. Mastering it enables you to create stunning and
interactive websites. Keep experimenting and practicing!
https://aksharacs.netlify.app/css 10/10
