CSS Notes
CSS Notes
Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is a language designed to describe the presentation of HTML or
XML documents. It handles how elements are displayed—controlling layout, colors, fonts, and
overall visual appearance. Unlike HTML, which structures content, CSS focuses solely on
presentation.
CSS was first proposed in 1994 and became a W3C Recommendation in 1996. Since then, it has
evolved through various levels (CSS1, CSS2, and now CSS3 and beyond) to include modules
like animations, grids, and transitions. Each iteration has added features that simplify responsive
design and enhance visual effects on the web.
CSS works by linking or embedding style rules with HTML elements. Styles can be applied
inline, embedded within the <head> of your HTML document, or linked externally through a .css
file. The browser reads these rules and applies them in a cascade—hence the name “Cascading
Style Sheets”—which means styles are applied in a specific order of importance.
selector {
property: value;
}
p {
color: blue;
}
The “selector” targets an HTML element, and the block inside the curly braces lists style
declarations (property/value pairs).
Inline CSS: Styles applied directly on an element via the style attribute.
Internal CSS: Styles written within a <style> tag in the HTML document’s <head>.
External CSS: Styles placed in an external .css file and linked to the HTML document
using a <link> tag.
2. Basic CSS Selectors and Properties
Element, Class, and ID Selectors
Element Selector: Targets HTML tags directly (e.g., h1 { font-size: 2em; }).
Class Selector: Uses a dot (.) preceding the class name to style multiple elements
sharing the same class (e.g., .menu { background: #333; }).
ID Selector: Uses a hash (#) to target a unique element on the page (e.g., #header {
margin-bottom: 20px; }).
Attribute Selectors
Attribute selectors target elements based on attributes or attribute values. For example:
input[type="text"] {
border: 1px solid #ccc;
}
The box model is a fundamental concept that determines how elements are sized and spaced:
Display Property
Positioning Elements
float allows elements to wrap text and other inline elements. Clearing floats (clear: both;)
ensures that elements do not wrap around floated elements.
Flexbox Basics
Flexbox is a layout module that provides an efficient way to align and distribute space among
items in a container:
Text Properties
Web Fonts
Incorporate custom fonts via services like Google Fonts by linking them in your HTML and
applying them in CSS. For example:
Then, in CSS:
body {
font-family: 'Roboto', sans-serif;
}
CSS Gradients
Linear Gradients:
background: linear-gradient(to right, red, yellow);
Radial Gradients:
background: radial-gradient(circle, red, yellow);
Descendant Selector: Selects all elements within a parent, e.g., div p selects all <p>
elements within <div>s.
Child Selector: Selects direct children only, e.g., ul > li selects only immediate <li>
children of <ul>.
Pseudo-Classes
Pseudo-Elements
7. CSS Flexbox
Introduction to Flexbox
Flexbox provides a modern, efficient method for layout. It solves many common alignment
issues in web design.
flex-grow: Determines how much an item will grow relative to the rest.
flex-shrink: Specifies how items shrink if needed.
flex-basis: The initial main size of a flex item before free space is distributed.
align-self: Allows overriding the container’s alignment for individual items.
Alignment
Real-world Examples
Create navigation bars, grids, or centered content easily with Flexbox. For example, centering an
item both vertically and horizontally:
.container {
display: flex;
justify-content: center;
align-items: center;
}
8. CSS Grid Layout
Introduction to CSS Grid
CSS Grid Layout is a powerful two-dimensional system that lets you create complex and
responsive layouts. It works by dividing the page into rows and columns.
Grid Auto-Placement
The browser automatically places grid items if you do not specify their exact location, making it
easier to create responsive layouts with minimal code.
Responsive Web Design ensures your website adapts to various screen sizes and devices. It
emphasizes flexibility and accessibility.
Breakpoints define when your layout should change to accommodate different screen sizes.
Mobile-First Design
Design for the smallest screen first, then progressively enhance the design for larger screens.
This strategy improves performance and user experience on mobile devices.
Utilize relative units like percentages, ems, and rems for widths and spacing. CSS Flexbox and
Grid further support responsive layouts.
CSS transitions allow smooth changes from one style to another. You can set:
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: #333;
}
Animations
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease-in-out;
}
Transformations
.transform {
transform: rotate(45deg) scale(1.2);
}
CSS preprocessors add features that don’t exist in pure CSS, such as variables, nesting, and
functions. They help keep code DRY (Don’t Repeat Yourself) and more maintainable.
$primary-color: #3498db;
.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}
Frameworks like Bootstrap, Tailwind CSS, and Foundation provide pre-built components and
responsive grid systems. They accelerate development by offering a consistent base to build
upon.
Using a Framework
Bootstrap: Comes with ready-to-use components like modals, carousels, and navigation
bars.
Tailwind CSS: Provides utility-first classes that you compose to build designs directly in
your markup.
Customizing Frameworks: Most frameworks allow you to override default styles to
match your branding.
CSS variables (custom properties) allow you to store values for reuse across your stylesheet:
:root {
--main-bg-color: #f4f4f4;
}
body {
background-color: var(--main-bg-color);
}
Hybrid Layouts
Combine CSS Grid and Flexbox to manage complex layouts. Use Grid for overall structure and
Flexbox for aligning elements within grid items.
Dark Mode
Implement dark mode using media queries or toggling classes:
Performance Optimization
CSS is critical in PWAs for ensuring smooth transitions, responsive design, and an app-like user
experience. Emphasize performance, minimalistic design, and offline-first styling.
Dynamic style changes via JavaScript can enhance interactivity. Manipulate classes or inline
styles to trigger animations, theme changes, or responsive behavior.
Future of CSS
Upcoming features and modules, such as CSS Houdini and further advancements in container
queries, promise to make CSS even more powerful and flexible in the future.
Learn to apply CSS fundamentals by designing and building a personal portfolio. This project
covers layout, typography, responsive design, and interactivity.
Focus on modern design trends and responsive layouts. Incorporate media queries, Flexbox, and
Grid for an adaptive user experience.
Use transitions, keyframe animations, and transforms to build engaging animated elements
without JavaScript.
Combine all advanced topics to create a full-featured web UI. Integrate preprocessors,
frameworks, and performance optimizations. This capstone project challenges you to build a
professional, scalable design.
Conclusion
This comprehensive guide covers the spectrum of CSS—from basic syntax and selectors to
advanced techniques and modern development practices. By working through each section and
applying the concepts in project-based exercises, you’ll build a solid foundation in CSS and be
well-prepared to tackle real-world web design challenges.