Open In App

CSS Tutorial

Last Updated : 05 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

CSS is a rule-based language that defines the rules to design a particular element or a group of elements on your web page.

This CSS Tutorial is designed for both beginners and experienced professionals. Here, you will learn CSS from basic to advanced concepts, such as properties, selectors, functions, media queries, and more.

What is CSS?

CSS or Cascading Style Sheets is a stylesheet language used to add styles to the HTML document. It describes how HTML elements should be displayed on the web page.

CSS was first proposed by Håkon Wium Lie in 1994 and later developed by Lie and Bert Bos, who published the CSS1 specification in 1996.

  • The reason for using CSS is to simplify the process of making web pages presentable.
  • CSS allows web developers to control the visual appearance of web pages.

CSS Tutorial

Basic CSS Example

CSS has 3 ways to style your HTML:

  • Inline: Add styles directly to HTML elements (limited use).
  • Internal: Put styles inside the HTML file in a <style> tag.
  • External: Create a separate CSS file (.css) and link it to your HTML.

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: 

If you run the code you will see the p tag element is left aligned, it’s because we used an External CSS to make it center align, and that is not linked it will work on the local server.

CSS Output

CSS Example Output

You can explore our categorized CSS Examples based on topics, including properties, selectors, functions, and more.

Also Check: Recent Articles on CSS

CSS Tutorial For Beginners

Prerequisites: Before you get started, you should know Beginner-level HTML. Now, Let’s Start learning CSS!

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 Tools and Resources

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

Why learn CSS?

Styling is an essential property for any website. CSS increases the standards and overall look of the website making it easier for the user to interact with it.

A website can be made without CSS, as styling is a MUST since no user would want to interact with a dull and shabby website. So for knowing Web Development, learning CSS is mandatory.

  • CSS allows you to control the design and layout of web pages, giving you the power to create visually appealing and user-friendly websites.
  • With CSS, you can customize the appearance of web elements, improving the overall user experience by making sites more intuitive and engaging.
  • CSS is supported by all modern web browsers, ensuring that your designs will display consistently.
  • Proficiency in CSS opens up a wide range of career opportunities in web development.

Features of CSS

Here are some key features of CSS:

  • CSS specifies how HTML elements should be displayed on screens.
  • The Major key feature of CSS includes styling rules which are interpreted by the client browser and applied to various elements.
  • Using CSS, you can control the color text, the style of fonts, spacing between elements, how columns are sized, variation in display for different devices and screen size as well as a variety of other effects.

CSS Jobs and Opportunities in 2024

With the continuous expansion of online presence, the demand for web developers proficient in CSS is ever-growing. Many big companies want their website to look good and they are actively looking for web developers with experience in CSS. 

Here are some top companies that hire a web developer.

Company

Average Salary (INR)

Average Salary (USD)

Google ₹12,92,182 per year $153,000 per year
Microsoft ₹11,73,456 per year $148,000 per year
Amazon ₹11,33,123 per year $145,000 per year
Meta (Facebook) ₹10,98,765 per year $142,000 per year
Flipkart ₹10,54,321 per year

Infosys ₹8,76,543 per year $70,000 per year
Wipro ₹8,32,109 per year $68,000 per year
TCS ₹7,98,765 per year $65,000 per year
HCL Technologies ₹7,54,321 per year $62,000 per year
Accenture ₹7,10,876 per year $85,000 per year

Frequently Asked Questions about CSS

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.

How do I link an external CSS file to an HTML document?

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.

 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads