HTML5 & CSS3 https://html5andcss3.org/ Tools and Tutorials Thu, 02 Apr 2026 14:05:08 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://html5andcss3.org/wp-content/uploads/2025/10/cropped-html5_and_css3_favicon-32x32.png HTML5 & CSS3 https://html5andcss3.org/ 32 32 noTools and Tutorials CSS Width and Height https://html5andcss3.org/tutorials/css/css-width-and-height/ https://html5andcss3.org/tutorials/css/css-width-and-height/#respond Thu, 02 Apr 2026 14:05:08 +0000 https://html5andcss3.org/?p=3665 The CSS Width and Height properties are used to define the size of an HTML element. These properties help in designing layouts and controlling how elements appear on a webpage. πŸ‘‰ This sets the element width to 200px and height to 100px. Attributes Property Description Example width Sets element width width: 300px; height Sets element […]

The post CSS Width and Height appeared first on HTML5 & CSS3.

]]>

The CSS Width and Height properties are used to define the size of an HTML element.

  • Width β†’ controls the horizontal size
  • Height β†’ controls the vertical size

These properties help in designing layouts and controlling how elements appear on a webpage.

Syntax
selector {
    width: value;
    height: value;
}
Example
div {
    width: 200px;
    height: 100px;
}

πŸ‘‰ This sets the element width to 200px and height to 100px.

Attributes

PropertyDescriptionExample
widthSets element widthwidth: 300px;
heightSets element heightheight: 150px;
max-widthSets maximum widthmax-width: 100%;
min-widthSets minimum widthmin-width: 200px;
max-heightSets maximum heightmax-height: 400px;

Example

Complete CSS Width and Height Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Width and Height</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: lightblue;
            padding: 10px;
            border: 2px solid black;
        }

        img {
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>

    <div>This box has fixed width and height.</div>

    <img src="image.jpg" alt="Sample Image">

</body>
</html>

Output

Browser Output

The <div> will appear as a fixed-size box (300px Γ— 150px)
The box will have background color, padding, and border
The image will have a fixed width and proportional height

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Width and height can be set using:
    • px (pixels)
    • % (percentage)
    • auto (default)
  • height: auto maintains aspect ratio for images
  • Use max-width: 100% for responsive design
  • Padding and border can affect total size (box model)
  • Avoid fixed heights for flexible layouts

Conclusion

CSS Width and Height properties are essential for controlling element size and layout. When used properly, they help create responsive and well-structured web designs.

The post CSS Width and Height appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-width-and-height/feed/ 0 CSS Outline https://html5andcss3.org/tutorials/css/css-outline/ https://html5andcss3.org/tutorials/css/css-outline/#respond Thu, 02 Apr 2026 14:00:11 +0000 https://html5andcss3.org/?p=3663 The CSS Outline property is used to draw a line outside an element’s border. It is similar to a border, but with some key differences: πŸ‘‰ This adds a 2px red outline outside the element. Attributes Property Description Example outline Sets all outline properties outline: 2px solid black; outline-width Sets thickness of outline outline-width: 3px; […]

The post CSS Outline appeared first on HTML5 & CSS3.

]]>

The CSS Outline property is used to draw a line outside an element’s border.

It is similar to a border, but with some key differences:

  • It does not take up space (does not affect layout)
  • It appears outside the border
  • It is often used for highlighting elements, especially for focus states
Syntax
selector {
    outline: width style color;
}
Example
p {
    outline: 2px solid red;
}

πŸ‘‰ This adds a 2px red outline outside the element.

Attributes

PropertyDescriptionExample
outlineSets all outline propertiesoutline: 2px solid black;
outline-widthSets thickness of outlineoutline-width: 3px;
outline-styleDefines outline styleoutline-style: dashed;
outline-colorSets outline coloroutline-color: red;
outline-offsetAdds space between border and outlineoutline-offset: 5px;

Example

Complete CSS Outline Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline Example</title>
    <style>
        div {
            border: 2px solid blue;
            outline: 3px dashed red;
            outline-offset: 5px;
            padding: 10px;
        }

        p {
            outline: 2px solid green;
        }
    </style>
</head>
<body>

    <div>This div has both border and outline.</div>

    <p>This paragraph has an outline.</p>

</body>
</html>

Output

Browser Output

The <div> will have:
A blue border
A red dashed outline outside the border
The <p> will have a green outline
The outline will not affect spacing between elements

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Outline does not take up space (unlike border)
  • It is drawn outside the border
  • Commonly used for focus effects (e.g., input fields)
  • Supports outline-offset for spacing
  • Cannot apply different outlines to each side

Conclusion

CSS Outline is a useful property for highlighting elements without affecting layout. It is especially helpful for accessibility and focus styling, making it an important part of modern web design.

The post CSS Outline appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-outline/feed/ 0 CSS Border https://html5andcss3.org/tutorials/css/css-border/ https://html5andcss3.org/tutorials/css/css-border/#respond Thu, 02 Apr 2026 13:55:45 +0000 https://html5andcss3.org/?p=3661 The CSS Border property is used to define the outline around an HTML element. It helps in visually separating elements and improving layout structure by adding lines around content. A border consists of three main parts: πŸ‘‰ This adds a 2px solid red border around all <p> elements. Attributes Property Description Example border Sets all […]

The post CSS Border appeared first on HTML5 & CSS3.

]]>

The CSS Border property is used to define the outline around an HTML element.

It helps in visually separating elements and improving layout structure by adding lines around content.

A border consists of three main parts:

  • Width (thickness)
  • Style (solid, dashed, etc.)
  • Color
Syntax
selector {
    border: width style color;
}
Example
p {
    border: 2px solid red;
}

πŸ‘‰ This adds a 2px solid red border around all <p> elements.

Attributes

PropertyDescriptionExample
borderSets all border propertiesborder: 1px solid black;
border-widthSets border thicknessborder-width: 2px;
border-styleDefines border styleborder-style: dashed;
border-colorSets border colorborder-color: red;
border-radiusRounds the corners of borderborder-radius: 10px;

Example

Complete CSS Border Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Border Example</title>
    <style>
        div {
            border: 2px solid blue;
            padding: 10px;
        }

        p {
            border: 1px dashed red;
            padding: 10px;
        }

        h1 {
            border: 3px solid black;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>Border Example</h1>

    <div>This is a div with solid border.</div>

    <p>This paragraph has dashed border.</p>

</body>
</html>

Output

Browser Output

The heading will have a solid black border with rounded corners
The <div> will have a blue solid border
The <p> will have a red dashed border
Padding will create space inside the borders

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Border requires at least style to be visible
  • You can set borders individually:
    • border-top, border-right, border-bottom, border-left
  • border-radius is used for rounded corners
  • Borders increase the total size of an element
  • Works together with margin and padding

Conclusion

CSS Border is essential for defining element boundaries and enhancing visual structure. By customizing width, style, and color, you can create clean and attractive layouts.

The post CSS Border appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-border/feed/ 0 CSS Padding https://html5andcss3.org/tutorials/css/css-padding/ https://html5andcss3.org/tutorials/css/css-padding/#respond Thu, 02 Apr 2026 13:50:59 +0000 https://html5andcss3.org/?p=3659 The CSS Padding property is used to create space inside an element, between the content and its border. It helps improve readability and design by adding inner spacing, making content look less crowded. πŸ‘‰ In simple terms:Margin = outside spacingPadding = inside spacing πŸ‘‰ This adds 20px space inside the element on all sides. Attributes […]

The post CSS Padding appeared first on HTML5 & CSS3.

]]>

The CSS Padding property is used to create space inside an element, between the content and its border.

It helps improve readability and design by adding inner spacing, making content look less crowded.

πŸ‘‰ In simple terms:
Margin = outside spacing
Padding = inside spacing

Syntax
selector {
    padding: value;
}
Example
p {
    padding: 20px;
}

πŸ‘‰ This adds 20px space inside the element on all sides.

Attributes

PropertyDescriptionExample
paddingSets padding on all sidespadding: 10px;
padding-topSets top paddingpadding-top: 20px;
padding-rightSets right paddingpadding-right: 15px;
padding-bottomSets bottom paddingpadding-bottom: 25px;
padding-leftSets left paddingpadding-left: 10px;

Example

Complete CSS Padding Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Padding Example</title>
    <style>
        div {
            background-color: lightblue;
            padding: 20px;
            border: 2px solid black;
        }

        p {
            background-color: yellow;
            padding-left: 30px;
        }
    </style>
</head>
<body>

    <div>This is a div with padding.</div>

    <p>This paragraph has left padding.</p>

</body>
</html>

Output

Browser Output

The <div> will have space inside it (20px on all sides)
The content inside the div will not touch the border
The <p> will have extra space on the left side
Overall layout will look more spaced and readable

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Padding creates space inside the element
  • It increases the total size of the element
  • Supports shorthand:
    • padding: 10px 20px;
    • padding: 10px 15px 20px 25px;
  • Background color is visible in padding area Works together with border and margin in the box model

Conclusion

CSS Padding is crucial for improving content spacing and readability. By adding space inside elements, it enhances design clarity and ensures a better user experience.

The post CSS Padding appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-padding/feed/ 0 CSS Margin https://html5andcss3.org/tutorials/css/css-margin/ https://html5andcss3.org/tutorials/css/css-margin/#respond Thu, 02 Apr 2026 13:46:22 +0000 https://html5andcss3.org/?p=3657 The CSS Margin property is used to create space outside an element’s border.It controls the distance between an element and surrounding elements, helping to create proper layout and spacing on a webpage. Margins are transparent and do not have a background color. πŸ‘‰ This adds 20px space on all sides of the paragraph. Attributes Property […]

The post CSS Margin appeared first on HTML5 & CSS3.

]]>

The CSS Margin property is used to create space outside an element’s border.
It controls the distance between an element and surrounding elements, helping to create proper layout and spacing on a webpage.

Margins are transparent and do not have a background color.

Syntax
selector {
    margin: value;
}
Example
p {
margin: 20px;
}

πŸ‘‰ This adds 20px space on all sides of the paragraph.

Attributes

PropertyDescriptionExample
marginSets margin on all sidesmargin: 10px;
margin-topSets top marginmargin-top: 20px;
margin-rightSets right marginmargin-right: 15px;
margin-bottomSets bottom marginmargin-bottom: 25px;
margin-leftSets left marginmargin-left: 10px;

Example

Complete CSS Margin Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Margin Example</title>
    <style>
        div {
            background-color: lightblue;
            margin: 20px;
            padding: 10px;
        }

        p {
            background-color: yellow;
            margin-top: 30px;
        }
    </style>
</head>
<body>

    <div>This is a div with margin.</div>

    <p>This paragraph has top margin.</p>

</body>
</html>

Output

Browser Output

The <div> will have space around it (20px on all sides)
The <p> will have extra space above it (30px)
Elements will not touch each other due to margin spacing

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Margin creates space outside the element
  • It is different from padding (which is inside spacing)
  • You can set margin for individual sides Supports shorthand values:
    • margin: 10px 20px; (top-bottom, left-right)
    • margin: 10px 15px 20px 25px; (top, right, bottom, left)
  • Margin can be set to auto for centering elements

Conclusion

CSS Margin is essential for controlling layout spacing between elements. It helps create clean, organized designs by ensuring proper distance and alignment across different parts of a webpage.

The post CSS Margin appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-margin/feed/ 0 CSS Background Image https://html5andcss3.org/tutorials/css/css-background-image/ https://html5andcss3.org/tutorials/css/css-background-image/#respond Wed, 01 Apr 2026 14:27:37 +0000 https://html5andcss3.org/?p=3620 The CSS Background Image property is used to set an image as the background of an HTML element. It allows you to enhance the visual design of a webpage by adding images behind content such as: You can also control how the image behaves using additional background properties. πŸ‘‰ This sets an image as the […]

