Movatterモバイル変換

Search field

×

Sign In

★+1 Get Certified Upgrade For Teachers Spaces Get Certified Upgrade For Teachers Spaces

❮

❯

CSSExamples

❮ Previous Next ❯

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 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 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

❮ Previous Next ❯

Sign in to track progress

Get Certified Black Week Offer

COLOR PICKER

colorpicker

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

Top Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
AngularJS Reference
jQuery Reference

Top Examples

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified

HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted ourterms of use,cookies andprivacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved.W3Schools is Powered by W3.CSS.

[8]ページ先頭

©2009-2025 Movatter.jp