The Wayback Machine - https://web.archive.org/web/20240907004829/https://www.geeksforgeeks.org/css-tutorial/
Open In App

CSS Tutorial

Last Updated : 01 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

CSS, or Cascading Style Sheets, is the language used to style and enhance HTML documents. It defines the presentation of HTML elements on a web page, enabling changes to fonts, colors, sizes, spacing, column layouts, and animations.

In this CSS tutorial, we will cover both basic and advanced concepts, including CSS properties, selectors, functions, media queries, and more.

CSS-Tutorial-copy

What is CSS?

CSS, or Cascading Style Sheets, is a language used to style and enhance websites. It controls how HTML elements—such as text, images, and buttons—are displayed on a webpage. With CSS, you can adjust font sizes and colors, add backgrounds, and manage the layout, transforming a basic webpage into a visually appealing and user-friendly experience. CSS also simplifies layout management across multiple web pages by using external stylesheets stored in CSS files.

Different Ways to Use CSS

CSS has three ways to style the HTML:

  • Inline: Add styles directly to HTML elements using the style attribute (limited use).
  • Internal: Place styles within a <style> tag inside the HTML file, usually within the <head> section
  • External: Create a separate CSS file with a .css extension and link it to your HTML file using the <link> tag.

Table of Content

Basic CSS Example

In this example, we will use all of them with different properties.

HTML 
<!-- File name: index.html -->
<!DOCTYPE html>
<html>

<head>
    <!-- Importing External CSS -->
    <link rel="stylesheet" href="style.css" /> 
    <!-- Using Internal CSS -->
    <style>
        h2 {
        color: green;
        }
    </style>
</head>

<body>
    <!-- Using Inline CSS -->
    <h2 style="text-align: center;">Welcome To GFG</h2>
    <p>CSS Tutorial - GeeksforGeeks</p>
</body>

</html>
CSS 
/* External CSS */
/* File name: style.css */
p {
  text-align: center;
}

Output: 

CSS Output

CSS Example Output

Also Check: Recent Articles on CSS

CSS Tutorial

Introduction to Modern CSS

CSS Fundamentals

Understanding CSS basics is necessary whether you’re an experienced developer or just starting your web journey. Let’s explore some key CSS concepts.

CSS Styling Techniques

CSS describes how HTML elements should be presented on the web page. It provides colors, positions to the HTML elements, etc., create animations, and amplify your web page.

CSS Responsive Design and Media Queries

While developing a site, it has to be mobile-friendly and responsive. Here, we discuss all the concepts that help you make your website responsive.

Advanced CSS Topics

Let’s Move further with the Advanced CSS. Learn advanced styling techniques and master your modern web design and development skills in 2024.

CSS Online Quizzes

To achieve a solid understanding of CSS, it’s essential to engage with CSS quizzes and MCQs. These CSS quizzes can enhance your ability to solve similar questions and improve your problem-solving skills.

Here are some quiz articles related to CSS 3:

CSS Practical Projects

Getting only the theoretical knowledge will be of no use unless and until you don’t work on some real-time projects. Working on such HTML & CSS projects will test your CSS knowledge and you will get some hands-on experience.

CSS Interview Preparation

  1. Don’t miss our CSS Interview Questions and Answers before going for your interview.
  2. CSS CheastSheet for Beginners (2024) – A Basic Guide to CSS

CSS Preprocessors

CSS Preprocessors introduce features like variables, nesting, and mixins to enhance the functionality, maintainability, and organization of stylesheets. Some popular preprocessors are:

CSS Frameworks

CSS frameworks are pre-prepared libraries of CSS code and sometimes JavaScript, designed to simplify and expedite the process of web development.

These CSS frameworks provide a set of standardized, reusable components and a predefined structure, allowing developers to create responsive and aesthetically pleasing websites with reduced effort.

CSS Frameworks

Other Resources

CSS Versions

  • CSS1: The foundation, released in 1996, introduced basic styling capabilities for fonts, colors, and margins.
  • CSS2: Expanded in 1998, adding positioning elements, pseudo-classes, and improved layout options.
  • CSS 2.1: Further refinements in 2004, including improvements to inheritance and box model properties.
  • CSS3: Introduced from 2001 onwards, CSS3 isn’t a single version but a collection of modules adding features like animations, media queries, and web fonts. It’s constantly evolving.

Recent developments focus on variables (custom properties), enhanced grid and flexbox layouts, subgrid, aspect-ratio property, and color manipulation functions.

Why learn CSS?

1. Enhance Visual Appeal: CSS allows you to style your web pages, making them visually appealing and engaging. Here’s why it matters:

  • User Experience (UX): Well-designed websites attract and retain users. CSS enables you to create beautiful layouts, choose fonts, and apply colors that resonate with your audience.

