CSS Examples
- Previous Page CSS Grid Item
- Next Page CSS Quiz
CSS Selectors
CSS Usage
CSS Colors
CSS Background
- Set the background color of the page
- Set the background color for different elements
- Set the image as the page background
- How to repeat the background image only horizontally
- How to position the background image
- Fixed background image (the image will not scroll with the rest of the page)
- All background properties in one declaration
- Advanced background example
CSS Borders
- Set the width of all 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 all 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 all 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 border properties in one declaration
- Add rounded corners to the element
- Set different borders for each side
- All top border properties in one declaration
- All bottom border properties in one declaration
- All left border properties in one declaration
- All right border properties in one declaration
CSS Margins
- Specify different margins for each side of an element
- Use a shorthand margin property with four values
- Use a shorthand margin property with three values
- Use a shorthand margin property with two values
- Use a shorthand margin property with one value
- Set the margin to auto to center the element within its container
- Inherit the left margin from the parent element
- Margin collapsing
CSS Padding
- Specify different paddings for each side of an element
- Use a shorthand padding with four values
- Use a shorthand padding with three values
- Use a shorthand padding with two values
- Use a shorthand padding with one value
- Padding and element width (do not set box-sizing)
- Padding and element width (set box-sizing)
- Set the left padding of an element
- Set the right padding of an element
- Set the top padding of an element
- Set the bottom padding of an element
CSS Height/Width
CSS Box Model
CSS Outline
CSS Text
- Set the text color of different elements
- Align text
- Remove the line under the link
- Decorate text
- Control the case of letters in text
- Indent text
- Specify character spacing
- Specify line spacing
- Set the text direction of the element
- Increase letter spacing
- Specify the text shadow of the element
- Disable text wrapping within elements
- Align images within text vertically
CSS Fonts
CSS Links
CSS Lists
CSS Tables
- Specify black borders for table, th, and td elements
- Use border-collapse
- Single border around the table
- Specify the width and height of the table
- Set the horizontal alignment of the content (text-align)
- Set the vertical alignment of the content
- Specify the padding of the th and td elements
- Horizontal rule
- Hoverable tables
- Striped tables
- Specify the color of the table border
- Set the position of the table title
- Responsive tables
- Create beautiful tables
CSS display
CSS positioning
- Place elements relative to the browser window
- Place elements relative to the normal position of the element
- Position elements using absolute values
- Sticky positioning
- Overlap elements
- Set the shape of the element
- Set the top edge of the image using pixel values
- Set the bottom edge of the image using pixel values
- Setting the left edge of the image using pixel values
- Setting the right edge of the image using pixel values
- Positioning image text (upper left corner)
- Positioning image text (upper right corner)
- Positioning image text (lower left corner)
- Positioning image text (lower right corner)
- Positioning image text (centered)
CSS Overflow
- Using overflow: visible - Content is not clipped. It is rendered outside the element box.
- Using overflow: hidden - Content is clipped, and the rest of the content is hidden.
- Using overflow: scroll - Content is clipped, but a scrollbar is added to view the rest of the content.
- Using overflow: auto - If content is clipped, add a scrollbar to view the rest of the content.
- Using overflow-x and overflow-y
CSS Floating
- Simple usage of the float property
- Floating an image with borders and margins to the right of the paragraph
- Floating an image with a title to the right
- Floating the first letter of a paragraph to the left
- Closing the float (using clear property)
- Closing the float (using clearfix hack)
- Creating a floating box
- Creating side-by-side images
- Creating equal-height boxes (through flexbox)
- Creating a horizontal menu
- Creating a web layout example
CSS Inline-block
CSS alignment of elements
- Centering through margins
- Centering text
- Centering images
- Left/right alignment through position
- Left/right alignment through position - Cross-browser solution
- Left/right alignment through float
- Left/right alignment through float - Cross-browser solution
- Vertical centering through padding
- Vertical and horizontal centering
- Vertical centering through line-height
- Vertical and horizontal centering through position
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Content Generation
CSS Opacity
CSS Navigation Bar
- Vertical Navigation Bar with Complete Style
- Horizontal Navigation Bar with Complete Style
- Full Height Fixed Vertical Navigation Bar
- Fixed Horizontal Navigation Bar
- Sticky Navigation Bar (Does Not Work in IE or Edge 15 and Earlier Versions)
- Responsive Top Navigation Bar
- Responsive Sidebar Navigation Bar
CSS Dropdown List
CSS Image Sprites
CSS Attribute Selectors
- Select All <a> Elements with Attribute target
- Select All <a> Elements with Attribute target="_blank"
- Select All Elements with Title Attribute Containing a Space-Separated List of Words, One of Which Is "flower"
- Select All Elements with Class Attribute Value Starting with "top" (Must Be the Whole Word)
- Select All Elements with Class Attribute Value Starting with "top" (Cannot Be the Whole Word)
- Select All Elements with Class Attribute Value Ending with "test"
- Select All Elements with Class Attribute Value Containing "te"
CSS Forms
CSS Website Layout
CSS Rounded Corners
CSS Border Images
CSS Background
- Add multiple background images to the element
- Specify the size of the background image
- Use "contain" and "cover" to scale the background image
- Define the size of the background image
- Full-size background image (completely covers the content area)
- Use background-origin to specify the position of the background image
- Use background-clip to specify the drawing area of the background
CSS Gradients
- Linear gradient - Top to bottom
- Linear gradient - Left to right
- Linear gradient - Diagonal
- Linear gradient - Specific angle
- Linear gradient - Multiple color stops
- Linear gradient - Rainbow color + text
- Linear gradient - Opacity
- Linear gradient - Repeated linear gradient
- Radial gradient - Uniformly distributed color stops
- Radial gradient - Color stops with different spacing
- Radial gradient - Set the shape
- Radial gradient - Different size keywords
- Radial gradient - Repeated radial gradient
CSS Shadow Effect
- Simple shadow effect
- Add color to the shadow
- Add blur effects to the shadow
- White text with black shadow
- Red neon glow shadow
- Red and blue neon glow shadows
- White text with black, blue, and dark blue shadows
- Add a simple box-shadow to the element
- Add color to the box-shadow
- Add color and blur effects to the box-shadow
- Create a card-like effect similar to paper cards (text)
- Create a card-like effect similar to paper cards (Polaroid images)
CSS Text Effects
CSS Web Font
CSS 2D Transformations
- translate() - Remove elements from the current position
- rotate() - Rotate elements clockwise
- rotate() - Rotate elements counterclockwise
- scale() - Enlarge Elements
- scale() - Reduce Elements
- skewX() - Skew Elements Along the X Axis
- skewY() - Skew Elements Along the Y Axis
- skew() - Skew Elements Along the X and Y Axes
- matrix() - Rotate, Scale, Move, and Skew Elements
CSS 3D Transformations
CSS Transitions
CSS Animations
- Bind Animation to an Element
- Animation - Change the Background Color of an Element
- Animation - Change the Background Color and Position of an Element
- Delayed Animation
- Run the Animation Three Times Before Stopping
- Always Animating
- Animating from the Opposite Direction
- Alternating Animation
- Animation Speed Curves
- Shorthand Properties for Animation
CSS Tooltips
Styled Image with CSS
- Rounded Image
- Circular Image
- Thumbnail
- Thumbnail as a Link
- Responsive Images
- Image Text (Top Left Corner)
- Image Text (Top Right Corner)
- Image Text (Lower Left Corner)
- Image Text (Top Right Corner)
- Image Text (Centered)
- Polaroid Image
- Grayscale Image Filter
- Advanced - Image Modal Implemented with CSS and JavaScript
CSS Object-fit
CSS Buttons
CSS Pagination
CSS Multi-column
- Create multi-column
- 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 the element should span
- Specify the recommended best width for the columns
CSS User Interface
CSS Variables
CSS Box Sizing
CSS Flexbox
- Flexbox with three flex items
- Flexbox with three flex items - rtl direction
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Flex item sorting
- Margin-right: auto;
- Margin: auto; = Perfect centering
- Set align-self on the flex item
- Specify the length of the flex item, relative to the rest of the flex item
- Create a responsive image gallery using the flexbox
- Create a responsive website using the flexbox
CSS Media Queries
CSS Media Queries - More Examples
- Set Different Background Colors Based on Screen Width
- Responsive Navigation Menu
- Responsive Columns Using Floats
- Responsive Columns Using Flexbox
- Hide Elements Through Media Queries
- Responsive Font Sizes
- Responsive Image Gallery
- Responsive Websites
- Change Page Layout Based on Browser Orientation
- From Minimum Width to Maximum Width
CSS Responsive Web Design
CSS Grid
- Previous Page CSS Grid Item
- Next Page CSS Quiz
