Skip to main content
codingCourses
  • HTML
  • CSS
  • JavaScript
  • PHP
  • CSS Tutorial
  • CSS Selectors
  • CSS Properties
  • Practical Tips
CSS
  • CSS Tutorial
  • Color Picker
    Pick a Color and Get its Code
  • Web Color Codes
    Color Palette for HTML and CSS
  • CSS Color Names
    Color Keywords for Web Design
  • rem and em Units
    Relative Length Units for Font Size
  • CSS Specificity
    Selector Order, Rules, and Cheat Sheet
  • !important Keyword
    Overriding Style Priority
  • CSS Variables
    How to Use Custom Properties in CSS
CSS Selectors
  • CSS Selector Reference
  • :first-child
    Select the First Child
  • :last-child
    Select the Last Child
  • :nth-child(n)
    Select the nth child
  • :nth-last-child(n)
    Select the nth Child Element from the End
  • :nth-of-type(n)
    Select the nth Child of the Same Tag
  • :nth-last-of-type(n)
    Select the nth-to-last Child of the Same Tag
  • :first-of-type
    Select the First Child of the Same Tag
  • :last-of-type
    Select the Last Child of the Same Tag
  • :only-of-type
    Select the Only Child of Its Tag Name
  • :focus-within
    Matches Focused Elements or Descendants
  • ::before
    Before Pseudo-Element Selector
  • ::after
    After Pseudo-Element Selector
  • ::marker
    Select Automatically Generated List Markers
  • ::placeholder
    Styling Placeholder Text
CSS Properties
  • CSS Property Reference
  • aspect-ratio
    Sets an Element's Width-to-Height Ratio
  • background-clip
    Specifying the Background Painting Area
  • background-origin
    Specifies the Background Positioning Area
  • box-shadow
    Applying Shadow Effects to Element Boxes
  • box-sizing
    Defines the Element's Sizing Calculation Model
  • caret-color
    Change Caret Color
  • content
    Specify Pseudo-Element Content
  • line-height
    Setting Line Spacing for Text
  • object-fit
    How to Fit Images and Videos Perfectly
  • object-position
    Positioning with object-fit
  • pointer-events
    Controlling Pointer Interactions
  • text-align
    Setting Horizontal Alignment for Text
  • text-decoration
    Shorthand for Text Decoration Styling
  • text-decoration-line
    Specifies Line Decoration Types
  • text-decoration-color
    Specifies the Color of Decorations
  • text-decoration-style
    Specifies the Line Style of Text Decorations
  • text-decoration-thickness
    Specifies the Thickness of Decorations
  • Underline Position and Offset Properties
    Setting Underline Position and Spacing
  • text-underline-position
    Specifies the Positional Basis of Underlines
  • text-underline-offset
    Adjusting Underline Offset
  • text-emphasis
    Shorthand for Text Emphasis Marks
  • text-emphasis-style
    Specifies the Shape of Emphasis Marks
  • text-emphasis-color
    Specifies the Color of Emphasis Marks
  • text-emphasis-position
    Specifies the Position of Emphasis Marks
  • text-overflow
    Setting a Single-Line Text Ellipsis (...)
  • text-shadow
    Applying Shadow Effects to Text
  • vertical-align
    Vertical Alignment: Inline Tags & Table-Cells
  • white-space
    Specifies White Space and Soft Wrapping
  • will-change
    A Hint for Rendering Optimization
  • word-break
    Rules for Breaking Words When Text Wraps
  • writing-mode
    Setting Text in Vertical Writing Mode
  • -webkit-line-clamp
    Setting a Multi-Line Text Ellipsis (…)
  • -webkit-text-stroke
    Styling the Stroke of Text
  • -webkit-text-stroke-color
    Specifies the Stroke Color of Text
  • -webkit-text-stroke-width
    Specifies the Stroke Width of Text
CSS Practical Tips
  • Practical Tip Reference
  • Centering with CSS - Text
    Centering Text Made Easy
  • Centering with CSS - Images
    Centering Images Made Easy
  • Centering with CSS - Elements
    Centering Elements Made Easy
  • List Marker Styling
    Examples and Customization Techniques
  • <details> Tag Styling
    Learn how to apply custom styles to <details>
  • Scrollbar Customization
    Overview of CSS Scrollbars

CSS Practical Tip Reference

CSS Next

This category offers practical tips and effective techniques for using CSS in real-world projects. Through various examples, you'll learn how to create the web styles you want with ease and refine your design skills

List of practical CSS tips
Centering with CSS - Text
Centering Text Made Easy
Learn how to center text using CSS with this beginner-friendly guide. It provides clear examples and practical tips for easy text alignment.
Centering with CSS - Images
Centering Images Made Easy
Learn how to center images using CSS with this beginner-friendly guide. It offers clear examples and practical tips for easy horizontal and vertical image alignment.
Centering with CSS - Elements
Centering Elements Made Easy
Learn how to center elements using CSS! This beginner-friendly guide focuses on div and other layout elements, providing clear examples and practical tips for horizontal and vertical alignment.
List Marker Styling
Examples and Customization Techniques
This article introduces various ways to style list markers using CSS, including examples, customization techniques, and usage of the list-style-type property.
<details> Tag Styling
Learn how to apply custom styles to <details>
Discover how to apply custom CSS styles to the HTML <details> and <summary> tags. Learn techniques such as removing the default marker, building an accordion, and adding smooth animation effects.
Scrollbar Customization
Overview of CSS Scrollbars
Learn how to style scrollbars to match your own design. By applying CSS, you can create a custom scrollbar with your unique style.
CSS Next

codingCourses offers coding tutorials made for everyone.
All materials and examples are continuously reviewed to prevent errors; however, complete accuracy cannot be guaranteed.
Therefore, please carefully test and review all materials and examples to ensure they are free of errors, bugs, or vulnerabilities before relying on them.
They are available under the Creative Commons Attribution 4.0 International

Copyright © codingCourses. All Rights Reserved.