2. Responsive Design: In today’s mobile-first world, responsive design is crucial. CSS empowers you to:

  • Media Queries: Adapt your layout based on screen size (desktop, tablet, mobile).
  • Flexbox and Grid: Create flexible, adaptive designs that look great on any device.

3. SEO Benefits: CSS indirectly impacts your site’s SEO. Here’s how:

  • Page Load Speed: Well-organized CSS files load faster, improving user experience. Google considers page speed as a ranking factor.
  • Structured Content: Properly styled HTML (thanks to CSS) enhances readability for search engines and users.
  • Mobile Friendliness: Responsive CSS ensures your site performs well on mobile devices, positively affecting rankings.

4. Efficient Maintenance: CSS promotes clean code and separation of concerns:

  • Modularity: Separate CSS files allow easy updates without affecting other parts of your site.
  • Consistency: Apply styles consistently across your site using classes and IDs.

5. Career Opportunities: Learning CSS opens doors to various roles:

  • Front-End Developer: Mastering CSS is essential for front-end development.
  • Web Designer: CSS skills are fundamental for creating stunning web layouts.
  • Full-Stack Developer: Understanding CSS complements back-end skills.

Advanced CSS Features

As you conquer the basics, explore these powerful features to elevate your web design:

  • Media Queries: Tailor website layouts for different screen sizes, ensuring optimal viewing experiences across devices.
  • CSS Grid and Flexbox: Revolutionize website layouts with these frameworks for creating complex and responsive designs.
  • CSS Animations and Transitions: Add interactivity and visual flair to your webpages with smooth animations and transitions.

CSS – Frequently Asked Questions

What is the Full Form of CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation and formatting of a document written in HTML or XML.

What are the types of CSS?

There are three types of CSS which are given below:

  • Inline CSS: Inline CSS contains the CSS property in the body section attached to the element.
  • Internal or Embedded CSS: The CSS ruleset should be within the HTML file in the head section i.e. the CSS is embedded within the HTML file.
  • External CSS: External CSS contains a separate CSS file that contains only style properties with the help of tag attributes.

Use the <link> element within the <head> section of your HTML document. Example: <link rel=”stylesheet” type=”text/css” href=”styles.css”>

What is the purpose of the ‘box model’ in CSS?

The box model is a fundamental concept in CSS that describes the layout of elements. It consists of content, padding, border, and margin, which collectively determine the size and spacing of an element.

How can I center an element horizontally and vertically in CSS?

To center horizontally, use margin: auto; on the element. For vertical centering, consider using Flexbox (display: flex; align-items: center; justify-content: center;) or Grid (display: grid; place-items: center;).

What is the difference between ‘margin’ and ‘padding’ in CSS?

Margin is the space outside an element, creating space between the element and its surrounding elements. Padding is the space inside an element, creating space between the element’s content and its border.

How do media queries contribute to responsive design in CSS?

Media queries allow developers to apply styles based on characteristics such as screen width, height, or device orientation. They are crucial for creating responsive designs that adapt to different devices and screen sizes.



https://media.geeksforgeeks.org/auth/avatar.png
GeeksforGeeks
News
Improve
Next Article
CSS Introduction

Similar Reads

