Scribd
Upload
21 views7 pages

Colors in CSS: So Many Choices!

The document discusses different methods for specifying color in CSS including built-in colors like red and blue, hexadecimal codes like #FF1493, RGB values like rgb(0,255,0), RGBA which allows transparency, and using color and background properties to style text and background colors. It also shows how to set a background image using the url() function.

Uploaded by

chandrakasturi2742
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views7 pages

Colors in CSS: So Many Choices!

The document discusses different methods for specifying color in CSS including built-in colors like red and blue, hexadecimal codes like #FF1493, RGB values like rgb(0,255,0), RGBA which allows transparency, and using color and background properties to style text and background colors. It also shows how to set a background image using the url() function.

Uploaded by

chandrakasturi2742
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Colors in CSS

So Many Choices!
Color in CSS
Built In Colors

h1 { <h1>I'm a big scary h1</h1>


color: red; <h2>I'm a confident h2</h2>
} <h3>I'm just a little h3</h3>

h2 {
color: cornflowerBlue;
}

h3 {
color: darkOrchid;
}
Color in CSS
Hexadecimal
# + String of 6 hexadecimal numbers(from 0-F)

h1 { <h1>I'm a big scary h1</h1>


color: #000000; <h2>I'm a confident h2</h2>
} <h3>I'm just a little h3</h3>

h2 {
color: #4B0082;
}

h3 {
color: #FF1493;
}
Color in CSS
RGB
3 channels: Red, Green, and Blue. Each ranges from 0 - 255

h1 { <h1>I'm a big scary h1</h1>


color: rgb(0,255,0); <h2>I'm a confident h2</h2>
} <h3>I'm just a little h3</h3>

h2 {
color: rgb(100, 0, 100);
}

h3 {
color: rgb(11, 99, 150);
}
Color in CSS
RGBA
Just like RGB, but with an alpha(transparency) channel. Ranges from 0.0 - 1.0

h1 { <h1>I'm a big scary h1</h1>


color: rgba(11, 99, 150, 1); <h2>I'm a confident h2</h2>
} <h3>I'm just a little h3</h3>

h2 {
color: rgba(11, 99, 150, .6);
}

h3 {
color: rgba(11, 99, 150, .2);
}
Color and Background
Use 'color' to set text color and 'background' for background color

body { <div>
background: #95a5a6; <p>Hello</p>
} <p>Goodbye</p>
</div>
div{
background: #3498db;
}

p {
color: #ecf0f1;
}
Background Image
The background property can also set a background image

body { <div>
background: url(http://3dprint.com/wp
-content/uploads/2014/11/- <p>Hello</p>
Rainbow_Ocean__by_Thelma1.jpg); <p>Goodbye</p>
} </div>
div{
background: rgba(0,0,0,.7);
}

p {
color: #ecf0f1;
}

You might also like