Philip: /* Other Articles About CSS */

2025-02-12T22:18:28Z

Philip: Created page with "{{Programming |name = CSS: color |image = Css.png |image size = 300 |portal = CSS Portal • Web Developers Portal }} '''The "color" property''' in CSS defines the text color of an element. It is used to style text and supports both simple color names and more complex formats such as RGB, HEX, HSL, and others. This is one of the most fundamental and frequently used properties in web development. == Color Formats == The `colo..."`


2025-01-23T12:38:39Z
Created page with "{{Programming |name = CSS: color |image = Css.png |image size = 300 |portal = CSS Portal • Web Developers Portal }} '''The "color" property''' in CSS defines the text color of an element. It is used to style text and supports both simple color names and more complex formats such as RGB, HEX, HSL, and others. This is one of the most fundamental and frequently used properties in web development.  == Color Formats == The <code>colo..."
New page
{{Programming

|name = CSS: color

|image = Css.png

|image size = 300

|portal = [[Portal:CSS|CSS Portal]] • [[Portal:Web Developers|Web Developers Portal]]

}}

'''The "color" property''' in CSS defines the text color of an element. It is used to style text and supports both simple color names and more complex formats such as RGB, HEX, HSL, and others. This is one of the most fundamental and frequently used properties in web development.



== Color Formats ==

The <code>color</code> property supports various ways of defining colors:



# '''Color names''': Simple names like <code>red</code>, <code>blue</code>, <code>green</code>.

# '''HEX color code''': Hexadecimal notation, e.g., <code>#ff0000</code> (red).

# '''RGB''': Defined as <code>rgb(255, 0, 0)</code>.

# '''RGBA''': Similar to RGB but with transparency, e.g., <code>rgba(255, 0, 0, 0.5)</code>.

# '''HSL''': Defines colors using hue, saturation, and lightness, e.g., <code>hsl(0, 100%, 50%)</code>.

# '''HSLA''': HSL with transparency, e.g., <code>hsla(0, 100%, 50%, 0.5)</code>.

# '''CSS variables''': Colors can be defined using variables, e.g., <code>var(--main-color)</code>.



== Usage Example ==

=== HTML ===

<syntaxhighlight lang="html">

<body>

    <p class="example1">This text is red.</p>

    <p class="example2">This text is blue.</p>

    <p class="example3">This text is green.</p>

    <p class="example4">This text is orange with transparency.</p>

</body>

</syntaxhighlight>



=== CSS ===

<syntaxhighlight lang="css">

p {

    font-size: 16px;

    font-family: Arial, sans-serif;

    line-height: 1.5;

}



.example1 {

    color: red; /* Color name */

}



.example2 {

    color: #0000ff; /* HEX color code */

}



.example3 {

    color: rgb(0, 255, 0); /* RGB */

}



.example4 {

    color: rgba(255, 165, 0, 0.8); /* RGBA */

}

</syntaxhighlight>



== Browser Support ==

The <code>color</code> property is supported by all modern browsers, including mobile versions. It is one of the basic CSS properties available even in the earliest browser versions.



== Notes ==

* The text color of an element can be inherited from its parent element if not explicitly defined.

* For more complex color effects (e.g., gradients), use the <code>background</code> or <code>background-image</code> property.



== Useful Tips ==

* Use semantic color variables like <code>--main-color</code> to easily manage your website's color scheme.

* Check text and background contrast to ensure good readability (e.g., using the [https://webaim.org/resources/contrastchecker/ WebAIM Contrast Checker]).



== Example Using Variables ==

<syntaxhighlight lang="css">

:root {

    --primary-color: #3498db;

    --secondary-color: #2ecc71;

}



h1 {

    color: var(--primary-color);

}



p {

    color: var(--secondary-color);

}

</syntaxhighlight>

In this example, CSS variables are used to define primary colors:



* <code>:root</code> is a pseudo-class representing the root element of the document (typically <code>&lt;html&gt;</code>). Variables defined in <code>:root</code> are available throughout the website.

* <code>--primary-color</code> and <code>--secondary-color</code> are custom variables holding color values. They can be overridden for specific parts of the site if needed.

* Within the rules for <code>h1</code> and <code>p</code>, the <code>var()</code> function is used to apply the variable values to the <code>color</code> property.



This is a convenient way to organize the color palette of your website. For instance, if you need to change the primary color of your design, you can edit the variable value in one place, and the changes will automatically reflect on all elements using that variable.



Variables are especially useful when creating themes (e.g., light/dark mode) as they make it easy to switch color values based on user preferences.



== Conclusion ==

The <code>color</code> property is an essential part of CSS, enabling efficient control of text colors on web pages. It supports various formats, making it versatile for any project.



== Other Articles About CSS ==

{{Encyclopedia CSS/Navigation|state=uncollapsed}}

{{Template:Navigation/CSS}}

[[wj-ru:Энциклопедия CSS: color]]

[[wj-de:Enzyklopädie CSS: color]]

[[wj-es:Enciclopedia CSS: color]]

[[wj-it:Enciclopedia CSS: color]]

[[wj-fr:Encyclopédie CSS: color]]

[[Category:CSS]]

← Older revision		Revision as of 01:18, 13 February 2025
Line 94:		Line 94:

	== Other Articles About CSS ==		== Other Articles About CSS ==
			{{Template:Navigation/CSS}}
	{{Encyclopedia CSS/Navigation\|state=uncollapsed}}		{{Encyclopedia CSS/Navigation\|state=uncollapsed}}
	~~{{Template:Navigation/CSS}}~~
	[[wj-ru:Энциклопедия CSS: color]]		[[wj-ru:Энциклопедия CSS: color]]
	[[wj-de:Enzyklopädie CSS: color]]		[[wj-de:Enzyklopädie CSS: color]]

Encyclopedia CSS: color - Revision history

Philip: /* Other Articles About CSS */