What are the different types of CSS?

There are three types of CSS styles: internal, external, and inline. - Internal CSS requires you to add the <style tag to the <head section of your HTML document. The CSS rules defined within the <style tag will then be applied to the elements within that specific HTML document. - External CSS allows you to link your web pages to an external .css file, which can be created with any text editor. This type of CSS is a more efficient method, especially for styling a large website. By editing a .css file, you can change your entire site at once. - Inline CSS is used to style a specific HTML element. For this type of CSS styling, you simply add the style attribute to each HTML tag, without using selectors. This type of CSS isn't really recommended, as each HTML tag must be styled individually. Managing your website can be difficult if you only use inline CSS.

CSS

Skill roadmap

Step by step guide to learning CSS in 2026

104 topics

Attribute selectors

Combinator selectors

element

Best Practices

Sass

CSS Variables

Media Queries

Background Color

Background Image

Background Gradient

Background Position

Background Attachment

Position

inline-block

CSS Functions

Performance

Accessibility

Methodologies

Pseudo Elements

Frontend development

CSS Basics

Absolute vs Relative

Inline CSS

Internal CSS

External CSS

Cascading order

Syntax Basics

Pseudo Classes

Flow Layout

Rules

Introduction

Reponsiveness

Z-Index / Stacking Context

Color

Text Alignment

Text Decoration

Text Transform

Opacity

Text Spacing

Line Height

Text Shadows

Layouts

Find the detailed version of this roadmap along with other similar roadmaps

Related Roadmaps

roadmap.sh

CSS

HTML

CSS

JavaScript

Properties & Values

Selector

Declaration

Comments

Simple selectors

Fonts

descendant

child

Font families

class

Next Sibling

Font Style

universal

grouping

Subsequent Sibling

Font Size

Font Weight

Direction

Font Shorthand

Text Styling

Google Fonts

Font Variant

Background

Colors

rgb

hsl

hex

Box Model

Named Colors

Padding

Margin

rgba, hsla

Relative

Absolute

Width / Height

Sticky

Fixed

Static

inline

block

Border

Outline

Box Shadows

Display

CSS Units

none

visibility

CSS Specificity

Units with functions

Tables

Lists

Images and Filters

Floating Elements

Multicolumn layout

Transforms

Flexbox

Keyframe Animations

Grid

Transitions

Animations

Layouting Techniques

Container Queries

Responsive typography

Continue Learning with following relevant tracks

PostCSS

BEM

Frontend

HTML

JavaScript

CSS Modules

CSS-in-JS

React Flow

CSS is the programming language we use to create great-looking websites. It stands for Cascading Style Sheets. CSS is used to describe how HTML (or XML) elements are displayed on the screen. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.

What is the role of CSS in frontend development?

Front-end development refers to the process of creating the parts of a website or application that users see and interact with directly. Front-end developers use a combination of programming languages, tools, and technologies to build user interfaces and user experiences, namely HTML, CSS, and JavaScript.

HTML** **is used to structure the content and create the basic building blocks of a webpage.
CSS** **styles the visual presentation of HTML content, including colours, fonts, layouts, and responsive design for different screen sizes.
JavaScript is** **used to add interactivity, dynamic behaviour, and client-side functionality to web pages, such as form validation, animations, and real-time updates.

Frequently asked questions

Related roadmaps

Frontendrole HTMLskill JavaScriptskill Full Stackrole

All roadmaps

What is the role of CSS in frontend development?

HTML** **is used to structure the content and create the basic building blocks of a webpage.

CSS** **styles the visual presentation of HTML content, including colours, fonts, layouts, and responsive design for different screen sizes.

JavaScript is** **used to add interactivity, dynamic behaviour, and client-side functionality to web pages, such as form validation, animations, and real-time updates.