Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
HTML Colors
Next article icon

HTML and CSS

Last Updated : 22 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

This article aims to provide you with a thorough understanding of how to use HTML and CSS to construct websites or web pages. Here, we present a complete overview to kickstart your journey in learning HTML and CSS.

What is HTML?

HTML, an acronym for HyperText Markup Language, is the standard language for designing web pages. It is a combination of Hypertext, which establishes the links between web pages, and Markup language, which is used to define the structure of web pages within tags. HTML forms the backbone of any webpage, dictating its structure and content.

Example: Let’s see a small example of a simple HTML page that displays the heading and paragraph content.

HTML 
<!DOCTYPE html> <html>  <head>     <title>Simple HTML Page</title> </head>  <body>     <h1>Welcome to GeeksforGeeks</h1>      <p>A computer science portal for geeks</p> </body>  </html>

Output:

Why HTML is used?

  • It is a simple markup language and its implementation is easy.
  • It is used to create a website structure.
  • It helps in developing fundamentals about web programming.

Complete Reference:

  • HTML Tags
  • HTML Attributes
  • HTML Global Attributes
  • HTML Event Attributes
  • HTML Canvas
  • HTML DOM
  • HTML DOM Audio/Video
  • HTML5
  • HTML5 MathML
  • Questions Complete Reference

HTML Interview Questions

  • HTML Interview Questions and Answers - Basic Level
  • HTML Interview Questions and Answers - Intermediate Level
  • HTML Interview Questions and Answers - Advanced Level

HTML Quiz Set

  • Practice Quiz Set 1
  • Practice Quiz Set 2

Recent Articles on HTML


What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason for using CSS is to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

There are three types of CSS which are given below:

  • Inline CSS: In Inline CSS, we add the style to the tags using the "style" attribute inside the tag which we want to design.
  • Internal or Embedded CSS: Internal CSS allows us to style our page by adding the <style> tag inside the <head> tag. Inside the <style> tag, we add the design that we want to give to our page.
  • External CSS: External CSS lets us add style to our HTML page externally. We can add our styles in a different file with extension .css and link this page to our HTML page.

Example:

HTML 
<!DOCTYPE html> <html>   <head>          <!-- Stylesheet of web page -->     <style>         body {             text-align: center;         }           h1 {             color: green;         }     </style> </head>   <body>     <h1>Welcome to GeeksforGeeks</h1>       <p>A computer science portal for geeks</p> </body>   </html>

Output:

Why CSS is used?

CSS is indispensable in modern web development. It elevates the aesthetic appeal and usability of a website, enhancing user interaction. While it is technically possible to create a website without CSS, the lack of styling would result in a dull and unattractive site. Therefore, mastering CSS is a must for anyone interested in web development.

Complete Reference

  • CSS Properties
  • CSS Selectors
  • CSS Functions

CSS Interview Questions and Answers

CSS Quiz Set

  • CSS Quiz Set - 1
  • CSS Quiz Set - 2
  • CSS Quiz Set - 3

Recent Articles on CSS

Some Important Articles on HTML and CSS

  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS?
  • How to add a Login Form to an Image using HTML and CSS ?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?

Next Article
HTML Colors

D
dharmendra_kumar
Improve
Article Tags :
  • Web Technologies
  • HTML
  • CSS

Similar Reads

  • HTML Basics
    HTML (HyperText Markup Language) is the standard markup language for creating and structuring web pages. It defines the structure of a webpage using elements and tags.HTML is responsible for displaying text, images, and other content.It serves as the foundation for building websites and web applicat
    6 min read
  • How to Add CSS
    Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios
    3 min read
  • HTML Headings
    HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate. Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
    4 min read
  • HTML Colors
    HTML Colors can be applied to text, backgrounds, borders, links, forms, tables, etc. This article provides an in-depth look at how colors can be applied to various elements such as text, backgrounds, borders, links, forms, and tables in HTML. We will explore different color formats including hexadec
    11 min read
  • HTML Background Color
    HTML Background Color enables the inclusion of the background color on the web page, which can be accomplished with the help of the background-color property used with HTML elements. It applies to the total size of the element specified, but the margin is not included. The property has the default v
    4 min read
  • CSS Align
    CSS alignment techniques are essential for positioning items and distributing space between content. These techniques include horizontal and vertical alignment using various properties such as margin: auto, position: absolute, text-align, and padding. This article covers multiple methods to achieve
    4 min read
  • Difference between HTML and CSS
    HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for creating web pages. HTML provides the structure, while CSS defines the style and layout. HTML is used along with CSS and Javascript to design web pages. HTML (HyperText Markup Language)HTML is the
    4 min read
  • HTML Examples
    HTML (HyperText Markup Language) is the backbone of the web, forming the structural foundation of every website. Whether you're just starting out or you're an experienced developer in need of a quick refresher, learning through examples is one of the most effective ways to understand HTML in action.
    6 min read
  • CSS History and Versions
    CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML, including various XML languages like SVG and XHTML. CSS defines how elements should be rendered on screens, paper, in speech, or on other media, playing a vital role in web d
    4 min read
  • Primer CSS Right Aligned
    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
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th 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
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
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
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences