CSS Full Course - With Explanations & Examples
CSS stands for Cascading Style Sheets. It is a language used to describe the style of an HTML document. CSS controls how HTML elements appear on screen, including layout, colors, fonts, spacing, and responsiveness. It separates content from design, making websites easier to maintain and customize. CSS can be written inline (within HTML tags), internally (in a <style> block), or externally (via a .css file).
Introduction to CSS
CSS follows a specific structure: a selector followed by a declaration block. Each declaration contains a property and a value, ending with a semicolon. For example:
p {
color: red;
font-size: 16px;
}
CSS (Cascading Style Sheets) is used to control the presentation and layout of web pages. It allows developers to apply styles such as colors, fonts, spacing, and positioning to HTML elements. In the example above, the selector p targets all paragraph elements, and the declarations inside the curly braces specify the text color and font size. This separation of content (HTML) and design (CSS) makes websites easier to manage and maintain.
Types of CSS
There are three main types of CSS:
- Inline CSS - Applied directly to an HTML tag using the style attribute.
- Internal CSS - Written inside a <style> tag in the HTML <head>.
- External CSS - Written in a separate .css file and linked using <link>.
CSS can be applied to HTML documents in three different ways. Inline CSS is used for applying styles directly within an element using the style attribute, which is useful for quick fixes or individual changes. Internal CSS is defined within a <style> tag in the <head> section of the HTML file, allowing styling for a single page. External CSS is written in a separate stylesheet file (with a .css extension) and linked to the HTML using the <link> tag, promoting cleaner code and reusability across multiple pages.
CSS Selectors
Selectors are used to target HTML elements for styling. Some common types include:
- Element Selector: h1 {} targets all <h1> elements.
- Class Selector: .btn {} targets elements with class="btn".
- ID Selector: #header {} targets an element with id="header".
- Group Selector: h1, p {} targets both <h1> and <p> elements.
- Universal Selector: * {} targets all elements.
CSS selectors allow you to apply styles to specific elements or groups of elements on a web page. By using different types of selectors, such as element, class, ID, and universal selectors, developers can precisely control the appearance of content. For instance, class and ID selectors are ideal for targeting individual or grouped elements, while group selectors and the universal selector help apply consistent styles across multiple elements efficiently. Understanding how to use selectors effectively is essential for writing clean and organized CSS code.
Colors and Text Styling
CSS allows you to control colors using names (red), hex codes (#ff0000), RGB (rgb(255, 0, 0)), or HSL. You can style text using properties like:
- color: Sets text color.
- font-family: Changes the font.
- font-size: Adjusts size.
- font-weight: Defines thickness (bold, normal).
- text-align: Aligns text left, center, or right.
- text-decoration: Adds underline, overline, etc.
Example:
h2 {
color: blue;
font-family: Arial;
text-align: center;
}
Styling text and colors is a fundamental part of web design. CSS provides various methods to apply colors and format text to enhance readability and aesthetic appeal. Using properties like color, font-family, and text-align, you can make your webpage visually engaging. Understanding how to use different color formats—like named colors, hex codes, RGB, and HSL—gives you flexibility in design. These properties help emphasize content, improve user experience, and establish a visual hierarchy.
CSS Box Model
The box model is the foundation of layout in CSS. Every HTML element is considered a box with the following layers (from inside out):
- Content - The actual content (like text).
- Padding - Space around content.
- Border - Surrounds the padding.
- Margin - Space outside the border.
The CSS Box Model describes how elements are visually structured and how they interact with each other in a layout. Understanding this model is crucial for accurately spacing and aligning elements on a webpage. Each box consists of content at the core, surrounded by optional padding, borders, and margins. Mastering the box model helps you control spacing, prevent overlapping, and build responsive designs more efficiently.
Backgrounds and Borders
CSS allows you to add backgrounds and borders to elements. You can apply:
- Background Color: background-color: lightblue;
- Background Image: background-image: url('bg.jpg');
- Background Size: cover, contain, or exact values.
- Border: border: 1px solid black;
Backgrounds and borders help define the visual appearance of elements, making your web pages more engaging and organized. You can use solid colors or images as backgrounds, control how those images are displayed, and wrap elements with customized borders to emphasize sections or content blocks. These properties work together to improve both aesthetics and usability.
Positioning and Layout
CSS provides powerful layout controls using properties like:
- position: Defines how an element is placed (static, relative, absolute, fixed, sticky).
- top, left, right, bottom: Offset values for positioning.
- z-index: Sets stacking order.
- float: Allows elements to align left or right.
- clear: Prevents elements from wrapping around floats.
- display: Controls how elements are displayed (block, inline, none).
CSS positioning and layout techniques help structure your web page content effectively. By using properties like position, float, and display, you can control where elements appear and how they interact with one another. These tools are essential for creating responsive, well-organized, and visually appealing layouts across different screen sizes.
Display and Visibility
The display property defines how an element behaves in the document flow:
- block: Starts on a new line and takes full width.
- inline: Flows with text and only takes as much space as needed.
- inline-block: Like inline, but allows setting width and height.
- none: Hides the element entirely.
Understanding how elements are displayed on the page is crucial for layout and design. The display property determines how an element appears in the document flow, whether as a block-level container, inline element, or hidden from view entirely. Proper use of display settings allows you to create flexible and responsive designs tailored to your content structure.
CSS Flexbox
Flexbox is a modern layout system in CSS that makes it easier to align and distribute space among items.
- display: flex; activates flexbox on a container.
- justify-content: Aligns items horizontally.
- align-items: Aligns items vertically.
- flex-direction: Sets direction (row or column).
- gap: Sets spacing between flex items.
Example:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
CSS Flexbox provides a more efficient way to lay out, align, and distribute space among elements in a container—even when their size is unknown or dynamic. It helps solve common layout issues like centering content both horizontally and vertically or distributing items evenly across a row or column. By using properties like justify-content and align-items, developers can create flexible and responsive designs with ease.
CSS Grid
CSS Grid is another powerful layout method, perfect for creating complex two-dimensional layouts.
- display: grid; enables grid layout.
- grid-template-columns: Defines column structure.
- grid-template-rows: Defines rows.
- grid-gap: Adds spacing between cells.
- grid-column, grid-row: Controls placement of items.
Example:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
CSS Grid Layout is ideal for building complex web page layouts with rows and columns. Unlike Flexbox, which works in one dimension at a time, Grid allows you to manage both rows and columns simultaneously. You can define fixed or responsive tracks using grid-template-columns and grid-template-rows, and easily place items anywhere using grid-column and grid-row.
CSS Transitions and Animations
CSS allows smooth changes with transitions and complex movement using animations.
Transitions example:
button {
transition: background-color 0.3s ease;
}
Animations example:
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
You can apply it with:
.box {
animation: slide 2s infinite;
}
Transitions let you smoothly change CSS properties over time when an event (like hover) occurs. You only need to define the property and duration. Animations, on the other hand, allow you to define complex multi-step keyframes that run automatically or on trigger. With @keyframes, you can control how elements move, fade, rotate, or transform over a period. Combine them for interactive, dynamic effects.
Responsive Design and Media Queries
Media queries help make websites responsive (fit all screen sizes). You can apply different styles for different screen widths:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Responsive design ensures that your website looks good on all devices—desktops, tablets, and smartphones. Media queries allow you to apply specific styles depending on the screen’s width, height, orientation, or resolution. By adjusting layout, font sizes, or element visibility, media queries help deliver a user-friendly experience across devices.
Advanced Concepts
- Custom Properties (CSS Variables): --main-color: blue;
- Calc() Function: width: calc(100% - 50px);
- Clamp(): Responsive sizing between min and max.
- Pseudo-elements: ::before, ::after allow you to insert content.
- Pseudo-classes: :hover, :first-child, :nth-child(n) for dynamic styling.
As you progress with CSS, you'll encounter advanced features that offer greater control and flexibility. CSS variables (custom properties) help you reuse values throughout your stylesheet. Functions like calc() and clamp() allow for dynamic sizing and responsiveness. Pseudo-elements and pseudo-classes let you style parts of elements or apply effects based on their state or position, enabling more interactive and efficient designs.
Debugging CSS
When something doesn't work:
- Use browser dev tools (right-click > Inspect).
- Check for typos or incorrect selectors.
- Ensure external CSS files are properly linked.
- Look for specificity conflicts (inline styles override external).
Debugging CSS involves identifying and fixing styling issues in your webpage. Modern browsers offer developer tools that let you inspect and live-edit your CSS, helping you understand how styles are applied. Common problems include typos, misused selectors, missing file links, or conflicts in specificity. Being methodical and testing changes step by step can help you quickly resolve layout or style bugs.
Click here for online CSS Code reader.
Click here to download VS CODE.
Click to go back Home.