CSS
Master styling, layouts, flexbox, grid, animations, and modern responsive design.
Curriculum Syllabus
Explore all 227 lessons in this learning track.
CSS Tutorial(115)
CSS HOME
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1572B6">`
CSS Introduction
CSS is the language we use to style a Web page.
CSS Syntax
A CSS rule consists of a selector and a declaration block:
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
Grouping Selectors
The `universal selector (*)` selects all HTML elements on the page.
CSS How To
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
Add Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
Add Inline Style
An inline style may be used to apply a unique style for a single element.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
CSS Comments
Comments are used to explain the CSS code, and may help when you edit the
CSS Errors
Errors in CSS can lead to unexpected behavior or styles not being applied correctly.
CSS Colors
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
RGB / RGBA
An RGB color value represents RED, GREEN, and BLUE light sources.
HEX / HEXA
A hexadecimal color is specified with: #RRGGBB.
HSL / HSLA
HSL stands for hue, saturation, and lightness.
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
Background Image
The `background-image` property specifies an image to use as the background of an element.
Background Repeat
The `background-repeat` property sets if/how a background image will be
Background Attachment
The `background-attachment` property specifies
Background Shorthand
To shorten the code, it is possible to specify all the background properties in one
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Width
The `border-width` property specifies the width of the four borders.
Border Color
The `border-color` property is used to set the color of the four borders.
Border Sides
From the examples on the previous pages, you have seen that it is possible to specify a
Border Shorthand
Like you saw in the previous page, there are many properties to consider when dealing with borders.
Rounded Borders
The `border-radius` property is used to add rounded borders to an element:
CSS Margins
The CSS margin properties are used to create space around elements,
Margin Collapse
Margin collapse is when two margins collapse into a single margin.
CSS Padding
The CSS padding properties are used to generate space around
Padding box-sizing
The CSS `width` property specifies the width of the element's content area. The
CSS Height / Width
The CSS `height` and `width` properties are used to set the height and width of an element.
Min / Max
The `min-width` and `max-width` properties are used to set the minimum and maximum width of an element.
CSS Box Model
In CSS, the term "box model" is used when talking about web design and layout.
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
Outline Width
The `outline-width` property specifies the width of the outline,
Outline Color
The `outline-color` property is used to set the color of the outline.
Outline Shorthand
The `outline` property is a shorthand property for
Outline Offset
The `outline-offset` property adds
CSS Text
CSS has a lot of properties for styling and formatting text.
Text Alignment
In this chapter you will learn about the following properties:
Text Decoration
The CSS `text-decoration`
Text Decoration Styles
The CSS `text-decoration-style` property
Text Transformation
The CSS `text-transform` property is used to
Text Spacing
CSS has several properties to control text spacing.
Text Shadow
The `text-shadow` property adds shadow to text.
CSS Fonts
Choosing the right font has a huge impact on how the readers experience a website.
Font Web Safe
Web safe fonts are fonts that are universally installed across all browsers and devices.
Font Fallbacks
Below are some commonly used font fallbacks, organized by the 5 generic font families:
Font Style
The CSS `font-style` property
Font Size
The CSS `font-size` property
Font Google
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Font Pairings
Great font pairings are essential to great design!
Font Shorthand
To shorten the code, it is possible to specify all the individual font properties in one
CSS Icons
Icons can easily be added to your HTML page, by using an icon library.
Icons: Bootstrap
To use the Bootstrap glyphicons, add the following line inside the `<head>` section of your HTML page:
Icons: Google
To use the Google icons, add the following line inside the `<head>` section of your HTML page:
CSS Links
HTML links can be styled with many CSS properties, like
Link Buttons
CSS can be used to create HTML link buttons:
CSS Lists
In HTML, there are two main types of lists:
CSS Tables
HTML tables can be greatly improved with CSS:
Table Size
property is used to set the width of a table.
Table Alignment
The CSS `text-align` property is used to set the horizontal alignment
Table Styling
To add some more space between the inner borders and the content in a table, use the
Table Responsive
A responsive table will display a horizontal scrollbar if the screen is too
CSS Display
The `display` property is
Visibility / Hide
When using `display: none;` the element is completely hidden from the document flow
CSS Max-width
The `max-width` property defines the maximum width of an element.
CSS Position
CSS positioning is about controlling the placement of elements within a web page.
Fixed/Absolute Position
An element with `position: fixed;` is positioned relative to the viewport, which means it always
Sticky Position
An element with `position: sticky;` toggles between
CSS Position Offsets
The `top`, `right`, `bottom`, and `left` properties are used to position elements.
CSS Z-index
The `z-index` property specifies the stack order of
CSS Overflow
The CSS `overflow` property controls what
Overflow X and Y
The `overflow-x` and `overflow-y` properties allow you to control overflow behavior independently for horizontal and vertical directions.
CSS Float
The `float` property specifies how an element should float
Clear / Clearfix
The `clear` property specifies what
Float Examples
With the `float` property, it is easy to float boxes of content side by side:
CSS Inline-block
The `display: inline-block`
CSS Align
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element.
Horizontal Align
There are several ways to horizontally center elements in CSS, depending on the type of element.
Vertical Align
Vertical centering in CSS can be achieved using modern layout techniques like Flexbox and Grid, or using positioning with transforms.
CSS Combinators
A combinator is something that defines the relationship between two or more selectors.
CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
CSS Interactive
Interactive pseudo-classes apply styles based on user interaction with elements.
CSS Structural
Structural pseudo-classes select elements based on their position in the document tree.
CSS Pseudo-elements
A CSS pseudo-element is a keyword that can be added to a selector, to style a
CSS Text
Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter.
CSS Content
Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.
CSS Opacity
The `opacity` property specifies the opacity/transparency of an element.
CSS Navigation Bars
A navigation bar is an important component of web design.
Vertical Navbar
In a vertical navigation bar, the navigation links are stacked vertically (on
Horizontal Navbar
In a horizontal navigation bar, the navigation links are stacked horizontally (next
CSS Dropdowns
CSS dropdowns are used to display a list of options or content when a user
Advanced Dropdowns
`<button class="dropbtn">`Left`</button>`
CSS Image Gallery
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page.
CSS Image Sprites
An image sprite is a collection of various small images put into one larger image
CSS Attribute Selectors
CSS attribute selectors are used to select and style HTML elements with
Advanced Attr Selectors
Advanced attribute selectors match elements based on partial attribute values using special operators.
CSS Forms
CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS:
Style Inputs
With CSS, you can style most of the different input types, like text fields,
Input Focus / Icons
By default, some browsers will add a blue outline around the input when it gets
Other Form Elements
By default, a <textarea> can be resized with a "grabber" in the bottom right
CSS Counters
With CSS counters, you can create dynamic numbering of elements (like
Nested Counters
You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one
CSS Units
CSS units are used to define the length and size of several properties.
Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Relative Units
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
CSS Inheritance
CSS inheritance is about what happens if no value is specified for a
CSS Specificity
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
Specificity Hierarchy
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
CSS !important
The `!important` rule is used to give the
CSS Math Functions
CSS math functions allow mathematical expressions to be used as property values.
CSS Optimization
Optimizing CSS makes your website load faster and run more smoothly; which
CSS Accessibility
A website should be designed to ensure good accessibility for all users, including those with disabilities.
CSS Website Layout
A website is often divided into multiple sections, like a top header,
CSS Advanced(59)
CSS Rounded Corners
The CSS `border-radius` property is used to create rounded corners for elements.
CSS Border Images
With the CSS `border-image` property, you can
CSS Backgrounds
CSS allows you to add multiple background images for an element, through the
Background Size
The `background-size` property allows you to specify the size of background images.
Background Origin
The CSS `background-origin` property specifies where the background image is
Background Clip
The CSS `background-clip` property
CSS Colors
CSS supports [140+ color names, RGB values, HEX values, and HSL values](css_colors.asp). In addition,
Color Keywords
CSS has some special predefined color keywords that can be used with properties like `color`,
CSS Gradients
The CSS gradient functions let you display smooth transitions between two or more colors
Radial Gradients
The CSS `radial-gradient()` function creates a radial gradient.
Conic Gradients
The CSS `conic-gradient()` function creates a conic gradient.
CSS Shadows
With CSS you can create shadow effects!
Box Shadow
The CSS `box-shadow` property is used to apply
CSS Text Effects
CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes.
CSS Custom Fonts
The CSS `@font-face` rule allows you to
CSS 2D Transforms
property applies a 2D or 3D transformation to an element. This property allows
Scale
The `scale()` function increases or decreases the size of an element (according to the parameters given for the width and height).
Skew / Matrix
The `skewX()` function skews an element along the X-axis by the given angle.
CSS 3D Transforms
property is also used to apply a 3D transformation to an element.
3D Perspective
To activate a 3D space, the element needs perspective. The perspective defines the distance between the user's viewpoint and the
3D Card Flip
Here we demonstrate how to make a classic 3D object: Flipping a card.
3D Cube
Here we demonstrate how to make another classic 3D object: A rotating cube.
3D Carousel
Here we demonstrate how to make another classic 3D object: A rotating
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
Transition Timing
The `transition-timing-function` property specifies the speed curve of the transition effect.
CSS Animations
CSS allows animation of HTML elements without using JavaScript!
Animation Timing
The `animation-delay` property specifies a delay for the start of an animation.
Animation Properties
This page covers the CSS animation direction, fill mode, and the shorthand property.
CSS Tooltips
A CSS tooltip is used to specify extra information about something when the
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add "empty"
CSS Image Styling
Learn how to style images using CSS.
Image Effects
The `opacity` property specifies the opacity/transparency of an element.
Hover Overlays
Create an overlay effect on hover:
CSS Image Modal
A modal image gives a user the ability to display a larger version of an
CSS Image Centering
With CSS, you can center images with several methods.
CSS Image Filters
The CSS `filter` property is used to add visual effects (like blur and saturation) to elements.
CSS Image Shapes
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
CSS object-fit
The CSS `object-fit` property is used to specify how an <img> or <video> should
CSS object-position
The CSS `object-position` property
CSS Masking
CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.
Masking - Gradients
[CSS gradients](css3_gradients.asp) can also be used as the mask layer image.
Masking - SVG
The SVG `<mask>` element can be used to
CSS Buttons
With CSS, different HTML buttons can be styled in many ways.
Hover Effects
This page covers CSS button hover effects, shadows, disabled states, and width.
Button Groups
This page covers CSS button groups and animated buttons.
CSS Pagination
Learn how to create a responsive pagination using CSS.
Pagination Styles
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
CSS Multiple Columns
The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers:
Multiple Column Rules
This page covers CSS column rules, span, and width properties.
CSS User Interface
In this chapter you will learn about the following CSS user interface properties:
CSS Variables
The `var()` function is used to insert the value of a
Overriding Variables
From the previous page we have learned that global variables can be accessed through the entire document, while
Variables and JavaScript
CSS variables have access to the DOM, which means that you can change them with JavaScript.
Variables in MQ
Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.). You can learn more
CSS @property
The `@property` rule is used to define custom
CSS Box Sizing
property defines how to calculate the width and height of an element: should the
CSS Functions
CSS functions let you perform calculations, insert values dynamically, or apply transformations. They are used inside property values to make styles more fle...
CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a
MQ Examples
Media queries are a popular technique for delivering a tailored style sheet to different devices.
CSS Flexbox(6)
CSS Flexbox
CSS Flexbox is short for the CSS Flexible Box Layout module.
Flex Container
The flex container element can have the following properties:
Flexbox Justify Content
The `justify-content` property
Flexbox Align Items
The `align-items` property
Flex Items
The direct child elements of a flex container automatically becomes flex items.
Flex Responsive
You learned from the [CSS Media Queries](css3_mediaqueries.asp)
CSS Grid(11)
CSS Grid
The Grid Layout Module offers a grid-based layout system, with rows and columns.
Grid Container
A grid container contains one or more grid items arranged in columns and rows.
Grid Tracks
Inside the grid container you define the number and size of the grid columns
Grid Gaps
The space between the rows and columns in a grid container are called *gaps* (or *gutters*).
Grid Align
Inside the grid container you can define the alignment of the grid content
Grid Items
A grid container contains one or more grid items.
Grid Item Named
The CSS `grid-template-areas` is a
Grid Item Align
Grid items can be aligned within their respective grid cells using properties like:
Grid Item Order
The CSS `order` property can be used to
Grid 12-column Layout
A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design.
CSS @supports
The `@supports` rule lets you
CSS Responsive(8)
CSS Responsive
Responsive web design is about creating web pages that look good on all
RWD Viewport
The viewport is the user's visible area of a web page.
RWD Grid View
Many web pages are based on a [grid-view](css_grid.asp), which means that the page is divided into rows and columns.
RWD Media Queries
CSS media queries allow you to apply styles based on the characteristics of a
RWD Images
`<img src="img_chania.jpg" style="max-width:100%;height:auto;">`
RWD Videos
If the `width` property is set to 100%, the video player will be
RWD Frameworks
There are many free CSS Frameworks that offer Responsive Design.
RWD Templates
We have created some responsive templates with the [W3.CSS framework](/w3css/default.asp).
CSS Examples(11)
CSS Templates
We have created some responsive starter templates with CSS.
CSS Examples
[CSS syntax explained](css_syntax.asp)
CSS Editor
With our online CSS editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser.
CSS Snippets
Have you ever seen a cool feature on a website and thought "How do they do that"?
CSS Website
Get Started for Free
CSS Syllabus
The [EA Academy CSS Tutorial](default.asp) is comprehensive and beginner-friendly.
CSS Study Plan
The CSS study plan helps you teach your students CSS step-by-step.
CSS Interview Prep
Try EA Academy' comprehensive Front-End interview preparation feature.
CSS Quiz
You can test your CSS skills with EA Academy' Quiz.
CSS Exercises
Test your CSS skills with exercises from all categories:
CSS Code Challenges
Test your CSS skills with code challenges from all categories:
CSS References(16)
CSS Reference
`<input type="text" id="searchstring" name="search" placeholder="Search.." oninput="filterSearch()">`
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
CSS Combinators
A combinator is a sign that explains the relationship between selectors.
CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
CSS Pseudo-elements
A CSS pseudo-element is used to style specific parts of an element.
CSS At-rules
CSS at-rules are statements that instruct CSS on how to behave. Each at-rule
CSS Functions
CSS functions can be used to calculate values, manipulate strings or colors,
CSS Reference Aural
Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information.
CSS Web Safe Fonts
The following fonts are the best web safe fonts for HTML and CSS:
CSS Animatable
Some CSS properties are *animatable*, meaning that they can be used in animations and transitions.
CSS Units
CSS has several different units for expressing a length.
CSS PX-EM Converter
Set a default font size:
CSS Colors
All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with differ...
CSS Color Values
Colors in CSS can be specified by the following methods:
CSS Default Values
The table below shows the default CSS browser values for all HTML elements.
CSS Browser Support
The table below lists all CSS properties and how each property is supported in the different browsers: