Conquer CSS Episode[5]:- CSS Colors and Images

You are currently viewing Conquer CSS Episode[5]:- CSS Colors and Images

Welcome to the 5th episode of Conquer CSS series, in this post of Terminal Stack we are going to learn about the CSS Colors and Images. 

CSS – Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

You can specify your color values in various formats. Following table lists all the possible formats −

FormatSyntaxExample
Hex Code#RRGGBBp{color:#FF0000;}
Short Hex Code#RGBp{color:#6A7;}
RGB %rgb(rrr%,ggg%,bbb%)p{color:rgb(50%,50%,50%);}
RGB Absolutergb(rrr,ggg,bbb)p{color:rgb(0,0,255);}
keywordaqua, black, etc.p{color:teal;}

These formats are explained in more detail in the following sections −

Read Previous Episodes here:- https://terminalstack.com/conquer-css-series/

CSS Colors – Hex Codes

Hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last is the blue value(BB).

Example:- 

h1{

color: #ff4532;

}

In the above code, we can see the “#” character. It is used to give the hexadecimal value of any color. You will find various references on the Internet to generate the hexadecimal values of different colors.

CSS Colors – RGB Values

This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

NOTE − All the browsers do not support rgb() property of color so it is recommended not to use it.

Example:-

h2{

color: rgb(255, 67,255);

)

CSS – Using Images

Images play an important role in any webpage. Though it is not recommended to include a lot of images, it is still important to use good images wherever required.

CSS plays a good role to control image display. You can set the following image properties using CSS.

  • The border property is used to set the width of an image border.
  • The height property is used to set the height of an image.
  • The width property is used to set the width of an image.
  • The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.

A width of zero pixels means no border.

<body>
  	<img style = "border:0px;" src = "/css/images/logo.png" />
  	<br />
  	<img style = "border:3px dashed red;" src = "/css/images/logo.png" />
 </body>

The Image Height Property

The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

<body>
  	<img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
  	<br />
  	<img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
</body>

The Image Width Property

The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available.

<body>
  	<img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
  	<br />
  	<img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
 </body>

The -moz-opacity Property

The -moz-opacity property of an image is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to create transparent images.

In Mozilla (-moz-opacity:x) x can be a value from 0.0 – 1.0. A lower value makes the element more transparent (The same thing goes for the CSS3-valid syntax opacity:x).

In IE (filter:alpha(opacity=x)) x can be a value from 0 – 100. A lower value makes the element more transparent.

Here is an example −

<body>
  	<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
</body>

References:-

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

https://coolors.co/

Leave a Reply