Loading lesson path
CSS
Selectors, the cascade, layout basics, spacing, typography, and the core styling model.
CSS Tutorial
CSS Introduction
CSS Syntax A CSS rule consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by s…
CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id,…
How to Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are three ways of inserting a style sheet: External CSS - li…
How To Add Inline CSS
Multiple Style Sheets If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. Assume that an external st…
CSS Comments Comments are used to explain the CSS code, and may help when you edit the source code at a later date. Comments are also used to temporarily disable sections of CSS code within a stylesh…
CSS Errors Errors in CSS can lead to unexpected behavior or styles not being applied correctly. This page shows common CSS mistakes, and how to avoid them. Missing Semicolons Forgetting a semicolon a…
CSS Colors In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value. CSS Color Names In CSS, a color can be specified by using a predefined color name:…
RGB Value An RGB color value represents RED, GREEN, and BLUE light sources. In CSS, a color can be specified as an RGB value, using this formula: rgb( red, green, blue ) Each parameter (red, green, a…
HEX Value A hexadecimal color is specified with: #RRGGBB. In CSS, a color can be specified using a hexadecimal value in the form: # rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal val…
HSL Value HSL stands for hue, saturation, and lightness. In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl( hue, saturation, lightness ) Hue is a degree on…
CSS Backgrounds
CSS Background Image Repeat
CSS background - Shorthand property To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property. Instead of writing: body…
CSS Borders The CSS border properties allow you to specify the style, width, and color of an element's border. I have borders on all sides. I have a red, bottom border. I have rounded borders. I have…
CSS Border Width The border-width property specifies the width of the four borders. The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: t…
CSS Border Color The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red" HEX - specify a HEX value, like "#ff0000" RGB…
CSS Border - Shorthand Property Like you saw in the previous page, there are many properties to consider when dealing with borders. To shorten the code, it is also possible to specify all the individ…
CSS Margins
CSS Margin Collapse Margin collapse is when two margins collapse into a single margin. Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of…
CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties fo…
Padding and Element Width The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element ( the box mode…
CSS Height and Width The CSS height and width properties are used to set the height and width of an element. This element has a height of 70 pixels and a width of 100%. CSS Set height and width The h…
CSS Min/Max Height and Width The min-width and max-width properties are used to set the minimum and maximum width of an element. The min-height and max-height properties are used to set the minimum a…
The CSS Box Model In CSS, the term "box model" is used when talking about web design and layout. The CSS box model is essentially a box that wraps around every HTML element. Every box consists of fou…
CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". This element has a black border and a green outline with a width of 5px. Note: Ou…
CSS Outline Width The outline-width property specifies the width of the outline, and can have one of the following values: thin (typically 1px) medium (typically 3px) thick (typically 5px) A specific…
CSS Outline Color The outline-color property is used to set the color of the outline. The color can be set by: name - specify a color name, like "red" HEX - specify a hex value, like "#ff0000" RGB -…
CSS Outline - Shorthand property The outline property is a shorthand property for setting the following individual outline properties: outline-width outline-style (required) outline-color You can spe…
CSS Text Formatting CSS has a lot of properties for styling and formatting text. text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text…
CSS Text Alignment
CSS Text Decoration
Specify a Style for the Decoration Line The CSS text-decoration-style property sets the style of the decoration line. This property can have one of the following values: solid - Default value. Single…
CSS Text Transformation The CSS text-transform property is used to control the capitalization of text in an element. It can be used to transform a text into uppercase or lowercase letters, or capital…
CSS Text Spacing
CSS Text Shadow
CSS Fonts
CSS Web Safe Fonts
CSS Font Fallbacks
CSS Font Style The CSS font-style property specifies the font style for a text.. This property can have one of the following values: normal - The text is shown normally italic - The text is shown in…
CSS Font Size The CSS font-size property is used to specify the size of the text/font. Being able to manage the text size is very important in web design. However, you should not use font size adjust…
Google Fonts If you do not want to use any of the standard fonts in HTML, you can use Google Fonts. Google Fonts are free to use, and have more than 1000 fonts to choose from. How To Use Google Fonts…
Font Pairing Rules Great font pairings are essential to great design! Here are some basic rules to create great font pairings: 1. Complement It is always safe to find font pairings that complement on…
The CSS Font Shorthand Property To shorten the code, it is possible to specify all the individual font properties in one declaration. The CSS font property is a shorthand property for: font-style fon…
CSS Icons - Font Awesome
Bootstrap Icons To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b…
Google Icons To use the Google icons, add the following line inside the <head> section of your HTML page: <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> Note:…
CSS Styling Lists In HTML, there are two main types of lists: <ul> - unordered lists (list items are marked with bullets) <ol> - ordered lists (list items are marked with numbers or letters) CSS has…
HTML tables can be greatly improved with CSS: Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang…
CSS Table Width The CSS width property is used to set the width of a table. The width can be set: in percent (%) as a fixed length (px) by the auto keyword CSS Table Width in Percent To create a tabl…
Horizontal Alignment The CSS text-align property is used to set the horizontal alignment of the content in <th> or <td>. This property can have one of the following values: left - Aligns the text to…
CSS Table Padding To add some more space between the inner borders and the content in a table, use the padding property on <td> and <th> elements: First Name Last Name Savings Peter Griffin $100 Lois…
CSS Responsive Tables A responsive table will display a horizontal scrollbar if the screen is too small to display the full content. Resize the browser window to see the effect: First Name Last Name…
CSS The display Property
CSS display: none; When using display: none; the element is completely hidden from the document flow and does not take up any space. It is commonly used with JavaScript to hide or show elements witho…
CSS The max-width Property
CSS Positioning CSS positioning is about controlling the placement of elements within a web page. With CSS positioning, you can override the normal document flow. The CSS position Property The positi…
CSS position: fixed An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and le…
CSS position: sticky An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position. A sticky element is positioned relative until a certain scroll…
Positioning with top, right, bottom, and left The top, right, bottom, and left properties are used to position elements. These properties only work on positioned elements (elements with position set…
The CSS z-index Property The z-index property specifies the stack order of positioned elements. The stack order defines which element should be placed in front or behind other elements. When elements…
The CSS overflow Property The CSS overflow property controls what happens to content that is too big to fit into an area. It specifies whether to clip the content or to add scrollbars when the conten…
Overflow in Specific Directions The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions. CSS overflow-x and overflow-y The…
CSS Float
The CSS clear Property The clear property specifies what should happen with the element that is NEXT to a floating element. The clear property prevents elements from wrapping around or beside the flo…
CSS display: inline-block
CSS Center Align
CSS Horizontal Align
CSS Vertical Align
CSS Combinators A combinator is something that defines the relationship between two or more selectors. A CSS selector can contain more than one selector. Between the selectors, we can include a combi…
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. Some common use for pseudo-classes: Style an element when a us…
Interactive Pseudo-classes Interactive pseudo-classes apply styles based on user interaction with elements. Here we use the :hover pseudo-class and the :focus pseudo-class: Mouse Over Me Pseudo-class…
Structural Pseudo-classes Structural pseudo-classes select elements based on their position in the document tree. The CSS :first-child Pseudo-class The :first-child pseudo-class matches a specific el…
CSS Pseudo-Elements A CSS pseudo-element is a keyword that can be added to a selector, to style a specific part of an element. Some common use for pseudo-elements: Style the first letter or first lin…
Pseudo-elements for Text Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter. The CSS ::first-line Pseudo-element The ::first-line pseu…
Pseudo-elements for Content Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more. The CSS ::before Pseudo-element The ::before pseudo-element…
CSS Opacity
CSS Navigation Bars A navigation bar is an important component of web design. Navigation bars helps users to easily navigate between different sections of a website. Navigation bars are typically bui…
CSS Vertical Navigation Bar In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a webpage. The b…
CSS Horizontal Navigation Bar
CSS Dropdowns
CSS Advanced Dropdowns
CSS Image Gallery
CSS Image Sprites An image sprite is a collection of various small images put into one larger image file, called a "sprite image". A sprite image is typically arranged in a grid-like way, like this:…
CSS Attribute Selectors
CSS Advanced Attribute Selectors
CSS Styling Forms CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS: First Name Last Name Country Australia Canada USA Styling Form Input Fields With CSS, you…
CSS Form Inputs
Style Input with Focus By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input. Use the…
CSS Form Elements
CSS Counters With CSS counters, you can create dynamic numbering of elements (like headings, sections, or list items) without using JavaScript. CSS counters are "variables" maintained by CSS, and the…
CSS Units
CSS Absolute Units
CSS Relative Units
CSS Inheritance CSS inheritance is about what happens if no value is specified for a property on an element. If no value is specified for a property, the value can either be inherited from the parent…
CSS Specificity CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element. If two or more CSS rules point to the same element, the declaration with t…
CSS !important Rule The !important rule is used to give the value of a specific property the highest priority. The !important rule will override ALL previous styling rules for that specific property…
CSS Math Functions CSS math functions allow mathematical expressions to be used as property values. In this chapter, we will explain the following math functions: calc() max() min() clamp() The CSS c…
Optimizing CSS Optimizing CSS makes your website load faster and run more smoothly; which also results in a better user experience. Here are some tips for optimizing CSS: 1. Use Simple Selectors Use…
CSS Accessibility Styling A website should be designed to ensure good accessibility for all users, including those with disabilities. CSS accessibility styling is about using good styling technics to…
CSS Website Layout