CSS Background of an element is the rendering surface of the HTML Element’s, it could be either a color or an image. A background refers to the background of the content, padding and border areas.

Common CSS Background Properties

Property	Description	Example
background-color	It specifies the background color of an element.	background-color: red;
background-image	It specifies background image of an element	background-image: url (“img1.png”);
background-repeat	It Specifies background image repeatition vertically or horizontally or both.	background-image:url(img1.gif);background-repeat: repeat; background-image:url(img1.gif); background-repeat: repeat-y; background-image:url(img1.gif); background-repeat: repeat-x;
background-position	It specifies the position of a background image	background-image:url(img1.gif); background-position:100px 200px;
background-attachment	It specifies the scrolling of an image in the background.	background-image:url(img1.gif); background-attachment:scroll;
background	It is short hand notation that allows to define all background properties.	background: url(“img1.png”) gray 50% repeat fixed

CSS Colors allows us to set a color for HTML Elements and for various attributes of these HTML Entities. For example we can set color for text color, Border, Background etc.

CSS Color values can be assigned in following three format :

Hex or Hexadecimal Code Notation

The Hex or Hexadecimal Code Notation is most preferable method for defining color values.Hex color code starts with the hash (#) character, followed by three or six hexadecimal digits in RGB format. For example, the hexadecimal color value for white is #FFFFFF, or #FFF in shorthand. Hexadecimal code notation supports a more range of colors than the keyword system.

Format	Syntax	Example
Hex Code	#RRGGBB or #RGB	p{color:#FFFFFF;} or p{color:#FFF;}

RGB Notation

Tough hex codes are more popular in CSS but many designers prefers to use RGB color model. A color is defined by the amount of Red, Green and Blue, RGB color values supported by the all major browsers.In RGB a color value can be defined using 0 to 255 integer value for the intensity of red, green and blue values that comprise our RGB colors (or using percentages instead).

Format	Syntax	Example
RGB% or RGB Absolute	rgb(rrr%,ggg%,bbb%) or rgb(rrr,ggg,bbb)	p{color:rgb(50%,50%,50%);} or p{color:rgb(0,0,255);}

Color Keywords or Color Name

Basic color keyword or color name notation is simplest method to define a color value and has been around for a long time,but the color names are limited to 16 values but, but can be expanded using an extended palette.

Format	Syntax	Example
keyword or name	red, blue etc.	p{color:green;}

List of 17 official CSS color names with their hex RGB value and their decimal RGB value.

Color Name	Hex Code RGB	Decimal Code RGB
Maroon	800000	128,0,0
Red	FF0000	255,0,0
Orange	FFA500	255,165,0
Yellow	FFFF00	255,255,0
Olive	808000	128,128,0
Green	008000	0,128,0
Purple	800080	128,0,128
Fuchsia	FF00FF	255,0,255
Lime	00FF00	0,255,0
Teal	008080	0,128,128
Aqua	00FFFF	0,255,255
Blue	0000FF	0,0,255
Navy	000080	0,0,128
Black	000000	0,0,0
Gray	808080	128,128,128
Silver	C0C0C0	192,192,192
White	FFFFFF	255,255,255

Browser Safe Colors

List of 216 browser safe colors for a 256 color palette system –

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Every property in the CSS has a specific value for the selector, the value for that property depends on the type of property. For many CSS Properties type of value needs to be defined in length unit, so the value comprising of a numeric/number value with a unit, The numeric value can be either an integer or a real number.The units can be either relative or absolute, if the physical properties of the output medium are known then absolute unit is better option.

Relative Units in CSS

Unit	Description
em	the current font size
ex	height of letter x of the current font
px	pixels

Absolute Units in CSS

Unit	Description
mm	millimeters
cm	centimeters
in	inches
pt	points – 1 pt = 1/72 in
pc	picas – 1 pc = 12 pt

Example :

CSS Declaration	Output
p {font-size:9px;}	Font Size 9px.
p {font-size:3em;}	Font Size 3em.
p {font-size:3ex;}	Font Size 3ex.
p {font-size:0.2in;}	Font Size 0.2 inch.
p {font-size:0.5cm;}	Font Size 0.5 cm.
p {font-size:12mm;}	Font Size 12 mm.
p {font-size:24pt;}	Font Size 24 pt.
p {font-size:2pc;}	Font Size 2 pc.

Percentage unit in CSS

Length values can also be defined in percentage too , percentage value can be defined as an integer, or a decimal number with a percentage character (%).

Example:

A percentage value can be defined relative to or in reference to something .

There are four different ways CSS can be applied in any web page –

• Inline CSS
• Embedded CSS
• External CSS
• Imported CSS

Inline CSS

In Inline CSS method all the styling applied to the HTML Element are defined inside the HTML Tag.

Example:

Embedded CSS

In this method styles are embedded inside the HTML document using the ‘style’ element (usually within the <head> tag).

Example:

External CSS

In this method all CSS that you want to use throughout your website are declared in a external style sheet which is a separate file that file typically has extension of ‘css’ . You can then include this external style sheet in any or all of your HTML pages.

Example:

Imported CSS

External Stylesheets can also be imported into an HTML document using @Import rule.

Example:

 

 

The syntax to define a CSS is as follows:

There is no limit on the number of property:value pair that can be specified for a selector.

Selector	The selector as a HTML entity on which the defined styling will be applied.There are three main types of selectors: type selectors, class selectors, and ID selectors.
Property	The property is a styling attribute of selected HTML entity( Selector ).It could be border,color,font etc.
Value	It is the value for the assigned property.

Example:

means that text in the <b> element will be yellow.

Grouping Selectors

If we want to apply same styling to multiple selectors then they can be declared together. This is called “grouping”.Just separate the selectors with a comma. For example, if <h1>, <h2>, and <h3> share they same style, they can be declared together as follows:

Descendant Selectors

When we want to apply a stying or CSS to a particular element only when it is under or inside a specific element.Suppose we want to apply styling to <b> element inside the <li> element.

The syntax for declaring a descendant selector is:

Example:

means that text in the <b> element inside the <li> element will be red.

Applying Multiple Properties

To apply multiple properties just separate each declaration with a semi-colon.

Example:

 

What is CSS?

When it comes to styling a web page, this whole responsibility is care taken by the CSS. CSS gives web designers and developers full control over the look and feel and the layout of the web pages.CSS stands for Cascading Style Sheets, first invented in year 1997 and supported by all the browsers .

CSS is a powerful tool that gives you a way of formatting your page layout, text, fonts, images, and almost anything you put on the web page. A centralized css file can control the look and feel of the overall website and can save you a lot of time and work in the future.

HTML is used more for to define the structure of content while CSS is used for formatting structured content.

One of the basic example of styles applied to HTML is the color and size of text.In standard HTML when you want to create a word bold with red color like this:

This works fine, and there is nothing wrong with it , except when you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.

Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdana and change its color to red, you would need a lot of code wrapped around the text:

This makes your HTML code messy but with the help of CSS, you can create a custom style elsewhere and set all its properties, give it a name and then you can apply this properties using this named styling or css to the HTML entity.

Advantages of CSS

• Control layout of over all website from one single style sheet.
• CSS saves time
• Pages load faster
• Easy maintenance