Scribd
Carica
3 visualizzazioni

CSS Tutorial - HC

Programmation web, CSS

Caricato da

mampionona65
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
3 visualizzazioni

CSS Tutorial - HC

Programmation web, CSS

Caricato da

mampionona65
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 13

CSS Tutorial

Last Updated : 01 Jul, 2024

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.

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:

Open In App
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
CSS Tutorial
CSS Fundamentals
CSS Styling Techniques
CSS Responsive Design and Media Queries
Advanced CSS Topics
CSS Online Quizzes
CSS Practical Projects
CSS Interview Preparation
CSS Preprocessors
CSS Frameworks

Basic CSS Example


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

HTML CSS

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


<!DOCTYPE html> ▲
<html>
Open In App
<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>

Output:

CSS Example Output

Also Check: Recent Articles on CSS

CSS Tutorial

Introduction to Modern CSS

Introduction to CSS
Advantages and Disadvantages of CSS

▲
CSS Fundamentals Open In App
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 Syntax
CSS Ruleset
CSS Selectors
CSS Element Selector
CSS Attribute Selector
CSS Id Selector
Class Selector
Universal Selector
Pseudo-Class Selector
Pseudo-Element Selector
CSS Combinators
General Sibling selector (~)
Adjacent Sibling selector (+)
Child selector (>)
Descendant selector (space)
CSS Box model
CSS Layout
Styling Text

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 Fonts
CSS Colors
CSS Backgrounds
CSS Borders
CSS Grid
CSS Flexbox
CSS Images
CSS Lists ▲

CSS Counters Open In App


CSS Columns
CSS Conditional Rules
CSS Logical Properties
CSS Math functions

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.

CSS Media queries


CSS Nesting style rules
CSS Positioning

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 Transforms
CSS Transitions
CSS Animations
CSS Variables
CSS Properties
CSS Functions

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:

Basic CSS Quiz


Intermediate CSS Quiz
Advanced CSS Quiz

CSS Practical Projects ▲

Open In App
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.

Design GeeksforGeeks logo


Meet the Team Page Design
Tribute Page Design
Design a web page
Contact Us Page Design
Create Browsers Window
Design Email Newsletter

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 Preprocessor SASS


CSS Preprocessor LESS
CSS Preprocessors LESS vs SASS

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.

Open In App
Other Resources

CSS Complete Guide – A to Z CSS Concepts


Learn CSS: Free CSS Course

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? ▲

Open In App
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.
Open In App
CSS Grid and Flexbox: Revolutionize website layouts with these frameworks for
creating complexand
CSS Animations andTransitions:
responsive designs.
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.

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?
Open In App
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.

Want to be a Software Developer or a Working Professional looking to enhance your


Software Development Skills? Then, master the concepts of Full-Stack Development.
Our Full Stack Development - React and Node.js Course will help you achieve this
quickly. Learn everything from Front-End to ▲
Back-End Development with hands-on
Projects and real-world examples. This course
Open enables you to build scalable, efficient,
In App
dynamic web applications that stand out. Ready to become an expert in Full-Stack?
Enroll Now and Start Creating the Future!

GeeksforGeeks 23

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…
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…
Open In App
4 min read
CSS Tutorial CSS Exercises CSS Interview Questions CSS Selectors CSS Properties CSS Funct

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 w…
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…
13 min read

How to identify unused CSS definitions from multiple CSS files in a…


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…
2 min read

View More Articles

Article Tags : CSS Web Technologies Tutorials Web-Tech Tutorials

Corporate & Communications Address:-


A-143, 9th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar
Pradesh (201305) | Registered
Address:- K 061, Tower K, Gulshan
Vivante Apartment, Sector 137, Noida,
Gautam Buddh Nagar, Uttar Pradesh,
201305

Open In App
Company
About Us Languages
Python
Legal Java
In Media C++
Contact Us PHP
Advertise with us GoLang
GFG Corporate Solution SQL
Placement Training Program R Language
GeeksforGeeks Community Android Tutorial
Tutorials Archive

DSA Data Science & ML


Data Structures Data Science With Python
Algorithms Data Science For Beginner
DSA for Beginners Machine Learning Tutorial
Basic DSA Problems ML Maths
DSA Roadmap Data Visualisation Tutorial
Top 100 DSA Interview Problems Pandas Tutorial
DSA Roadmap by Sandeep Jain NumPy Tutorial
All Cheat Sheets NLP Tutorial
Deep Learning Tutorial

Web Technologies Python Tutorial


HTML Python Programming Examples
CSS Python Projects
JavaScript Python Tkinter
TypeScript Web Scraping
ReactJS OpenCV Tutorial
NextJS Python Interview Question
Bootstrap Django
Web Design

Computer Science DevOps


Operating Systems Git
Computer Network Linux
Database Management System AWS
Software Engineering Docker
Digital Logic Design Kubernetes
Engineering Maths Azure
Software Development GCP
Software Testing DevOps Roadmap

System Design Inteview Preparation


High Level Design Competitive Programming
Low Level Design Top DS or Algo for CP
UML Diagrams ▲ Company-Wise Recruitment Process
Interview Guide Company-Wise Preparation
Open In App

Potrebbero piacerti anche