Difference between bootstrap.css and bootstrap-theme.css
Bootstrap is an HTML, CSS and JS front-end-framework used for developing responsive and mobile-first projects on the web. It is the framework that comes up with predefined terms, thus giving you the ability to use these codes instead of having to create the codes from scratch. It is a collection of HTML, CSS and JS code that is designed to help bui
5 min read
Difference between CSS Grid and CSS Flexbox
Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows. To get started you have to define a container element as a grid with display: grid, set the column an
4 min read
Which CSS framework is better Tailwind CSS or Bootstrap ?
In this article, we will see which CSS framework is better tailwind CSS or bootstrap. Both are widely used CSS frameworks for styling the front end. We will understand each one of them in detail. Both frameworks have their own pros and cons so it depends upon the type of application you are going to build and accordingly you can choose the best fra
5 min read
CSS Cheat Sheet - A Basic Guide to CSS
What is CSS? CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media. What is a CSS Cheat Sheet? CSS Cheat Sheet provides you wi
13 min read
How to identify unused CSS definitions from multiple CSS files in a project ?
In this article, we will learn how to identify unused CSS definitions from multiple CSS files in a project. What are unused CSS definitions? Unused CSS definitions are the stylesheets that are completely useless for rendering and loading the page. If you remove these unused CSS definitions then nothing will happen to your webpage. Why you should re
2 min read
Create a CSS Fireflies background using HTML/CSS
In this article, we will see how to create the CSS Fireflies background using HTML &amp; CSS, along with understanding its implementation through the illustration. The CSS fireflies effect can be created by utilizing the CSS animation and we will implement 3 animations to achieve the fireflies effect. To create randomness, we used different animati
7 min read
Using Primer CSS - A Simple and Transparent CSS Library for Web Development
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS helps you to control the layout and appearance of web pages. In this article, we will discuss the concept of Primer CSS, a CSS library that provides a simple and easy-to-use set of styles for web development. Obvious an
3 min read
How to Add a @tailwind CSS Rule for CSS Checker ?
Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. In this article, we will ex
4 min read
CSS pseudo elements every CSS developer should know
CSS pseudo-elements are used to add special effects/styles to a specific part of the selected elements. A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to its id, class, type, attribute etc. For example, the ::before and ::after pseudo-elements can be used to insert content before or aft
5 min read
CSS Complete Guide - A to Z CSS Concepts
What is CSS ? CSS stands for "Cascading Style Sheet". It is used to style HTML Documents. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more. What is CSS Complete Guide ? CSS Complete Guide is a list of A to Z CSS concepts from beginner to advanced l
5 min read
Styling React Components: CSS vs CSS-in-JS
When it comes to styling React components, developers often face the dilemma of choosing between traditional CSS and CSS-in-JS solutions. Both approaches offer unique advantages and drawbacks, influencing how developers design and maintain their application's user interface. In this article, we delve into the differences between CSS and CSS-in-JS,
5 min read
How to use CSS Animations with Tailwind CSS ?
Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility ClassesCSS Animations with Tailwind CSS and JavaScriptT
3 min read
How to override the CSS properties of a class using another CSS class ?
To override CSS properties with another class, use the `!important` directive in CSS, emphasizing a style's importance, overriding others. Applying a new class to an element replaces or modifies styles from its original class, allowing targeted adjustments to appearance, layout, or behavior. Table of Content Using !important propertyUsing specific
3 min read
How to Play and Pause CSS Animations using CSS Custom Properties ?
In this article, we will see how to control CSS animations using custom properties, along with knowing their implementation through examples. CSS Animations are the automatic transitions that can be made on the web page which lets an element change from one style to another. CSS Custom Properties are variables defined by CSS developers that contain
5 min read
How to use CSS in different dimension (CSS-in-JS) ?
CSS is awesome and easy to get started with, but front-end applications have been scaling at a massive and complex rate that doesn't make the current CSS designed for the job. CSS-in-JS is a real deal and in many ways, is very much the best nowadays when it comes to building and styling applications on the web. What is CSS-in-JS: Just as the name i
6 min read
Primer CSS Spacing
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approa
4 min read
CSS Selectors Complete Reference
CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and many more. Example: Below the HTML/CSS code shows the functionality of ::after selector. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; p::after { content: &quot; - Remember this&quot;; background-color: blue; } &lt;/style
4 min read
Foundation CSS Slider
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. T
3 min read
CSS | Percentage Value
It represents by &lt;percentage &gt; takes a number as a parameter. It is used to define the relative size to the parent size. With the help of this, you can adjust all the HTML-CSS elements. In CSS, many properties that take a percentage as parameters such as padding, width, height, margin, and font-size. Syntax: &lt;Percentage&gt; It takes a numb
2 min read
How to change cursor color using CSS ?
In this article, we will see how to change the cursor color in the input fields using CSS. To change the cursor color, we will use caret-color property. This property is used to set the color of the cursor for input fields, textarea, or other editable areas. Syntax: caret-color: auto|color; Parameters: auto: It has a default value. It uses the curr
2 min read
Onsen UI CSS Component Material Tabbar (Icon and Label)
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to create adaptive and attractive user interface layouts rapidly. Onsen UI CSS Component Material Tabbar (Icon and
3 min read
What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch
2 min read
Primer CSS Flexbox Align Items
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Align Items used to align items on the cross axis. The cross axis al
3 min read
Primer CSS Grow x Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
How to hide an element when printing a web page using CSS?
The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt;
1 min read
Primer CSS Progress with multiple values
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
How to specify the width of the border image using CSS?
In this article, we will set the width of the border image using CSS. To set the width of the border image, we use CSS border-image-width property. The border-image-width property is used to set the width of the border-image. It can be set by providing multiple values. If only one value is provided, it is applied to all four sides.When two values a
2 min read
How to prevent parents of floated elements from collapsing in CSS?
It is known that HTML elements like div, paragraphs, texts, etc. grow to fit the content of their child. But if the child of those elements is floated either to the right or left then the parents may collapse. That is, they will lose their actual behavior. Let's understand this with an example: Consider the below code. In the below program, a paren
4 min read
CSS Pagination
Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition EffectBordered PaginationRounded Border PaginationCenter
7 min read
CSS | border-inline-start-style Property
The border-inline-start-style property is an inbuilt property in CSS it is used to define the individual logical inline-end border property values in a single place in the style sheet. This property sets the border-style at the left of the defining element border. Syntax: border-inline-start-style: border-style; Property values: border-style: This
1 min read
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox