所有动态

CSS Functions Reference CSS Functions CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS properties. Function Description acos() Returns the inverse cosine of a number between -1 and 1 asin() Returns the inverse sine of a number between -1 and 1 atan() Returns the inverse tangent of a number between -∞ and ∞ atan2() Returns the inverse tangent of two values between -infinity and infinity attr() Returns the value of an attribute of the selected element blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element (brighter or darker) calc() Allows you to perform calculations to determine CSS property values circle() Defines a circle clamp() Sets a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport color() Allows a color to be specified in a particular, specified color space color-mix() Mixes two color values in a given color space, by a given amount conic-gradient() Creates a conic gradient contrast() Adjusts the contrast of an element cos() Returns the cosine of an angle counter() Returns the current value of the named counter counters() Returns the current values of the named and nested counters cubic-bezier() Defines a Cubic Bezier curve drop-shadow() Applies a drop shadow effect to an image ellipse() Defines an ellipse exp() Returns E raised to the power of the specified number x (Ex) fit-content() Allows you to size an element based on its content grayscale() Converts an image to grayscale hsl() / hsla() Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component hue-rotate() Applies a color rotation to an element hwb() Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component hypot() Returns the square root of the sum of squares of its parameters inset() Defines a rectangle at the specified inset distances from each side of the reference box invert() Inverts the color of an image lab() Specifies a color in the CIE L*a*b color space lch() Specifies a color in the LCH (Lightness-Chroma-Hue) color space light-dark() Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme linear-gradient() Creates a linear gradient log() Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base matrix() Defines a 2D transformation, using a matrix of six values matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values max() Uses the largest value, from a comma-separated list of values, as the property value min() Uses the smallest value, from a comma-separated list of values, as the property value minmax() Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) mod() Returns the remainder left over when a number is divided by another number oklab() Specifies a color in the OKLAB color space oklch() Specifies a color in the OKLCH color space opacity() Applies an opacity effect to an element perspective() Defines a perspective view for a 3D transformed element polygon() Defines a polygon pow() Returns the value of a number (x) raised to the power of another number (y) radial-gradient() Creates a radial gradient ray() Defines the offset-path line segment that an animated element should follow rem() Returns the remainder left over when a number is divided by another number repeat() Repeats a set of columns or rows in a grid repeating-conic-gradient() Repeats a conic gradient repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient rgb() / rgba() Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component rotate() Defines a 2D rotation of an element rotate3d() Defines a 3D rotation of an element rotateX() Defines a 3D rotation of an element around the x-axis (horizontal) rotateY() Defines a 3D rotation of an element around the y-axis (vertical) rotateZ() Defines a 3D rotation of an element around the z-axis round() Rounds a number according to the specified rounding-strategy saturate() Adjusts the saturation (color intensity) of an element scale() Defines a 2D scaling of an element scale3d() Defines a 3D scaling of an element scaleX() Scales an element horizontally (the width) scaleY() Scales an element vertically (the height) sepia() Converts an image to sepia sin() Returns the sine of a number (angle) skew() Skews an element along the x- and y-axis skewX() Skews an element along the x-axis skewY() Skews an element along the y-axis sqrt() Returns the square root of a number steps() Creates a stepped timing function for animations tan() Returns the tangent of a number translate() Allows you to re-position an element along the x- and y-axis translateX() Allows you to re-position an element along the x-axis translateY() Allows you to re-position an element along the y-axis url() Allows you to include a file in the stylesheet var() Inserts the value of a custom property ★ +1 Sign in to track progress

CSS At-rules Reference CSS At-rules CSS at-rules are statements that instruct CSS on how to behave. Each at-rule begins with an @ followed by a name. The table below shows the different at-rules in CSS: At-rule Description @charset Specifies the character encoding used in the style sheet @container Define styles for elements in container, depending on the container's size or style @counter-style Lets you define your own counter styles @font-face Specifies a custom font with which to display text @font-palette-values Allows you to customize the default values of a font-palette @import Allows you to import a style sheet into another style sheet @keyframes Controls the steps in an animation by defining styles for points along the animation sequence @layer Used to control how the CSS cascade layers evaluates the order of styles @media Applies parts of a style sheet based on the result of one or more media queries @namespace Defines an XML namespace to be used in the style sheet @page Customizes the dimension, orientation, and margins of printed pages @property Allows you to define custom CSS properties directly in the stylesheet without having to run any JavaScript. This at-rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors @starting-style Defines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature ★ +1 Sign in to track progress

CSS Pseudo-elements Reference CSS Pseudo-elements A CSS pseudo-element is used to style specific parts of an element. For example, it can be used to: Style the first letter or line, of an element Insert content before or after an element Style the markers of list items Style the viewbox behind a dialog box The table below shows the different pseudo-elements in CSS: Pseudo-element Example Example description ::after p::after div::after Inserts something after the content of the specified element ::backdrop dialog::backdrop Styles the viewbox behind a dialog box or popover element ::before p::before div::before Inserts something before the content of the specified element ::file-selector-button ::file-selector-button Selects any button of type <input type="file"> ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element ::grammar-error ::grammar-error Styles a text that the browser has flagged as grammatically incorrect ::highlight() ::highlight(custom-name) Selects a custom highlight ::marker ::marker Selects the markers of list items ::placeholder input::placeholder textarea::placeholder Styles the placeholder text of <input> or <textarea> elements ::selection ::selection Styles the user-selected text ::spelling-error ::spelling-error Styles a text that the browser has flagged as incorrectly spelled ::view-transition ::view-transition Represents the root of the view transitions overlay, which contains all view transition on the page ::view-transition-group ::view-transition-group Represents a single view transition snapshot group ::view-transition-image-pair ::view-transition-image-pair Represents a container for a view transition's "old" and "new" view states - before and after the transition ::view-transition-new ::view-transition-new Represents the "new" view state of a view transition ::view-transition-old ::view-transition-old Represents the "old" view state of a view transition ★ +1 Sign in to track progress

CSS Pseudo-classes Reference 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 user moves the mouse over it Style visited and unvisited links differently Style an element when it gets focus Style valid/invalid/required/optional form elements Style an element that is the first child of its parent Syntax Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name: selector:pseudo-class-name { CSS properties } The table below lists all the pseudo-class keywords in CSS: Pseudo-class Examples Example description :active a:active Selects the active link :any-link a:anylink area:anylink Selects any <a> or <area> element with an href attribute :auto-fill input:autofill Selects any <input> element with its value autofilled by the browser :checked input:checked option:checked Matches any <input> or <option> element that is checked :default input:default button:default option:default Selects form elements that are default in a group of related elements :defined :defined Selects any element that has been defined (standard or custom elements) :dir() :dir(ltr) :dir(rtl) Selects any element with the specified text direction :disabled :disabled input:disabled option:disabled Selects any element that is disabled. Most used for form elements :empty div:empty Selects any element that has no children (including text nodes) :enabled :enabled input:enabled Selects any element that is enabled. Most used for form elements :first @page :first Represents the first page of a printed document (used with the @page rule) :first-child p:first-child li:first-child Selects the element that is the first child of its parent (among a group of sibling elements) :first-of-type p:first-of-type li:first-of-type Selects the first element of its type among a group of sibling elements :focus input:focus select:focus Selects the element that gets focus. Most used for form elements :focus-visible button:focus-visible Selects the element that gets focus (used to apply focus styles only when the keyboard is used to focus something, not the mouse) :focus-within form:focus-within label:focus-within Matches an element if the element or any of its descendants gets focus :fullscreen :fullscreen Selects any element that is currently in full-screen mode :has() h2:has(+p) Selects h2 elements that are immediately followed by a p element, and applies the style to h2 :hover a:hover p:hover Selects element on mouse over :in-range input:in-range Select any <input> element with a value within the specified range limit :indeterminate input:indeterminate Selects any form element that is in an indeterminate state :invalid input:invalid fieldset:invalid Selects invalid form elements :is() :is(ul, ol) Selects all <ul> and <ol>elements :lang() p:lang(it) Selects any <p> element with a lang attribute equal to "it" (Italian) :last-child li:last-child Selects any <li> element that is the last child of its parent :last-of-type p:last-of-type Selects any <p> element that is the last <p> element of its parent :left @page :left Represents all left-hand pages of a printed document (used with the @page rule) :link a:link Selects any unvisited link :modal :modal Selects the element that is in a modal state :not() :not(p) Selects any element that is not a <p> element :nth-child() p:nth-child(2) Selects any <p> element that is the second child of its parent :nth-last-child() p:nth-last-child(2) Selects any <p> element that is the second child of its parent, counting from the end :nth-last-of-type() p:nth-last-of-type(2) Selects any <p> element that is the second <p> element of its parent, counting from the end :nth-of-type() p:nth-of-type(2) Selects any <p> element that is the second <p> element of its parent :only-child p:only-child Selects any <p> element that is the only child of its parent :only-of-type p:only-of-type Selects any <p> element that is the only <p> element of its parent :optional input:optional select:optional textarea:optional Selects any <input>, <select>, or <textarea> elements without a "required" attribute :out-of-range input:out-of-range Selects any <input> element with a value outside the specified range limit :placeholder-shown input:placeholder-shown textarea:placeholder-shown Selects any <input> or <textarea> element that is currently displaying placeholder text :popover-open :popover-open Selects any element that is in a showing popover state :read-only input:read-only Selects input elements with the "readonly" attribute specified :read-write input:read-write Selects editable input elements :required input:required Selects input elements with the "required" attribute specified :right @page :right Represents all right-hand pages of a printed document (used with the @page rule) :root :root Selects the document's root element :scope :scope Selects elements that are a reference point, or scope, for selectors to match against :state() :state() Selects custom elements that have the specified custom state :target :target Selects the current active target element :user-invalid :user-invalid Selects any form element with an invalid value (after the user have interacted with it) :user-valid :user-valid Selects any form element with a valid value (after the user have interacted with it) :valid input:valid Selects all input elements with a valid value :visited a:visited area:visited Selects all visited links :where() :where(ol, ul) Selects all <ul> and <ol>elements ★ +1 Sign in to track progress

CSS Combinators Reference CSS Combinators A combinator is a sign that explains the relationship between selectors. The table below shows the different combinators in CSS: Name Sign Example Example Result Child combinator > div > p Selects every <p> element that are direct children of a <div> element Descendant combinator (single space) div p Selects all <p> elements inside <div> elements Namespace separator | ns | h2 Selects all <h2> elements in namespace ns Next-sibling combinator + div + p Selects the first <p> element that is placed immediately after <div> elements Selector list , div, p Selects all <div> elements and all <p> elements Subsequent-sibling combinator ~ p ~ ul Selects all <ul> elements that are preceded by a <p> element ★ +1 Sign in to track progress

CSS Selector Reference CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. Use our CSS Selector Tester to demonstrate the different selectors. CSS Simple Selectors The simple selectors select elements based on element-name, id, and class. In addition, there is the universal selector (*). Selector Example Example description element p Selects all <p> elements #id #firstname Selects the element with id="firstname" * * Selects all elements .class .intro p.intro Selects all elements with class="intro" Selects all <p> elements with class="intro" CSS Attribute Selectors The attribute selector selects HTML elements with a given attribute set. Selector Example Example description [attribute] [lang] Selects all elements with a lang attribute [attribute=value] [lang="it"] Selects all elements with lang="it" [attribute~=value] [title~="flower"] Selects all elements with a title attribute containing the word "flower" [attribute|=value] [lang|="en"] Selects all elements with a lang attribute value equal to "en" or starting with "en-" [attribute^=value] [href^="https"] Selects all elements with a href attribute value that begins with "https" [attribute$=value] [href$=".pdf"] Selects all elements with a href attribute value ends with ".pdf" [attribute*=value] [href*="w3schools"] Selects all elements with a href attribute value containing the substring "w3schools" CSS Nesting Selector Selector Example Example description & & Applies styles for an element within the context of another element ★ +1 Sign in to track progress

CSS Reference CSS Properties A accent-color Specifies an accent color for user-interface controls align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space align-items Specifies the alignment for items inside a flexible container align-self Specifies the alignment for selected items inside a flexible container all Resets all properties (except unicode-bidi and direction) animation A shorthand property for all the animation-* properties animation-delay Specifies a delay for the start of an animation animation-direction Specifies whether an animation should be played forward, backward or in alternate cycles animation-duration Specifies how long an animation should take to complete one cycle animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) animation-iteration-count Specifies the number of times an animation should be played animation-name Specifies a name for the @keyframes animation animation-play-state Specifies whether the animation is running or paused animation-timing-function Specifies the speed curve of an animation aspect-ratio Specifies preferred aspect ratio of an element B backdrop-filter Defines a graphical effect to the area behind an element backface-visibility Defines whether or not the back face of an element should be visible when facing the user background A shorthand property for all the background-* properties background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed background-blend-mode Specifies the blending mode of each background layer (color/image) background-clip Defines how far the background (color or image) should extend within an element background-color Specifies the background color of an element background-image Specifies one or more background images for an element background-origin Specifies the origin position of a background image background-position Specifies the position of a background image background-position-x Specifies the position of a background image on x-axis background-position-y Specifies the position of a background image on y-axis background-repeat Sets if/how a background image will be repeated background-size Specifies the size of the background images block-size Specifies the size of an element in block direction border A shorthand property for border-width, border-style and border-color border-block A shorthand property for border-block-width, border-block-style and border-block-color border-block-color Sets the color of the borders at start and end in the block direction border-block-end A shorthand property for border-block-end-width, border-block-end-style and border-block-end-color border-block-end-color Sets the color of the border at the end in the block direction border-block-end-style Sets the style of the border at the end in the block direction border-block-end-width Sets the width of the border at the end in the block direction border-block-start A shorthand property for border-block-start-width, border-block-start-style and border-block-start-color border-block-start-color Sets the color of the border at the start in the block direction border-block-start-style Sets the style of the border at the start in the block direction border-block-start-width Sets the width of the border at the start in the block direction border-block-style Sets the style of the borders at start and end in the block direction border-block-width Sets the width of the borders at start and end in the block direction border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color border-bottom-color Sets the color of the bottom border border-bottom-left-radius Defines the radius of the border of the bottom-left corner border-bottom-right-radius Defines the radius of the border of the bottom-right corner border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-collapse Sets whether table borders should collapse into a single border or be separated border-color Sets the color of the four borders border-end-end-radius Sets the radius of the corner between the block-end and the inline-end sides of the element border-end-start-radius Sets the radius of the corner between the block-end and the inline-start sides of the element border-image A shorthand property for all the border-image-* properties border-image-outset Specifies the amount by which the border image area extends beyond the border box border-image-repeat Specifies whether the border image should be repeated, rounded or stretched border-image-slice Specifies how to slice the border image border-image-source Specifies the path to the image to be used as a border border-image-width Specifies the width of the border image border-inline A shorthand property for border-inline-width, border-inline-style and border-inline-color border-inline-color Sets the color of the borders at start and end in the inline direction border-inline-end A shorthand property for border-inline-end-width, border-inline-end-style and border-inline-end-color border-inline-end-color Sets the color of the border at the end in the inline direction border-inline-end-style Sets the style of the border at the end in the inline direction border-inline-end-width Sets the width of the border at the end in the inline direction border-inline-start A shorthand property for border-inline-start-width, border-inline-start-style and border-inline-start-color border-inline-start-color Sets the color of the border at the start in the inline direction border-inline-start-style Sets the style of the border at the start in the inline direction border-inline-start-width Sets the width of the border at the start in the inline direction border-inline-style Sets the style of the borders at start and end in the inline direction border-inline-width Sets the width of the borders at start and end in the inline direction border-left A shorthand property for all the border-left-* properties border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-radius A shorthand property for the four border-*-radius properties border-right A shorthand property for all the border-right-* properties border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-spacing Sets the distance between the borders of adjacent cells border-start-end-radius Sets the radius of the corner between the block-start and the inline-end sides of the element border-start-start-radius Sets the radius of the corner between the block-start and the inline-start sides of the element border-style Sets the style of the four borders border-top A shorthand property for border-top-width, border-top-style and border-top-color border-top-color Sets the color of the top border border-top-left-radius Defines the radius of the border of the top-left corner border-top-right-radius Defines the radius of the border of the top-right corner border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders bottom Sets the elements position, from the bottom of its parent element box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. box-reflect The box-reflect property is used to create a reflection of an element. box-shadow Attaches one or more shadows to an element box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not break-after Specifies whether or not a page-, column-, or region-break should occur after the specified element break-before Specifies whether or not a page-, column-, or region-break should occur before the specified element break-inside Specifies whether or not a page-, column-, or region-break should occur inside the specified element C caption-side Specifies the placement of a table caption caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable @charset Specifies the character encoding used in the style sheet clear Specifies what should happen with the element that is next to a floating element clip Deprecated in favor of clip-path. Clips an absolutely positioned element clip-path Clips an element to a basic shape or to an SVG source color Sets the color of text color-scheme Indicates which operating system color scheme an element should render with column-count Specifies the number of columns an element should be divided into column-fill Specifies how to fill columns, balanced or not column-gap Specifies the gap between the columns column-rule A shorthand property for all the column-rule-* properties column-rule-color Specifies the color of the rule between columns column-rule-style Specifies the style of the rule between columns column-rule-width Specifies the width of the rule between columns column-span Specifies how many columns an element should span across column-width Specifies the column width columns A shorthand property for column-width and column-count @container Define styles for elements in container, depending on the container's size or style content Used with the :before and :after pseudo-elements, to insert generated content counter-increment Increases or decreases the value of one or more CSS counters counter-reset Creates or resets one or more CSS counters counter-set Creates or sets one or more CSS counters @counter-style Lets you define your own counter styles cursor Specifies the mouse cursor to be displayed when pointing over an element D direction Specifies the text direction/writing direction display Specifies how a certain HTML element should be displayed E empty-cells Specifies whether or not to display borders and background on empty cells in a table F filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties flex-basis Specifies the initial length of a flexible item flex-direction Specifies the direction of the flexible items flex-flow A shorthand property for the flex-direction and the flex-wrap properties flex-grow Specifies how much the item will grow relative to the rest flex-shrink Specifies how the item will shrink relative to the rest flex-wrap Specifies whether the flexible items should wrap or not float Specifies whether an element should float to the left, right, or not at all font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties @font-face Specifies a custom font to use to display text font-family Specifies the font family for text font-feature-settings Allows control over advanced typographic features in OpenType fonts font-kerning Controls the usage of the kerning information (how letters are spaced) font-language-override Controls the usage of language-specific glyphs in a typeface @font-palette-values Allows you to customize the default values of a font-palette font-size Specifies the font size of text font-size-adjust Preserves the readability and size of text when fallback font occurs font-stretch Selects a normal, condensed, or expanded face from a font family font-style Specifies the font style for text font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser font-variant Specifies whether or not a text should be displayed in a small-caps font font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values font-variant-caps Controls the usage of alternate glyphs for capital letters font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese) font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font font-weight Specifies the weight of a font G gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout H hanging-punctuation Specifies whether a punctuation character may be placed outside the line box height Sets the height of an element hyphens Sets how to split words to improve the layout of text hyphenate-character Sets the character used at the end of line, before a hyphenation break I image-rendering Specifies the type of algorithm to use for image scaling @import Allows you to import a style sheet into another style sheet initial-letter Specifies the size of the initial-letter and optionally the number of lines the initial letter should sink (down in the text) inline-size Specifies the size of an element in the inline direction inset Specifies the distance between an element and the parent element inset-block Specifies the distance between an element and the parent element in the block direction inset-block-end Specifies the distance between the end of an element and the parent element in the block direction inset-block-start Specifies the distance between the start of an element and the parent element in the block direction inset-inline Specifies the distance between an element and the parent element in the inline direction inset-inline-end Specifies the distance between the end of an element and the parent element in the inline direction inset-inline-start Specifies the distance between the start of an element and the parent element in the inline direction isolation Defines whether an element must create a new stacking content J justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space justify-items Is set on the grid container. Specifies the alignment of grid items in the inline direction justify-self Is set on the grid item. Specifies the alignment of the grid item in the inline direction K @keyframes Controls the steps in an animation by defining styles for points along the animation sequence L @layer Controls how the CSS cascade layers evaluates the order of styles left Specifies the left position of a positioned element letter-spacing Increases or decreases the space between characters in a text line-break Specifies how/if to break lines line-height Sets the line height list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies the position of the list-item markers (bullet points) list-style-type Specifies the type of list-item marker M margin Sets all the margin properties in one declaration margin-block Specifies the margin in the block direction margin-block-end Specifies the margin at the end in the block direction margin-block-start Specifies the margin at the start in the block direction margin-bottom Sets the bottom margin of an element margin-inline Specifies the margin in the inline direction margin-inline-end Specifies the margin at the end in the inline direction margin-inline-start Specifies the margin at the start in the inline direction margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element marker Points to a marker that will be drawn on all vertices of an element's path (the first, middle, and last) marker-end Points to a marker that will be drawn on the last vertex of an element's path marker-mid Points to a marker that will be drawn on all the middle vertices of an element's path marker-start Points to a marker that will be drawn on the first vertex of an element's path mask A shorthand property for mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size and mask-composite mask-clip Specifies which area is affected by a mask image mask-composite Specifies a compositing operation used on the current mask layer with the mask layers below it mask-image Specifies an image to be used as a mask layer for an element mask-mode Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask-origin Specifies the origin position (the mask position area) of a mask layer image mask-position Sets the starting position of a mask layer image (relative to the mask position area) mask-repeat Specifies how the mask layer image is repeated mask-size Specifies the size of a mask layer image mask-type Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask max-height Sets the maximum height of an element max-width Sets the maximum width of an element @media Sets the style rules for different media types/devices/sizes max-block-size Sets the maximum size of an element in the block direction max-inline-size Sets the maximum size of an element in the inline direction min-block-size Sets the minimum size of an element in the block direction min-inline-size Sets the minimum size of an element in the inline direction min-height Sets the minimum height of an element min-width Sets the minimum width of an element mix-blend-mode Specifies how an element's content should blend with its direct parent background N @namespace Defines an XML namespace to be used in the style sheet O object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width object-position Specifies the alignment of the replaced element inside its box offset A shorthand property for the offset-anchor, offset-distance, offset-path, offset-position, and the offset-rotate properties offset-anchor Specifies a point on an element that is fixed to the path it is animated along offset-distance Specifies the position along a path where an animated element is placed offset-path Specifies the path an element is animated along offset-position Specifies the initial position of an element along a path offset-rotate Specifies rotation of an element as it is animated along a path opacity Sets the opacity level for an element order Sets the order of the flexible item, relative to the rest orphans Sets the minimum number of lines that must be left at the bottom of a page or column outline A shorthand property for the outline-width, outline-style, and the outline-color properties outline-color Sets the color of an outline outline-offset Offsets an outline, and draws it beyond the border edge outline-style Sets the style of an outline outline-width Sets the width of an outline overflow Specifies what happens if content overflows an element's box overflow-anchor Specifies whether or not content in viewable area in a scrollable contianer should be pushed down when new content is loaded above overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow the container overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area overscroll-behavior Specifies whether to have scroll chaining or overscroll affordance in x- and y-directions overscroll-behavior-block Specifies whether to have scroll chaining or overscroll affordance in the block direction overscroll-behavior-inline Specifies whether to have scroll chaining or overscroll affordance in the inline direction overscroll-behavior-x Specifies whether to have scroll chaining or overscroll affordance in x-direction overscroll-behavior-y Specifies whether to have scroll chaining or overscroll affordance in y-directions P padding A shorthand property for all the padding-* properties padding-block Specifies the padding in the block direction padding-block-end Specifies the padding at the end in the block direction padding-block-start Specifies the padding at the start in the block direction padding-bottom Sets the bottom padding of an element padding-inline Specifies the padding in the inline direction padding-inline-end Specifies the padding at the end in the inline direction padding-inline-start Specifies the padding at the start in the inline direction padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element @page Customizes the dimension, orientation, and margins of printed pages page-break-after Sets the page-break behavior after an element. Replaced by break-after property page-break-before Sets the page-break behavior before an element. Replaced by break-before property page-break-inside Sets the page-break behavior inside an element. Replaced by break-inside property paint-order Sets the order of how an SVG element or text is painted. perspective Gives a 3D-positioned element some perspective perspective-origin Defines at which position the user is looking at the 3D-positioned element place-content Specifies align-content and justify-content property values for flexbox and grid layouts place-items Specifies align-items and justify-items property values for grid layouts place-self Specifies align-self and justify-self property values for grid layouts pointer-events Defines whether or not an element reacts to pointer events position Specifies the type of positioning method used for an element (static, relative, absolute or fixed) @property Defines custom CSS properties directly in the stylesheet without having to run any JavaScript Q quotes Sets the type of quotation marks for embedded quotations R resize Defines if (and how) an element is resizable by the user right Specifies the right position of a positioned element rotate Specifies the rotation of an element row-gap Specifies the gap between the grid rows S scale Specifies the size of an element by scaling up or down @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump scroll-margin Specifies the margin between the snap position and the container scroll-margin-block Specifies the margin between the snap position and the container in the block direction scroll-margin-block-end Specifies the end margin between the snap position and the container in the block direction scroll-margin-block-start Specifies the start margin between the snap position and the container in the block direction scroll-margin-bottom Specifies the margin between the snap position on the bottom side and the container scroll-margin-inline Specifies the margin between the snap position and the container in the inline direction scroll-margin-inline-end Specifies the end margin between the snap position and the container in the inline direction scroll-margin-inline-start Specifies the start margin between the snap position and the container in the inline direction scroll-margin-left Specifies the margin between the snap position on the left side and the container scroll-margin-right Specifies the margin between the snap position on the right side and the container scroll-margin-top Specifies the margin between the snap position on the top side and the container scroll-padding Specifies the distance from the container to the snap position on the child elements scroll-padding-block Specifies the distance in block direction from the container to the snap position on the child elements scroll-padding-block-end Specifies the distance in block direction from the end of the container to the snap position on the child elements scroll-padding-block-start Specifies the distance in block direction from the start of the container to the snap position on the child elements scroll-padding-bottom Specifies the distance from the bottom of the container to the snap position on the child elements scroll-padding-inline Specifies the distance in inline direction from the container to the snap position on the child elements scroll-padding-inline-end Specifies the distance in inline direction from the end of the container to the snap position on the child elements scroll-padding-inline-start Specifies the distance in inline direction from the start of the container to the snap position on the child elements scroll-padding-left Specifies the distance from the left side of the container to the snap position on the child elements scroll-padding-right Specifies the distance from the right side of the container to the snap position on the child elements scroll-padding-top Specifies the distance from the top of the container to the snap position on the child elements scroll-snap-align Specifies where to position elements when the user stops scrolling scroll-snap-stop Specifies scroll behaviour after fast swipe on trackpad or touch screen scroll-snap-type Specifies how snap behaviour should be when scrolling scrollbar-color Specifies the color of the scrollbar of an element shape-outside Defines a shape for wrapping for the inline content @starting-style Defines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature T tab-size Specifies the width of a tab character table-layout Defines the algorithm used to lay out table cells, rows, and columns text-align Specifies the horizontal alignment of text text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" text-combine-upright Specifies the combination of multiple characters into the space of a single character text-decoration Specifies the decoration added to text text-decoration-color Specifies the color of the text-decoration text-decoration-line Specifies the type of line in a text-decoration text-decoration-style Specifies the style of the line in a text decoration text-decoration-thickness Specifies the thickness of the decoration line text-emphasis A shorthand property for the text-emphasis-style and text-emphasis-color properties text-emphasis-color Specifies the color of emphasis marks text-emphasis-position Specifies the position of emphasis marks text-emphasis-style Specifies the style of emphasis marks text-indent Specifies the indentation of the first line in a text-block text-justify Specifies the justification method used when text-align is "justify" text-orientation Defines the orientation of characters in a line text-overflow Specifies what should happen when text overflows the containing element text-shadow Adds shadow to text text-transform Controls the capitalization of text text-underline-offset Specifies the offset distance of the underline text decoration text-underline-position Specifies the position of the underline text decoration top Specifies the top position of a positioned element transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements transform-style Specifies how nested elements are rendered in 3D space transition A shorthand property for all the transition-* properties transition-delay Specifies when the transition effect will start transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete transition-property Specifies the name of the CSS property the transition effect is for transition-timing-function Specifies the speed curve of the transition effect translate Specifies the position of an element U unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document user-select Specifies whether the text of an element can be selected V vertical-align Sets the vertical alignment of an element visibility Specifies whether or not an element is visible W white-space Specifies how white-space inside an element is handled widows Sets the minimum number of lines that must be left at the top of a page or column width Sets the width of an element word-break Specifies how words should break when reaching the end of a line word-spacing Increases or decreases the space between words in a text word-wrap Allows long, unbreakable words to be broken and wrap to the next line writing-mode Specifies whether lines of text are laid out horizontally or vertically Z z-index Sets the stack order of a positioned element zoom Specifies the zoom factor for an element. An element can be zoomed in and out ★ +1 Sign in to track progress

W3Schools CSS Certificate W3Schools offers an Online Certification Program. The perfect solution for busy professionals who need to balance work, family, and career building. More than 50 000 certificates already issued! Get Your Certificate » W3Schools offers an Online Certification Program. The perfect solution for busy professionals who need to balance work, family, and career building. More than 50 000 certificates already issued! Get Your Certificate » Document your skills Improve your career Study at your own pace Save time and money Known brand Trusted by top companies Who Should Consider Getting Certified? Any student or professional within the digital industry. Certifications are valuable assets to gain trust and demonstrate knowledge to your clients, current or future employers on a ever increasing competitive market. W3Schools is Trusted by Top Companies W3Schools has over two decades of experience with teaching coding online. Our certificates are recognized and valued by companies looking to employ skilled developers. Save Time and Money Show the world your coding skills by getting a certification. The prices is a small fraction compared to the price of traditional education. Document and validate your competence by getting certified! Exam overview Fee: 95 USD Achievable certification levels: Intermediate (40%) Advanced (75%) Professional (90%) Number of questions: Adaptive, 60 on average Requirement to pass: Minimum 40% - Intermediate level Time limit: 60 minutes Number of attempts to pass: 3 Exam deadline: None Certification Expiration: None Format: Online, multiple choice Register now » Advance Faster in Your Career Getting a certificate proves your commitment to upgrading your skills. The certificate can be added as credentials to your CV, Resume, LinkedIn profile, and so on. It gives you the credibility needed for more responsibilities, larger projects, and a higher salary. Knowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career or helps you to start a new one. How Does It Work? Study for free at W3Schools.com Study at your own speed Test your skills with W3Schools online quizzes Apply for your certificate by paying an exam fee Take your exam online, at any time, and from any location Get Your Certificate and Share It With The World Example certificate: Each certificate gets a unique link that can be shared with others. Validate your certification with the link or QR code. Check how it looks like in this Example. Share your certificate on Linked in the Certifications section in just one click! Document Your Skills Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary. Get Your Certificate » Looking to add multiple users? Are you an educator, manager or business owner looking for courses or certifications? We are working with schools, companies and organizations from all over the world. Get courses and/or certifications for your team here. ★ +1 Sign in to track progress

W3Schools CSS Bootcamp HTML & CSS Bootcamp Learn with W3Schools. Live online learning sessions. Duration: 3 Weeks. Learn More Live Online Bootcamp In this bootcamp, you will learn the foundational skills needed to create beautiful and functional websites, from writing HTML markup to styling your pages with CSS. You will learn HTML and CSS over a 3 weeks period together with a live instructor and an interactive cohort of engaged learners! You Will Learn HTML and CSS fundamentals including Elements, Attributes, Tables, Forms and more. How to write best fit Semantic HTML How to create your first functional website utilising HTML & CSS standards How to structure websites logically and ensure they are correctly formatted for accessibility The basics of website design and styling using CSS for layout, positioning, grid and responsive design CSS Flexbox for positioning and layout How to implement functional forms, lists, tables and media on a website How to control the style and layout of multiple web pages all at once How to change the appearance and layout of all the pages in a Web site 3 Reasons to Join the Bootcamp 1. Live Online Instruction Learn directly from experienced instructors through live online learning sessions. 2. Live Sessions Learn three evenings per week between 7pm and 9pm, available in multiple time zones. 3. Affordable & Flexible One of the most affordable instructor-led online bootcamps, with flexible payment options. Learn More How it Works 1. Application and Enrollment: Reserve your seat and enroll in the bootcamp by paying the bootcamp fee of only $395. The price includes the exam fee and 18 hours with live instructor. 2. Complete the Bootcamp: After enrollment, you will be placed in a learning cohort with other students. You will go through the course material together and complete assignments and projects with the help of an experienced instructor. By the end of this bootcamp you will learn HTML and CSS. The curriculum used is the W3Schools HTML Tutorial and W3Schools CSS Tutorial. The bootcamp will help you prepare for the W3Schools HTML and CSS exam so that you can document and validate your competence by getting certified. Throughout the bootcamp, you will receive support from your cohort and the W3Schools team to help you grow your skill set. 3. Certification and Job Application: Upon completing the bootcamp, you will have passed the W3Schools HTML and CSS exams and obtained the Certified HTML Developer and Certified CSS Developer titles and an extra acknowledgement that you were a part of the bootcamp on the certification. This certification demonstrates that you know HTML and CSS. Learn More ★ +1 Sign in to track progress

CSS Interview Preparation Try W3Schools' comprehensive Front-End interview preparation feature. A tool that will help you get ready for your next interview. W3Schools interview preparation is an interactive feature powered by AI, where you can select the role of the interviewer, ask questions, and receive guidance. After the interview training you will get an evaluation of your performance that you can use to improve yourself. Get Started What to expect in a Front-End interview If you are going to a Front-End interview, there are a few things you can expect: Coding Questions: You will be asked coding questions, and you possibly also get a task to solve. Examples of technical questions: Tell me about your experience as a Front-End developer. Tell me about a personal project where you worked on implementing the user interface for a website. Examples of a task: Create a webpage that shows a greeting message to the user. Use HTML and CSS to structure and style it. You can add a JavaScript function to change the message based on the time of the day. <head> <title>Simple Greeting Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; padding: 20px; } </style> </head> <body> <h1>Hello, welcome to our website!</h1> </body> </html> Practice Here » If you don't know how to solve the task or answer the question, do not panic. It happens to everyone, even pro Front-End developers. Showcase your skills and projects: They would like to see projects to understand your work better. You can include current projects in your portfolio even if they are unfinished. Examples of projects to have in your portfolio: To-do list app Blog template Weather dashboard E-commerce product page Interactive game or application What to do before the interview Before you go to an interview, you should check out the company. It will give you a better understanding of their values and what they do. Check out: Their webpage Their social media platforms Articles and reviews Make sure you understand the job description: Read the description and take notes if you need help understanding something. You can call them before the interview and ask about the things you don't understand. You can also ask a friend or a community member to help you. There is a big community of Front-End developers on social media. Reflect on why you are the right fit for this role: Companies hire people they believe will be the right fit. Think about what value you can add to the role and the team. Write them down. It will help you discuss how you are the right candidate for the role. We have created an interview tool to help you prepare: Try it out What is Front-End Development? Front-End development is an exciting career that allows you to create dynamic and responsive websites and apps. It's a good choice if you're interested in good user engagement and experience. Typical Languages Used in Front-End Development: HTML CSS JavaScript React.js Bootstrap and other CSS frameworks Career Outlook The demand for Front-End developers is high. You can expect: Competitive salary Possibility of working remotely Opportunity to grow as the industry innovates and adopts new technologies. The Average Salary is $112,328 in the US. Typical Job Titles for a Front-End Developer: Front-End developer Web Developer UI/UX Designer Web App Developer and many more. Try W3Schools Pathfinder Jobs, where companies post in-demand job roles such as Front-End development, web development, Java development, and more. Our best tip: Prepare yourself so you can go in with confidence and enjoy the process! Try W3Schools interview preparation here: Interview Preperation Best of luck! ★ +1 Sign in to track progress

CSS Study Plan Introduction The CSS study plan helps you teach your students CSS step-by-step. Creating a study plan for CSS is easy. You can use a pre-built study plan or customize it. Students have different skill levels. The study plans can be customized to ensure that everyone is challenged. Save time with pre-built teacher materials and study plans. Easily organize your class with a timeline from the introduction of CSS to the final exam. W3Schools Academy This study plan is a feature of W3Schools Academy. W3Schools Academy is a platform that has everything you need to teach coding, all in one place. It offers you as a teacher a toolbox of features that helps you succeed with teaching in your classroom. You need to have an active subscription to access the study plan feature. There are two different subscription tiers: Essentials ($1.99 / month per student) Full Access ($5.99 / month per student) Calculate your price and order here. Learn More » Academy also offer other features such as: Managing your classroom Tracking of student progress and reports Labs, assignments, and code challenges (prebuilt challenges or create your own ones) Auto-grading Teaching materials Certification exams Get a free demo » Teacher Materials W3Schools has everything you need to teach CSS. The CSS training materials is available for you to include and use in your study plan: W3Schools CSS Tutorial CSS Exercises CSS Quiz CSS Challenges (Coding challenges) CSS Certification Exam (End of Pathway Exam) CSS Syllabus With the CSS Syllabus, your students will start with the basics, like styling text and changing colors, and move to more advanced topics, like creating layouts with Flexbox, Grid, and responsive design. Each chapter has examples, try-it-yourself sections, exercises, and quizzes to make learning easy, interactive, and fun. Read more about CSS Syllabus. Study Plan Overview The study plan features are made to help teachers and students. They make learning easy, flexible, and fun. These features work for different types of classes, learning styles and student level. Learning Paths You can add ready-made learning paths. The learning paths are by default ordered by our recommended order. You can change the order. You can add custom activities with text, links, or multi-media files. Drag and drop or click to make changes to the path. Interactive Content Tutorials Try-its (test code snippets) Exercises Quiz Challenges Labs Timeline and Pace You can set a timeline of your study plan (e.g., 4-week, 8-week, 12-week, 24-week plans). You can decide the learning pace for your class. Different study plans can be assigned to different students in the same class. The flexibility can help to make sure that everyone is challenged. Track Student Progress There are tools to track student progress. The analytic tools include: chapter progress, exercises results, quiz results, exam results, and much more. The challenges can be auto-graded or manually graded. The results are available to you as a teacher. End of Pathway Exam The CSS study plan aligns with the CSS Certification Exam. The exam can be taken at the end of the study plan, at your selected date. The exam summarizes the CSS Tutorial. You get reports of the students' results. Accessibility Study plans and learning materials are accessible on desktops, tablets, and smartphones. This ensures students can learn anytime, anywhere. Learn More » Sample Study Plan You choose the timeline and pace of your study plans. Schools have different preferences. Some would like more intensive pace, e.g. 5 weeks, others 12 or more weeks. It is completely up to you. For example, this is how a 5-week CSS study plan could look like: Week 1: Introduction, Colors, Backgrounds Week 2: Borders, Margins Padding & Directions, Outline, Text Week 3: Fonts, Icons, Links, Lists, Tables Week 4: Visibility and Layouts, Float, Selectors, Image Sprites, Properties, Navigation Bar Demos, Demos Week 5: Advanced, Gradients, Shadows, Variables, Flexbox, Responsive, Grid, CSS Certification Exam Image of Sample CSS study plan: Ready to get started? Start with CSS Study Plans today. Get Started » Are You a Teacher? Are you interested in learning how you can use W3Schools Academy to Teach CSS programming? Watch a demo of W3Schools Academy. You'll see how it works, and discover how it can make teaching programming easier and more engaging. Watch Demo » ★ +1 Sign in to track progress

CSS Syllabus Introduction The W3Schools CSS Tutorial is comprehensive and beginner-friendly. It will give you a fundamental knowledge of CSS. It is designed for beginners and requires no prior experience with programming. The content has been carefully made to be bite-sized, simple, and easy to understand. The content has been proven by millions of users over the years. It is updated and improved frequently. The syllabus outline and its sequence are structured so you can learn CSS step by step, from the introduction to creating your first application with CSS. Get Started With CSS » Learning Outcomes Understand how CSS is used to format and style web pages. Use CSS rules and syntax to define how HTML elements look. Use colors, fonts, and text properties to customize webpage text. Implement different types of selectors (e.g., class, ID, element selectors) for targeted styling. Use the box model properties (border, padding, and margin) to create and change the layout. To organize elements on the page, use the positioning properties (static, relative, absolute, and fixed). Use media queries to create responsive web pages. Style borders and backgrounds with different qualities and effects. Learn how to utilize CSS Flexbox to create responsive, adaptable layouts. Link an external CSS file to an HTML document. Note: Are you a teacher teaching CSS? W3Schools Academy is a toolbox of features that can help you teach. It offers classroom features such as pre-built study plans, classroom administration and much more. Read more about Academy here. Which Subjects Are CSS Relevant For? Web pages: HTML is the standard markup language for creating web pages, and CSS is the language used to style them. Computer Science (CS) / Information Technology (IT): HTML together with CSS is fundamental to understanding the internet, web development and programming. Digital Media: Text, photos, and other media can be added to digital platforms using CSS together with HTML, which is essential for content creation and management. Business / Entrepreneurship: Understanding how to create a website is helpful for projects related to the internet. Art and Design: CSS supports Web Design, creativity, and visual communication ideas that are all part of web design. STEM (Science, Technology, Engineering, Mathematics): Building web pages with HTML and CSS is a part of technology integration in STEM projects, teaching logical thinking and problem-solving. Career and Technical Education (CTE): CSS together with HTML is part of the curriculum for career-focused courses, especially those related to web development, IT support, and digital marketing. Get Started Activities In this tutorial we offer different activities for you to learn CSS for free: Lessons Exercises Quizzes Sign in to Track Progress You can also create an account to track your progress. As a signed-in user, you get access to features such as: Learning paths Sandbox and lab environments Achievements And much more! Sign Up Sandbox and Lab Environment CSS, like any other coding language, is best learned by working hands-on with code. Easily try code with our "Try it Yourself" editor. Here, you can edit CSS code and view the result: CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } Try it Yourself » If you want to explore more and host your project, we have a feature called Spaces that allows you to build, test and deploy static websites. Here you get a secure sandbox environment called Spaces, where you can practice coding and test projects in real-time. Spaces allow you to test, build, and deploy code. This includes a W3Schools subdomain, hosting, and secure SSL certificates. Spaces require no installation and run directly in the browser. Features include: Collaboration File navigator Terminal & log Package manager Database Environment manager Analytics Create a Spaces Account CSS Certification W3Schools offers an end-of-pathway certification program. Here you can take exams to get certified. The CSS exam is a test that summarizes the W3Schools CSS syllabus. After passing the exam you get the "Certified CSS Developer" Certification. There are two different types of certifications: Non-adaptive Adaptive The non-adaptive is pass or no pass. The adaptive certification is adaptive and graded; students will get a grade from intermediate, advanced to professional. Buy Certificate » Are You a Teacher? Are you interested in learning how you can use W3Schools Academy to Teach CSS? Watch a demo of W3Schools Academy. You'll see how it works, and discover how it can make teaching programming easier and more engaging. Watch Demo » ★ +1 Sign in to track progress

CSS and HTML Website Hosting Create a Website with HTML and CSS Host Websites with W3Schools Spaces Get Started for Free Practice Coding Skills kAI AI Tutor Build Projects Host Securely Choose your Plan By subscribing to a plan you support the W3Schools mission to make learning available to everyone - no matter their background. Monthly Annually NEW SUBSCRIBER DEAL 25% OFF FOR A YEAR USE PROMO CODE: SPACES25 Want custom domains? You can also buy a domain or connect an existing one. Looking to add multiple users? Read here for how to get in touch Powerful Code Editor Front-end, Back-end or Full-stack - the choice is yours Practice Makes Perfect Sharpen and Master your development skills with these technologies using Spaces. Get Started for Free Save Time with Templates Build powerful websites in just a few clicks Portfolio Blog Webshop Tutor Explore All Templates Get Started for Free kAI Just landed in Spaces Learn to code more effectively and intelligently with kAI - AI tutor Get Started for Free Hi! I'm kAI, W3Schools AI Tutor... Feel free to ask me any coding-related questions, and I'll do my best to assist you. I can help you checking your code for errors, improving your code's structure, explaining coding concepts in a clear and understandable way, and more... I can even create complete websites for you based on your input, so what are you waiting for? Super Simple to Share Host and Publish Websites in no time Included for in all plans W3Schools subdomain, hosting, and SSL certificate. Want custom domains? Buy a domain or transfer an existing one and connect it to your space. How it works 1. Join W3Schools - and create a space 2. Choose a template - or start from scratch 3. Edit code directly in your browser 4. Share your website with the world Coding Made Easy All at your fingertips with our easy-to-use code editor Cloud-based Terminal & Log How To Libraries Database File Navigator Package Manager Analytics Environment Manager Get Started for Free Cloud-Based Save Time & Money. No installation required. Access everything in your browser. Get started in seconds. Get Started for Free File Navigator All Your Files in One Place. Find and switch easily between your code files without leaving the code editor. Get Started for Free Terminal and Log Fix Your Code Faster. Monitor your code, debug and troubleshoot your work during the development process. Get Started for Free Database Get Full Data Visibility. Find and preview all the data stored in your website. Anytime, from anywhere. Get Started for Free Environment Manager Increased Control and Security. Control your website access points to establish secure connections. Get Started for Free Package Manager Find What You Need Quicker. Search and install frameworks and libraries in just one click. Get Started for Free User Analytics Get Traffic Insights. Learn from your website visitors to deliver a better user experience. Get Started for Free Get Inspired Connect and share your website with the community to get instant feedback Get Started for Free Frequently Asked Questions What's the difference between 'Basic' and 'Full Stack' Spaces? With Basic Spaces, you can build frontend websites. Whereas with Fullstack Spaces, you can build frontend and backend websites. Which programming languages are included in 'Basic' and 'Full Stack' Spaces? Basic Spaces include HTML, CSS, and Javascript. Full Stack Spaces include everything in Basic Spaces plus PHP, Python, React.js, Vue.js, Node.js, Handlebars, and Django. How are subscriptions renewed? Your subscription will be automatically renewed every month. What happens if I cancel my subscription? Your access to all the benefits for the paid period of time will continue. However, the subscription will not be renewed automatically. Can I subscribe to multiple accounts at once? To subscribe W3Schools accounts for multiple users, you can contact sales@w3schools.com Have some other questions? Visit our support page Start Free Trial Cancel anytime. ★ +1 Sign in to track progress

CSS Code Challenges Test your CSS skills with code challenges from all categories: Code Challenges Loading challenges...

CSS Exercises Test your CSS skills with exercises from all categories: Exercises Tip: Sign in to track your progress. 0/152 done Syntax6 exercisesOpenDoneSelectors6 exercisesOpenDoneSelectors Grouping3 exercisesOpenDoneHow To4 exercisesOpenDoneHow To - Internal2 exercisesOpenDoneHow To - Inline2 exercisesOpenDoneHow To - Multiple and Cascade3 exercisesOpenDoneComments5 exercisesOpenDoneColors5 exercisesOpenDoneRGB5 exercisesOpenDoneHEX7 exercisesOpenDoneHSL6 exercisesOpenDoneBackground Color7 exercisesOpenDoneBackground Image6 exercisesOpenDoneBackground Repeat6 exercisesOpenDoneBackground Attachment5 exercisesOpenDoneBackground Shorthand6 exercisesOpenDoneBorder5 exercisesOpenDoneBorder Width6 exercisesOpenDoneBorder Color6 exercisesOpenDoneBorder Sides5 exercisesOpenDoneBorder Shorthand5 exercisesOpenDoneRounded Borders5 exercisesOpenDoneMargins8 exercisesOpenDoneMargin Collapse3 exercisesOpenDonePadding7 exercisesOpenDonePadding box-sizing1 exercisesOpenDoneHeight and Width5 exercisesOpenDoneHeight and Width3 exercisesOpenDoneBox Model8 exercisesOpenDoneOutline4 exercisesOpenDoneOutline Width6 exercisesOpenDoneOutline Color6 exercisesOpenDoneOutline Shorthand3 exercisesOpenDoneOutline Offset4 exercisesOpenDoneText5 exercisesOpenDoneText Alignment7 exercisesOpenDoneText Decoration7 exercisesOpenDoneDecoration Styles4 exercisesOpenDoneText Transformation5 exercisesOpenDoneText Spacing6 exercisesOpenDoneText Shadow5 exercisesOpenDoneFont Family6 exercisesOpenDoneWeb Safe Fonts5 exercisesOpenDoneFont Style8 exercisesOpenDoneFont Size7 exercisesOpenDoneFont Shorthand3 exercisesOpenDoneIcons3 exercisesOpenDoneLinks8 exercisesOpenDoneLists8 exercisesOpenDoneTables6 exercisesOpenDoneTable Size4 exercisesOpenDoneTable Alignment7 exercisesOpenDoneTable Style6 exercisesOpenDoneTable Responsive5 exercisesOpenDoneDisplay6 exercisesOpenDoneDisplay / Hide3 exercisesOpenDoneMax Width5 exercisesOpenDonePosition Static / Relative5 exercisesOpenDonePosition Fixed / Absolute5 exercisesOpenDonePosition Sticky4 exercisesOpenDoneZ-index6 exercisesOpenDoneOverflow6 exercisesOpenDoneOverflow X/Y4 exercisesOpenDoneFloat4 exercisesOpenDoneClear7 exercisesOpenDoneInline-block4 exercisesOpenDoneAlign Horizontal5 exercisesOpenDoneAlign Vertical5 exercisesOpenDoneCombinators9 exercisesOpenDonePseudo Classes Interactive8 exercisesOpenDonePseudo Classes Structural5 exercisesOpenDonePseudo Elements Text5 exercisesOpenDonePseudo Elements Content7 exercisesOpenDoneOpacity9 exercisesOpenDoneVertical Navbar4 exercisesOpenDoneHorizontal Navbar4 exercisesOpenDoneDropdowns4 exercisesOpenDoneAdvanced Dropdowns4 exercisesOpenDoneAttribute Selectors5 exercisesOpenDoneAttribute Selectors Advanced5 exercisesOpenDoneForm Inputs5 exercisesOpenDoneForm Focus/Icons4 exercisesOpenDoneForm Elements4 exercisesOpenDoneCounters4 exercisesOpenDoneCounters Nested3 exercisesOpenDoneUnits Absolute4 exercisesOpenDoneUnits Relative6 exercisesOpenDoneSpecificity5 exercisesOpenDoneSpecificity Hierarchy3 exercisesOpenDone!important5 exercisesOpenDoneMath Functions9 exercisesOpenDoneRounded Corners8 exercisesOpenDoneBorder Images6 exercisesOpenDoneMultiple Backgrounds9 exercisesOpenDoneColors9 exercisesOpenDoneColor Keywords7 exercisesOpenDoneLinear Gradients8 exercisesOpenDoneRadial Gradients8 exercisesOpenDoneConic Gradients4 exercisesOpenDoneShadow Effects7 exercisesOpenDoneBox Shadow5 exercisesOpenDoneText Effects9 exercisesOpenDoneWeb Fonts5 exercisesOpenDone2D Transforms5 exercisesOpenDone2D Transform Scale4 exercisesOpenDone2D Transform Skew4 exercisesOpenDone3D Transforms6 exercisesOpenDoneTransitions4 exercisesOpenDoneTransition Timing5 exercisesOpenDoneAnimations3 exercisesOpenDoneAnimation Timing5 exercisesOpenDoneAnimation Properties4 exercisesOpenDoneTooltips4 exercisesOpenDoneTooltip Arrows4 exercisesOpenDoneImages5 exercisesOpenDoneImage Effects4 exercisesOpenDoneImage Hover4 exercisesOpenDoneImage Centering4 exercisesOpenDoneImage Filters8 exercisesOpenDoneImage Shapes8 exercisesOpenDoneObject Fit6 exercisesOpenDoneObject Position3 exercisesOpenDoneMasking5 exercisesOpenDoneButtons5 exercisesOpenDoneButton Hover4 exercisesOpenDoneButton Groups4 exercisesOpenDonePagination4 exercisesOpenDonePagination Styles4 exercisesOpenDoneMultiple Columns4 exercisesOpenDoneMultiple Column Rules5 exercisesOpenDoneUser Interface4 exercisesOpenDoneVariables6 exercisesOpenDoneThe property Rule4 exercisesOpenDoneBox Sizing5 exercisesOpenDoneMedia Queries6 exercisesOpenDoneFlexbox3 exercisesOpenDoneFlex Container4 exercisesOpenDoneFlexbox Justify4 exercisesOpenDoneFlexbox Align4 exercisesOpenDoneFlex Items6 exercisesOpenDoneFlex Responsive3 exercisesOpenDoneGrid Columns and Rows7 exercisesOpenDoneGrid Container8 exercisesOpenDoneGrid Align Content4 exercisesOpenDoneGrid Item6 exercisesOpenDoneRWD Intro3 exercisesOpenDoneRWD Viewport4 exercisesOpenDoneRWD Grid View3 exercisesOpenDoneRWD Media Queries4 exercisesOpenDoneRWD Images4 exercisesOpenDoneRWD Videos3 exercisesOpenDone Log in to track your progress If you haven't already, sign up to become a W3Schooler, and get points for every exercise you complete. As a logged-in W3Schools user you will have access to many features like having your own web page, track your learning progress, receive personal guided paths, and more. The Exercise The exercises are a mix of "multiple choice" and "fill in the blanks" questions. There are between 3 and 9 questions in each category. The answer can be found in the corresponding tutorial chapter. If you're stuck, or answer wrong, you can try again or hit the "Show Answer" button to see the correct answer. Kickstart your career Get certified by completing the course Get certified ★ +1 Sign in to track progress

CSS Quiz You can test your CSS skills with W3Schools' Quiz. The Test The test contains 25 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don't know, about CSS. Count Your Score You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 25 points. Start the Quiz Good luck! Start the CSS Quiz ❯ If you don't know CSS, we suggest that you read our CSS Tutorial from scratch. Kickstart your career Get certified by completing the course Get certified ★ +1 Sign in to track progress

CSS Snippets CSS Snippets Have you ever seen a cool feature on a website and thought "How do they do that"? We have collected a bunch of CSS snippets that you can use in your projects, for free: Image Text Blocks Nature Beautiful sunrise Learn How To » Alert Buttons Success Info Warning Danger Default Learn How To » Loaders Learn How To » Top Navigation Home News Contact Learn How To » Animated Search Form Learn How To » Hover Dropdowns Hover Link 1 Link 2 Link 3 Learn How To » Fixed Sidebar Learn How To » How To - Snippets Library For more snippets, you can visit our How To section, that include hundreds of code snippets for HTML, CSS and JavaScript. Go to W3Schools How To section » ★ +1 Sign in to track progress

CSS Online Editor CSS Editor With our online CSS editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser. Run » Size: Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; } My First CSS Example This is a paragraph. Try it Yourself » Click on the "Try it Yourself" button to see how it works. Publish Your Code If you want to save your HTML, CSS and JavaScript code, and create your own website, check out W3Schools Spaces. W3Schools Spaces is a website-building tool that lets you make and share your own website. You can change the website's look and how it works by editing the code right in your web browser. It's easy to use and doesn't require any setup: The code editor is packed with features to help you achieve more: Templates: Start from scratch or use a template Cloud-based: no installations required. You only need your browser Terminal & Log: debug and troubleshoot your code easily File Navigator: switch between files inside the code editor And much more! Learn More Learn Faster Practice is key to mastering coding, and the best way to put your CSS knowledge into practice is by getting practical with code. Use W3Schools Spaces to build, test and deploy code. The code editor lets you write and practice different types of computer languages. It includes HTML/CSS/JavaScript, but you can use it for other languages too, such as PHP, Python, Node.js, etc. Learn More If you don't know CSS, we suggest that you read our CSS Tutorial from scratch. Build Powerful Websites You can also use the code editor in W3School Spaces to build frontend or full-stack websites from scratch. Or you can use the 60+ templates available and save time: Create your Spaces account today and explore them all! Learn More Share It With The World Host and publish your websites in no time with W3School Spaces. W3Schools subdomain and SSL certificate are included with W3School Spaces. An SSL certificate makes your website safe and secure. It also helps people trust your website and makes it easier to find it online. Want a custom domain for your website? You can buy a domain or transfer an existing one and connect it to your space. Learn More How Does It Work? Get started in a few clicks with W3School Spaces. ★ +1 Sign in to track progress

CSS Examples CSS Syntax CSS syntax CSS syntax explained CSS Selectors The element selector The id selector The class selector (for all elements) The class selector (for only <p> elements) An HTML element that refer to two classes The universal selector Grouping selectors CSS selectors explained CSS How To / Where To External CSS Internal CSS Inline CSS Multiple style sheets Cascading order CSS how to explained CSS Comments Single-line comment Multi-line comment CSS comments explained CSS Colors Set the background color of an element Set the text color Set the border color Set different color values Set RGB values Set HEX values Set HSL values CSS colors explained CSS Backgrounds Set the background color of a page Set the background color of different elements Set an image as the background of a page How to repeat a background image only horizontally How to position a background image A fixed background image (this image will not scroll with the rest of the page) All the background properties in one declaration Advanced background example CSS background properties explained CSS Borders Set the width of the four borders Set the width of the top border Set the width of the bottom border Set the width of the left border Set the width of the right border Set the style of the four borders Set the style of the top border Set the style of the bottom border Set the style of the left border Set the style of the right border Set the color of the four borders Set the color of the top border Set the color of the bottom border Set the color of the left border Set the color of the right border All the border properties in one declaration Add rounded borders to an element Set different borders on each side All the top border properties in one declaration All the bottom border properties in one declaration All the left border properties in one declaration All the right border properties in one declaration CSS border properties explained CSS Margins Specify different margins for each side of an element Use shorthand margin property with four values Use shorthand margin property with three values Use shorthand margin property with two values Use shorthand margin property with one value Set margin to auto to center the element within its container Let the left margin be inherited from the parent element Margin collapse Margin properties explained CSS Padding Specify different padding for each side of an element Use shorthand padding property with four values Use shorthand padding property with three values Use shorthand padding property with two values Use shorthand padding property with one value Padding and element width (without box-sizing) Padding and element width (with box-sizing) Set padding-left of an element Set padding-right of an element Set padding-top of an element Set padding-bottom of an element CSS padding properties explained CSS Height/Width Set the height and width of an element Set max-width of an element Set the height and width of different elements Set the height and width of an image using percent Set min-width and max-width of an element Set min-height and max-height of an element CSS height/width properties explained CSS Box Model Demonstrating the box model Calculate the total width CSS box model explained CSS Outline Draw a line around an element (outline) Set the style of an outline Set the color of an outline Set the width of an outline Use the shorthand outline property Outline with rounded corners Using outline-offset Using outline-offset with negative value CSS outline properties explained CSS Text Set the text color of different elements Set the text color and background color of different elements Align the text Using text-align: justify Using text-align-last Vertical alignment of an image inside text Set the text direction of an element Using text-decoration-line Using text-decoration-color Using text-decoration-style Using text-decoration-thickness Using the text-decoration shorthand property Using text-decoration: none Using text-transform Using text-indent Using letter-spacing Using line-height Using word-spacing Using white-space Add a text shadow for an element Add a colored text shadow for an element Add a colored text shadow with blur effect Text shadow on white text Text shadow with red neon glow Text shadow with red and blue neon glow Another text shadow effect CSS text properties explained CSS Fonts Set different fonts for a text Using fallback font Using the font-style property Using the font-weight property Set the font-variant property Set font size in px Set font size in em Set font size in rem Set font size in vw Using the font shorthand property Font properties explained CSS Icons Font Awesome icons Bootstrap icons Google icons CSS icons explained CSS Links Style a link Style a link depending on state Style a link with text-decoration Style a link with background-color Create a link button Create a link button with borders Add other styles to links Different types of cursors CSS link properties explained CSS Lists All the different list item markers in lists Set an image as the list-item marker Position the list-item marker Remove default list settings All list properties in one declaration Style lists with colors Full-width bordered list CSS list properties explained CSS Tables Specify a black border for table, th, and td elements Specify a green border for table, th, and td elements Using border-collapse Use padding in table Using border-spacing Using border-spacing Single border around the table Full-width table Half-width table Fixed-width table Auto width table Set height of table headers Center-align the content of td elements Left-align the content in th Vertical alignment of content Horizontal dividers for a table Highlight table rows on mouse over Zebra-striped table Colored table header A responsive table Using caption-side Create a fancy table CSS table properties explained CSS Display Using visibility:hidden Using display:none Difference between display:none and visiblity: hidden All different display values How to display a block-level element as an inline element How to display an inline element as a block-level element How to use CSS and JavaScript to show a hidden element How to use CSS and JavaScript to toggle between show and hide CSS display properties explained CSS Positioning Using position: static Using position: relative Using position: fixed Using position: absolute Using position: sticky Position image text (top left corner) Position image text (top right corner) Position image text (bottom left corner) Position image text (bottom right corner) Position image text (centered) Using positioning and z-index Using z-index to set stack order Using no z-index CSS positioning properties explained CSS Overflow Using the overflow property Using overflow: visible Using overflow: hidden Using overflow: scroll Using overflow: auto Using overflow-x and overflow-y. CSS overflow properties explained CSS Floating A simple use of the float property An image with border and margins that floats to the right in a paragraph An image with a caption that floats to the right Let the first letter of a paragraph float to the left Turning off float (using the clear property) Turning off float (using the "clearfix" hack) Create floating boxes Create side-by-side images Create equal-height boxes (with flexbox) Creating a horizontal menu CSS float properties explained CSS Inline-block Show the differences between inline, inline-block and block Using inline-block to create navigation links CSS inline-block explained CSS Aligning Elements Center align with margin Center aligning text Center an image Center align with flexbox Center align with grid Left/Right aligning with position Left/Right aligning with float Center vertically and horizontally with position CSS align properties explained CSS Combinators Descendant selector Child selector Adjacent Sibling selector General Sibling selector CSS combinators explained CSS Pseudo-classes Display links in different colors depending on state Add other styles to hyperlinks Using :hover on div Use of :focus Combine pseudo-classes and HTML classes Use :hover to show tooltip :first-child - style all first child p elements :first-child - style the first em element in all p elements :first-child - style all em elements in all first child p elements Use of :lang CSS pseudo-classes explained CSS Pseudo-elements Make the first letter special in a text Make the first line special in a text Make the first letter and first line special Use :before to insert some content before an element Use :after to insert some content after an element Use :marker to style list item markers Use :selection to style user-selected text Use :backdrop to style the viewbox behind a dialog box CSS pseudo-elements explained CSS Opacity Creating transparent images Creating transparent images - mouseover effect Reversed mouseover effect for transparent images Transparent boxes with opacity Opacity vs background RGBA Text in transparent box CSS image opacity explained CSS Navigation Bars Vertical navbar - fully styled Horizontal navbar - fully styled Horizontal navbar using float Horizontal navbar using flex Vertical navbar - full-height and fixed Horizontal navbar - fixed top Sticky navigation bar Responsive top navigation Responsive side navigation CSS navigation bars explained CSS Dropdowns Dropdown text Dropdown menu Right-aligned dropdown menu Dropdown image Dropdown navigation bar CSS dropdowns explained CSS Image Gallery Image gallery Responsive Image gallery CSS image gallery explained CSS Image Sprites An image sprite An image sprite - a navigation list An image sprite with hover effect CSS image sprites explained CSS Attribute Selectors Selects all <a> elements with a target attribute Selects all <a> elements with a target="_blank" attribute Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower" Selects all elements with a class attribute value that begins with "top" (must be whole word) Selects all elements with a class attribute value that begins with "test" Selects all elements with a class attribute value that ends with "test" Selects all elements with a class attribute value that contains "te" CSS attribute selectors explained CSS Forms Full-width input field Padded input field Bordered input field Bottom bordered input field Colored input fields Focused input fields Focused input fields 2 Input with icon/image Animated search input Styling textareas Styling select menus Styling input buttons Responsive form CSS forms explained CSS Counters Create a counter Decrease a counter by 1 Increase a counter by 2 Using two counters Using the counters() function CSS counters explained CSS Website Layout Website layout - header Website layout - Navbar Website layout - 3 column to 1 column Website layout - Basic footer Website layout - Fixed footer Responsive Website Example CSS website layout explained CSS Rounded Corners Add rounded corners to elements Round each corner separately Create elliptical corners CSS rounded corners explained CSS Border Images Create an image border around an element, using the round keyword Create an image border around an element, using the stretch keyword Image border - Different slice values CSS border images explained CSS Backgrounds Add multiple background images for an element Specify the size of a background image Scale a background image using "contain" and "cover" Define sizes of multiple background images Full-size background image Background hero image Use background-origin to specify where the background image is positioned Use background-clip with a background image Use background-clip with a background color CSS backgrounds explained CSS Colors Different RGBA colors Different HSLA colors Different colors with opacity CSS colors explained CSS Color Keywords Using the transparent keyword Using the currentcolor keyword Using the currentcolor keyword Using the currentcolor keyword Using the inherit keyword CSS color keywords explained CSS Gradients Linear Gradient - top to bottom Linear Gradient - bottom to top Linear Gradient - left to right Linear Gradient - diagonal Linear Gradient - with a specified angle Linear Gradient - with multiple color stops Linear Gradient - color of a rainbow + text Linear Gradient - with transparency Linear Gradient - a repeating linear gradient Radial Gradient - evenly spaced color stops Radial Gradient - differently spaced color stops Radial Gradient - set shape Radial Gradient - different size keywords Radial Gradient - a repeating radial gradient Conic Gradient - Three colors Conic Gradient - Five colors Conic Gradient - Three colors and degrees Conic Gradient - Pie chart Conic Gradient - Pie chart 2 Conic Gradient - With a from angle Conic Gradient - With a center position Conic Gradient - Repeating a conic gradient Conic Gradient - Repeating a conic gradient 2 CSS gradients explained CSS Shadow Effects Simple shadow effect Add a color to the shadow Add a blur effect to the shadow White text with black shadow A red neon glow shadow A red and blue neon glow shadow White text with black, blue, and darkblue shadow Border around text Add a simple box-shadow to an element Add color to box-shadow Add color and blur effect to box-shadow Add color, blur, and spread effect to box-shadow Using the inset keyword in box-shadow Add multiple shadows for an element Create paper-like cards (text) Create paper-like cards (polaroid images) CSS shadow effects explained CSS Text Effects Specify how hidden, overflowed content should be signaled to the user How to display the overflowed content when hover over the element Allow long words to be able to be broken and wrap onto the next line Specify whether lines of text are laid out horizontally or vertically CSS text explained CSS Custom Fonts Use your "own" fonts in @font-face rule Use your "own" fonts in @font-face rule (bold) CSS custom fonts explained CSS 2D Transforms translate() - move an element from its current position rotate() - rotate an element clockwise rotate() - rotate an element counter-clockwise scale() - increase an element scale() - decrease an element skewX() - skews an element along the X-axis skewY() - skews an element along the Y-axis skew() - skews an element along the X and Y-axis matrix() - rotate, scale, move, and skew an element CSS 2D transforms explained CSS 3D Transforms rotateX() - rotate an element around its X-axis at a given degree rotateY() - rotate an element around its Y-axis at a given degree rotateZ() - rotate an element around its Z-axis at a given degree CSS 3D transforms explained CSS Transitions Transition - change width of an element Transition - change width and height of an element Specify different speed curves for a transition Specify a delay for a transition effect Add a transformation to a transition effect Specify all transition properties in one shorthand property CSS transitions explained CSS Animations Bind an animation to an element Animation - change background-color of an element Animation - change background-color and position of an element Delay an animation Run animation 3 times before it stops Run animation for ever Run animation in reverse direction Run animation in alternate cycles Speed curves for animations Animation shorthand property CSS animations explained CSS Tooltips Right tooltip Left tooltip Top tooltip Bottom tooltip Tooltip with arrow Animated tooltip CSS tooltips explained CSS Style Images Rounded image Circled image Thumbnail image Thumbnail image as link Responsive image Polaroid images Image with opacity Image text (top left corner) Image text (top right corner) Image text (bottom left corner) Image text (bottom right corner) Image text (centered) Image hover - Fade in text Image hover - Fade in a box Image hover - Slide in from top Image hover - Slide in from bottom Image hover - Slide in from left Image hover - Slide in from right Flip an image on hover Responsive Image Gallery CSS styling images explained CSS Image Modal Responsive modal image gallery CSS image modal explained CSS Image Centering Center image horizontally with margin: auto Center image horizontally with display: flex Center image both vertically and horizonatlly with display: flex Center image both vertically and horizonatlly with display: grid CSS image centering explained CSS Image Filters Filter blur() Filter brightness() Filter contrast() Filter drop-shadow() Filter grayscale() Filter hue-rotate() Filter invert() Filter opacity() Filter saturate() Filter sepia() CSS image filters explained CSS Image Shapes Clip an image to a circle Clip an image to a circle and position the center of circle to the right Circle() and shape-outside Clip an image to an ellipse Clip an image to an ellipse and position the center of ellipse to the right Ellipse() and shape-outside Clip an image to a polygon CSS image shapes explained CSS Object-fit Use object-fit: cover Use object-fit: contain Use object-fit: fill Use object-fit: none Use object-fit: scale-down CSS object-fit explained CSS Object-position Position the image so that the great old building is in center Position the image so that the famous Eiffel Tower is in center CSS object-position explained CSS Masking Using the mask-image property Omit the mask-repeat property Position the mask image A linear gradient mask layer A linear-gradient along with text masking A radial gradient mask layer (circle) A radial gradient mask layer (ellipse) A conic gradient mask layer An SVG mask layer (circle) An SVG mask layer (ellipse) An SVG mask layer (triangle) An SVG mask layer (star) An SVG mask layer (multiple circles) CSS masking explained CSS Buttons Basic CSS buttons Button colors Button sizes Rounded buttons Colored button borders Hoverable buttons Shadow buttons Disabled buttons Button width Button groups Bordered button group Animated Button (Hover Effect) Animated Button (Ripple Effect) Animated Button (Pressed Effect) CSS buttons explained CSS Pagination A Simple pagination Pagination with an active class Pagination with a disabled class Pagination with hover effect Pagination with transition effect on hover Breadcrumb Pagination CSS pagination explained CSS Multiple Columns Create multiple columns Specify the gap between columns Specify the style of the rule between columns Specify the width of the rule between columns Specify the color of the rule between columns Specify the width, style and color of the rule between columns Specify how many columns an element should span across Specify a suggested, optimal width for the columns CSS multiple columns explained CSS User Interface Let a user resize the width of an element Let a user resize the height of an element Let a user resize both the width and height of an element Add space between an outline and the border of an element CSS user interface explained CSS Variables Using the var() function Override global variable with local variable Add new local variable Get and change variable with JavaScript Change variables in media queries CSS variables explained CSS @property Rule Simple use of @property Override the custom property Type checking and fallback value of @property Inherit value (fale) of @property Inherit value (true) of @property Use @property to animate a gradient CSS @property explained CSS Box Sizing Width of elements without box-sizing Width of elements with box-sizing Form elements + box-sizing CSS box sizing explained CSS Media Queries Change the background-color to lightgreen if the viewport is 480px wide or wider Show a menu that will float to the left of the page if the viewport is 480px wide or wider CSS media queries explained CSS Media Queries - More Examples Set different background colors depending on screen width Responsive columns using flexbox Responsive navigation menu Hide elements with media queries Responsive font size Change background-color if screen orientation is landscape Respect user preferences with media query Responsive image gallery Responsive website CSS media queries examples explained CSS Flexbox Flexbox with three flex items flex-direction - row flex-direction - column flex-direction - row-reverse flex-direction - column-reverse flex-wrap - nowrap flex-wrap - wrap flex-wrap - wrap-reverse flex-flow justify-content - center justify-content - flex-start justify-content - flex-end justify-content - space-around justify-content - space-between justify-content - space-evenly align-items - center align-items - flex-start align-items - flex-end align-items - stretch align-items - baseline align-content - center align-content - flex-start align-content - flex-end align-content - space-between align-content - space-around align-content - space-evenly Perfect centering CSS flexbox explained CSS Flex Items Order the flex items flex-grow property flex-shrink property flex-basis property flex property flex-basis property align-self - center align-self - flex-start and flex-end CSS flex items explained CSS Flexbox Responsive Responsive flexbox Responsive flexbox 2 Responsive image gallery with flexbox Create a responsive website with flexbox CSS flexbox responsive explained CSS Grid Intro Grid layout Grid container and grid items CSS grid intro explained CSS Grid Container Grid container display: grid display: inline-grid CSS grid container explained CSS Grid Tracks grid-template-columns: auto grid-template-columns mixed grid-template-columns: fr unit grid-template-columns fr unit 2 grid-template-columns: repeat() grid-template-columns: minmax() The grid-template-rows property CSS grid tracks explained CSS Grid Gaps column-gap property row-gap property gap property - One value gap property - Two values CSS grid gaps explained CSS Grid Align justify-content: space-evenly justify-content: space-around justify-content: space-between justify-content: center justify-content: start justify-content: end align-content: center align-content: space-evenly align-content: space-around align-content: space-between align-content: start align-content: end place-content: center place-content: end space-between CSS grid align explained CSS Grid Spanning Items A five items grid layout The grid-column-start and grid-column-end properties The grid-column property The grid-row-start and grid-row-end properties The grid-row property CSS grid item explained CSS Grid Naming Items Using grid-area to name grid items 1 Using grid-area to name grid items 2 Using grid-area to name grid items 3 Using grid-area to name grid items 4 CSS grid naming items explained CSS Grid Aligning Items The justify-self property The align-self property CSS grid align items explained CSS Grid Order Items Set the visual order of the grid items CSS grid order items explained CSS 12-column Grid Layout A responsive 12-column Grid layout CSS 12-column grid layout explained CSS @supports Rule @supports - fallback styling for flex @supports - fallback styling for grid CSS @supports rule explained CSS Responsive Webdesign Responsive grid view Responsive grid view with breakpoints Typical breakpoints Media query orientation: portrait / landscape Hide elements on different screen sizes Change font size on different screen sizes Respect user preferences Responsive image: width property Responsive image: max-width property Responsive image on responsive webpage Background image and background-size: contain Background image and background-size: 100% 100% Background image and background-size: cover Change background image depending on browser width Change background image with HTML picture element Responsive video: width property Responsive video: max-width property Responsive video on responsive webpage Responsive framework: W3.CSS Responsive framework: Bootstrap CSS responsive webdesign explained ★ +1 Sign in to track progress