The post CSS Background Image appeared first on HTML5 & CSS3.

]]>

The CSS Background Image property is used to set an image as the background of an HTML element.

It allows you to enhance the visual design of a webpage by adding images behind content such as:

  • Entire page (body)
  • Sections (div)
  • Headers

You can also control how the image behaves using additional background properties.

Syntax
selector {
    background-image: url("image.jpg");
}
Example
body {
    background-image: url("background.jpg");
}

πŸ‘‰ This sets an image as the background of the page.

Attributes

PropertyDescriptionExample
background-imageSets background imagebackground-image: url(“img.jpg”);
background-repeatControls image repetitionbackground-repeat: no-repeat;
background-sizeDefines image sizebackground-size: cover;
background-positionSets image positionbackground-position: center;
background-attachmentDefines scrolling behaviorbackground-attachment: fixed;

Example

Complete CSS Example for Background Image
<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Image</title>
    <style>
        body {
            background-image: url("https://picsum.photos/500/500?grayscale");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        h1 {
            color: white;
            text-align: center;
        }
        p {
            color: yellow;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>Background Image Example</h1>
    <p>This page uses a background image.</p>

</body>
</html>

Output

Browser Output

The page will display a full-screen background image
The image will not repeat
The image will be centered and cover the entire screen
Text will appear on top of the image

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Always use url() to define the image path
  • Use background-size: cover for full-screen effect
  • Use no-repeat to prevent image repetition
  • Ensure text is readable over the background image
  • Optimize images for faster page loading

Conclusion

CSS Background Image allows you to create visually rich and engaging web pages. By combining it with other background properties, you can control how images appear and behave, resulting in professional and modern designs.

The post CSS Background Image appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-background-image/feed/ 0 CSS Background Color https://html5andcss3.org/tutorials/css/css-background-color/ https://html5andcss3.org/tutorials/css/css-background-color/#respond Wed, 01 Apr 2026 14:17:37 +0000 https://html5andcss3.org/?p=3615 The CSS Background Color property is used to set the background color of an HTML element. It helps improve the visual appearance of a webpage and can be applied to elements like: Using background colors effectively enhances readability and design layout. πŸ‘‰ This sets the background color of the entire page. Attributes Property Description Example […]

The post CSS Background Color appeared first on HTML5 & CSS3.

]]>

The CSS Background Color property is used to set the background color of an HTML element.

It helps improve the visual appearance of a webpage and can be applied to elements like:

  • Body
  • Headings
  • Paragraphs
  • Div containers

Using background colors effectively enhances readability and design layout.

Syntax
selector {
    background-color: value;
}
Example
body {
   background-color: lightblue;
}

πŸ‘‰ This sets the background color of the entire page.

Attributes

PropertyDescriptionExample
background-colorSets background colorbackground-color: yellow;
colorSets text colorcolor: black;
borderAdds border to elementborder: 1px solid black;
paddingAdds inner spacingpadding: 10px;

Example

Complete Background Color Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Color</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            background-color: lightblue;
            color: black;
        }
        p {
            background-color: yellow;
        }
        div {
            background-color: pink;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <h1>Background Color Example</h1>
    <p>This paragraph has a yellow background.</p>
    <div>This is a div with pink background.</div>

</body>
</html>

Output

Browser Output

The page will have a light gray background
The heading will have a light blue background
The paragraph will have a yellow background
The div will have a pink background with border and padding

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • Use background-color to set solid background colors
  • Can use color formats like name, HEX, RGB
  • Helps improve contrast and readability
  • Avoid using very bright or clashing colors
  • Combine with text color for better accessibility

Conclusion

The CSS Background Color property is essential for designing visually appealing web pages. It allows you to highlight sections, improve readability, and create a structured layout using colors effectively.

The post CSS Background Color appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-background-color/feed/ 0 CSS RGB Colors https://html5andcss3.org/tutorials/css/css-rgb-colors/ https://html5andcss3.org/tutorials/css/css-rgb-colors/#respond Wed, 01 Apr 2026 14:05:17 +0000 https://html5andcss3.org/?p=3609 RGB colors in CSS are used to define colors using the Red, Green, and Blue color model. Each color value ranges from 0 to 255, where: The combination of these three values creates a wide range of colors. For example: πŸ‘‰ This sets the text color to red using RGB format. Attributes Property Description Example […]

The post CSS RGB Colors appeared first on HTML5 & CSS3.

]]>

