CSS Tutorial

CSS stands for Cascading Style Sheets. It is the language that controls how HTML elements look on a web page: colours, fonts, spacing, size and layout. HTML builds the structure, and CSS…

In this tutorial, we will Type of CSS Inclusion methods in HTML. There are four ways to include style sheets into HTML pages: Inline, Embedded/Internal, External, Imported.

A CSS rule is made of a selector and a declaration block. Part Meaning In the example Selector Which HTML element to style h1 Declaration block Everything inside curly braces { }…

A comment is a note in your CSS code. The browser ignores it. Comments help you to explain your code and to remember why you wrote something. Syntax A CSS comment starts…

CSS Selectors selects HTML elements to apply style rules. Learn CSS Class Selectors | Id Selectors | Element Selector | Group Selector with examples.

Sometimes two CSS rules try to style the same element in different ways. Specificity is the way the browser decides which rule wins. The text is red, because an id selector is…

CSS can set colours for text, backgrounds, borders and more. A colour can be written in five main ways. Colour formats Format Example Notes Name tomato About 140 names like red, blue,…

Many CSS properties, like width, margin and font-size, need a number with a unit. There are two kinds of units: absolute and relative. Absolute unit: px A pixel (px) is a fixed…

The CSS background properties set a colour or an image behind the content of an element. Property Meaning background-color Background colour background-image Background image, with url() or a gradient background-repeat repeat, repeat-x,…

A gradient is a smooth change from one colour to another. In CSS, you create it with a function and use it as a background-image. You do not need an image file….

The border property draws a line around an element. A border needs three things: a width, a style and a colour. Border style Value Look solid A continuous line dashed Dashes dotted…

The border-radius property rounds the corners of an element. A bigger value gives a rounder corner. Different radius for each corner Circle and pill shapes Summary border-radius rounds the corners. One value…

CSS can add shadows to boxes with box-shadow and to text with text-shadow. Shadows give depth to cards, buttons and headings. box-shadow Value Meaning offset-x Move the shadow right (negative = left)…

The width and height properties set the size of the content area of an element. Block elements are as wide as their parent by default, and as tall as their content. Width…

Padding is the space inside an element, between its content and its border. The background colour also fills the padding area. Padding for each side Shorthand Values Meaning padding: 10px; All four…

Margin is the space outside an element, between it and other elements. Margins are always transparent. Margin for each side and the shorthand The shorthand works like padding: one, two, three or…

Every HTML element is a rectangular box. The CSS box model describes the four layers of this box, from inside to outside. Layer Meaning Content The text or image itself. Set by…

An outline is a line drawn outside the border of an element. It looks like a border, but it has important differences. Point Border Outline Takes space in the layout Yes No….

CSS has many properties to control how text looks and where it sits in its box. Property Use color Text colour text-align left, right, center or justify text-decoration none, underline, overline, line-through…

The font properties control the typeface, size and thickness of text. font-family Always write more than one font. If the first font is not on the visitor’s device, the browser tries the…

A link can be in four states, and CSS has a pseudo-class for each of them. Pseudo-class State a:link A normal link that has not been visited a:visited A link the visitor…

CSS can change the bullets and numbers of HTML lists, and even turn a list into a menu. list-style-type Position and image Remove bullets Horizontal menu from a list Summary list-style-type changes…

A plain HTML table has no borders and looks cramped. A few CSS rules make it clean. Borders and spacing border-collapse: collapse joins the borders of neighbour cells. Without it you see…

The display property decides how an element behaves in the layout. Every element has a default display type, and CSS can change it. Value Behaviour block Starts on a new line, takes…

The position property decides how an element is placed. Together with top, right, bottom and left, you can move it from its normal place. Value Meaning static Default. Normal flow. top, left…

When elements overlap, z-index decides which one is on top. An element with a bigger z-index is shown over elements with a smaller one. Rules z-index works only on positioned elements (relative,…

CSS Float and Clear Property Tutorial | CSS Float property is used for positioning on web pages. This is used to float or move HTML element to the right or left side of its container. CSS float property can have left, right, none values. Learn CSS Float and Clear Property with example

When the content is bigger than its box, the extra part is “overflow”. The overflow property decides what happens to it. Value Result visible Default. The extra content shows outside the box…

The opacity property sets how see-through an element is. The value goes from 0 (invisible) to 1 (fully visible). opacity or rgba? opacity makes the whole element transparent, including its text and…

CSS can resize, round, crop and filter images. These are the most useful tricks. Responsive image The image can shrink on small screens, but never grows bigger than its real size. Rounded…

Flexbox is a layout system to arrange items in a row or a column, and to align and space them easily. Make an element a flex container with display: flex, and its…

CSS Grid is a layout system for rows and columns together. Make a container with display: grid, and describe the columns, and the items fall into the cells. The fr unit fr…

A pseudo-class selects an element in a special state or position (one colon). A pseudo-element selects a part of an element (two colons). Common pseudo-classes Selector Selects a:hover An element when the…

CSS variables (custom properties) let you save a value, like a colour, in one place and use it many times. When you change it, it changes everywhere. Define and use a variable…

CSS can change a style smoothly instead of suddenly. A transition animates between two states, and an animation can run many steps without any trigger. Transitions Property Meaning transition-property What to animate,…

A media query applies CSS only when a condition is true, for example when the screen is narrower than 600 pixels. Media queries are the base of responsive design. Syntax The rules…

A quick reference of the most used CSS properties. Click the chapter links to learn each group in detail. Text and fonts Property Use color Text colour font-family, font-size, font-weight Font. See…