CSS Templates CSS Layout Templates We have created some responsive starter templates with CSS. You are free to modify, save, share, and use them in all your projects. Header, equal columns and footer: Try it (using float) » Try it (using flexbox) » Try it (using grid) » Header, unequal columns and footer: Try it (using float) » Try it (using flexbox) » Try it (using grid) » Topnav, content and footer: Try it Yourself » Sidenav and content: Try it Yourself » Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress

Sass Tutorial Learn Sass Sass is a CSS pre-processor. Sass reduces repetition of CSS and therefore saves time. Start learning Sass now » 🏁 Tip: Sign in to track your progress. Examples in Each Chapter Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result. Sass Example /* Define standard variables and values for website */ $bgcolor: lightblue; $textcolor: darkblue; $fontsize: 18px; /* Use the variables */ body { background-color: $bgcolor; color: $textcolor; font-size: $fontsize; } Run Example » Sass Function References At W3Schools you will find complete references of all Sass functions with syntax and examples. Sass String Functions Sass Numeric Functions Sass List Functions Sass Map Functions Sass Selector Functions Sass Introspection Functions Sass Color Functions ★ +1 Sign in to track progress

Responsive Web Design - Templates W3.CSS Web Site Templates We have created some responsive templates with the W3.CSS framework. You are free to modify, save, share, and use them in all your projects. Tip: All templates below can be hosted with W3Schools Spaces. Band Template Demo Try it Yourself Art Template Demo Try it Yourself Architect Template Demo Try it Yourself Coming Soon Template Demo Try it Yourself Blog Template Demo Try it Yourself Food Blog Template Demo Try it Yourself Fashion Blog Template Demo Try it Yourself Gourmet Catering Template Demo Try it Yourself CV Template Demo Try it Yourself Wedding Invitation Template Demo Try it Yourself Photo Template Demo Try it Yourself Black & White Photo Template Demo Try it Yourself Photo III Template Demo Try it Yourself Nature Portfolio Template Demo Try it Yourself People Portfolio Template Demo Try it Yourself People Portfolio II Template Demo Try it Yourself Dark Portfolio Template Demo Try it Yourself Black & White Portfolio Template Demo Try it Yourself Parallax Template Demo Try it Yourself Clothing Store Template Demo Try it Yourself Interior Design Template Demo Try it Yourself Cafe Template Demo Try it Yourself Pizza Restaurant Template Demo Try it Yourself Modal Restaurant Template Demo Try it Yourself Start Page Template Demo Try it Yourself Startup Template Demo Try it Yourself App Launch Template Demo Try it Yourself Marketing Template Demo Try it Yourself Marketing / Website Template Demo Try it Yourself Web Page Template Demo Try it Yourself Social Media Template Demo Try it Yourself Analytics Template Demo Try it Yourself Apartment Rental Template Demo Try it Yourself Hotel Template Demo Try it Yourself Travel Template Demo Try it Yourself Travel Agency Template Demo Try it Yourself House Design Template Demo Try it Yourself Screen 50/50 Template Demo Try it Yourself Mail Template Demo Try it Yourself Kitchen Sink/Demo Template Black Red Teal Try it Yourself ★ +1 Sign in to track progress

Responsive Web Design - Frameworks There are many free CSS Frameworks that offer Responsive Design. Using W3.CSS A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS W3.CSS makes it easy to develop sites that look nice at any size! W3.CSS Demo Resize the page to see the responsiveness! London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants. Tokyo Tokyo is the capital of Japan. It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. Example <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container w3-blue"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </body> </html> Try it Yourself » To learn more about W3.CSS, read our W3.CSS Tutorial. Bootstrap Another popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages: Example <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html> Try it Yourself » To learn more about Bootstrap, go to our Bootstrap Tutorial. Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress

Responsive Web Design - Videos Using The width Property If the width property is set to 100%, the video player will be responsive and scale up and down: Example video { width: 100%; height: auto; } Try it Yourself » Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. Using The max-width Property If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size: Example video { max-width: 100%; height: auto; } Try it Yourself » Add a Video to the Example Web Page We want to add a video in our example web page. The video will be resized to always take up all the available space: Example video { width: 100%; height: auto; } Try it Yourself » ★ +1 Sign in to track progress

Responsive Web Design - Images Resize the browser window to see how the image scales to fit the page. Using The width Property If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down: Example img { width: 100%; height: auto; } Try it Yourself » Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. Using The max-width Property If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size: Example img { max-width: 100%; height: auto; } Try it Yourself » Add an Image to The Example Web Page Example img { width: 100%; height: auto; } Try it Yourself » Background Images Background images can also respond to resizing and scaling. Here we will show three different methods: 1. Using background-size: contain;: The background image will scale up and down, and tries to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height): Example Using background-size: contain;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid black; } Try it Yourself » 2. Using background-size: 100% 100%;: The background image will stretch to cover the entire content area: Example Using background-size: 100% 100%;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid black; } Try it Yourself » 3. Using background-size: cover;: The background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped: Example Using background-size: cover;: div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-size: cover; border: 1px solid black; } Try it Yourself » Different Images for Different Devices A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices. Example /* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } } Try it Yourself » The HTML <picture> Element The HTML <picture> element gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for images used in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport. The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used: Example <picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture> Try it Yourself » The srcset attribute is required, and defines the source of the image. The media attribute is optional, and accepts the media queries you find in CSS @media rule. You should also define an <img> element for browsers that do not support the <picture> element. Responsive Image Gallery Here, we use media queries together with flexbox to create a responsive image gallery: Example Try it Yourself » ★ +1 Sign in to track progress