RGB colors in CSS are used to define colors using the Red, Green, and Blue color model.

Each color value ranges from 0 to 255, where:

  • 0 means no intensity
  • 255 means full intensity

The combination of these three values creates a wide range of colors.

For example:

  • rgb(255, 0, 0) β†’ Red
  • rgb(0, 255, 0) β†’ Green
  • rgb(0, 0, 255) β†’ Blue
Syntax
selector {
    color: rgb(red, green, blue);
}
Example
p {
color: rgb(255, 0, 0);
}

πŸ‘‰ This sets the text color to red using RGB format.

Attributes

PropertyDescriptionExample
colorSets text colorcolor: rgb(0, 0, 255);
background-colorSets background colorbackground-color: rgb(240, 240, 240);
border-colorSets border colorborder-color: rgb(255, 0, 0);
outline-colorSets outline coloroutline-color: rgb(0, 255, 0);

Example

Complete CSS RGB Color Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS RGB Colors</title>
    <style>
        body {
            background-color: rgb(240, 240, 240);
        }
        h1 {
            color: rgb(0, 0, 255);
        }
        p {
            color: rgb(0, 128, 0);
        }
        div {
            border: 2px solid rgb(255, 0, 0);
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>RGB Color Example</h1>
    <p>This paragraph uses RGB color.</p>
    <div>This box has a red border using RGB.</div>

</body>
</html>

Output

Browser Output

The page will have a light gray background
The heading will appear in blue (rgb(0, 0, 255))
The paragraph will appear in green (rgb(0, 128, 0))
The box will have a red border (rgb(255, 0, 0))

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • RGB values range from 0 to 255 Allows precise control over colors
  • You can also use rgba() to add transparency Example: rgba(255, 0, 0, 0.5)
  • Easier to adjust colors dynamically compared to HEX
  • Widely supported across all browsers

Conclusion

RGB colors offer a flexible and powerful way to define colors in CSS. With precise control over red, green, and blue values, developers can create a wide variety of colors and even add transparency for modern web designs.

The post CSS RGB Colors appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-rgb-colors/feed/ 0 CSS HEX Colors https://html5andcss3.org/tutorials/css/css-hex-colors/ https://html5andcss3.org/tutorials/css/css-hex-colors/#respond Wed, 01 Apr 2026 13:51:18 +0000 https://html5andcss3.org/?p=3607 HEX (Hexadecimal) colors are a popular way to define colors in CSS using a 6-digit combination of numbers and letters. A HEX color starts with a hash (#) followed by values representing Red, Green, and Blue (RGB). Each pair controls the intensity of a color: For example: πŸ‘‰ This sets the text color to red […]

The post CSS HEX Colors appeared first on HTML5 & CSS3.

]]>

HEX (Hexadecimal) colors are a popular way to define colors in CSS using a 6-digit combination of numbers and letters.

A HEX color starts with a hash (#) followed by values representing Red, Green, and Blue (RGB).

Each pair controls the intensity of a color:

  • #RRGGBB

For example:

  • #FF0000 β†’ Red
  • #00FF00 β†’ Green
  • #0000FF β†’ Blue
Syntax
selector {
    color: #RRGGBB;
}
Example
p {
color: #ff0000;
}

πŸ‘‰ This sets the text color to red using HEX value.

Attributes

PropertyDescriptionExample
colorSets text colorcolor: #0000ff;
background-colorSets background colorbackground-color: #f0f0f0;
border-colorSets border colorborder-color: #ff0000;
outline-colorSets outline coloroutline-color: #00ff00;

Example

CSS Hex Colors Complete Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS HEX Colors</title>
    <style>
        body {
            background-color: #f2f2f2;
        }

        h1 {
            color: #0000ff;
        }

        p {
            color: #008000;
        }

        div {
            border: 2px solid #ff0000;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>HEX Color Example</h1>

    <p>This paragraph uses HEX color.</p>

    <div>This box has a red border using HEX.</div>

</body>
</html>

Output

Browser Output

The page will have a light gray background
The heading will appear in blue (#0000ff)
The paragraph will appear in green (#008000)
The box will have a red border (#ff0000)

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • HEX values range from 00 to FF (0–255 in decimal)
  • You can use shorthand HEX values like #fff (for #ffffff)
  • HEX is widely used in web design for precise color control
  • Case-insensitive (#FF0000 = #ff0000)
  • Easy to copy and reuse across projects

Conclusion

HEX colors provide a precise and widely accepted way to define colors in CSS. They are essential for consistent and professional web design, allowing developers to control colors accurately across different elements.

The post CSS HEX Colors appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-hex-colors/feed/ 0 CSS Colors https://html5andcss3.org/tutorials/css/css-colors/ https://html5andcss3.org/tutorials/css/css-colors/#respond Wed, 01 Apr 2026 13:44:24 +0000 https://html5andcss3.org/?p=3605 CSS Colors are used to define the color of text, backgrounds, borders, and other elements on a webpage. Colors play a very important role in web design as they improve visual appearance, readability, and user experience. In CSS, colors can be applied using different formats such as: πŸ‘‰ This sets the text color of all […]

The post CSS Colors appeared first on HTML5 & CSS3.

]]>

CSS Colors are used to define the color of text, backgrounds, borders, and other elements on a webpage.

Colors play a very important role in web design as they improve visual appearance, readability, and user experience.

In CSS, colors can be applied using different formats such as:

  • Color names (e.g., red, blue)
  • HEX values
  • RGB values
CSS Colors Syntax
selector {
    color: value;
}
CSS Colors Example
p {
color: red;
}

πŸ‘‰ This sets the text color of all <p> elements to red.

Attributes

PropertyDescriptionExample
colorSets text colorcolor: blue;
background-colorSets background colorbackground-color: yellow;
border-colorSets border colorborder-color: black;
outline-colorSets outline coloroutline-color: red;

Example

CSS Colors Complete Example
<!DOCTYPE html>
<html>
<head>
    <title>CSS Colors Example</title>
    <style>
        body {
            background-color: lightgray;
        }

        h1 {
            color: blue;
        }

        p {
            color: green;
        }

        div {
            border: 2px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>CSS Colors</h1>

    <p>This is a paragraph with green text.</p>

    <div>This box has a red border.</div>

</body>
</html>

Output

Browser Output

The page will have a light gray background
The heading will appear in blue color
The paragraph will appear in green color
The box will have a red border

Browser Support

Chrome
Chrome		Firefox
Firefox		Edge
Edge		Safari
Safari		Opera
Opera		IE
IE9+
βœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yesβœ…Yes

Notes

  • CSS supports multiple color formats (name, HEX, RGB)
  • Use color for text and background-color for backgrounds
  • Choose colors carefully for better readability and accessibility
  • Avoid using too many colors to keep design clean
  • Use consistent color schemes for better UI/UX

Conclusion

CSS Colors are essential for making web pages visually appealing and user-friendly. By using different color properties, you can enhance design, highlight important elements, and improve the overall user experience.

The post CSS Colors appeared first on HTML5 & CSS3.

]]> https://html5andcss3.org/tutorials/css/css-colors/feed/ 0