CSS general questions

CSS QUESTIONS

Are you really reading the CSS tutorial very well then try to answer this questions.

1. What is CSS stands for?

2.  Which type of defining CSS style have maximum priority?

3. If we want to give the maximum priority to other types of defining CSS styles which keyword is to be used?

4. What is the difference between display: none and visibility: hidden?

5. What is the difference between position: absolute and position: relative?

6. What is the difference between rgb and rgba colors?

7. Why we use background-style as "cover"?

8. What is the meaning of "inherit" in CSS property value? Is all the CSS property have the "inherit" value?

9. Is we can give the inline and embedded CSS style for the same element?

10. Which property is must when we work with bottom, top, left, right?

11. Can we hide the mouse pointer using CSS?

12. which property does not allow the floating elements?

13. What are the three properties to hide the elements from the document?

14. Which property is used to disabling the events?

15. How you convert lowercase text to uppercase in CSS?

16. what is the difference between display:block and display:inline-block?

17. How you vertically allign the text in the document using CSS?

18. How you give space between the characters?

19. Give example for z-index property using in real-time?

20. What is the difference between nth-child selector and nth-of-type selector? 

CSS selectors

                             

                              CASCADING STYLE SHEET

CSS Selectors:

In CSS we can use the different selectors to select a HTML element for applying styles. There are various different way to select the elements that are called as selectors. They are given below.

Class (class selectors): We can select the particular element using the class. The class name have the prefix of (.) dot symbol. We can give the class name for the common elements. This selector is called as class selectors.

Syntax: .classname{/*properties and values*/}

Eg: .myFirstClassName{font-size: 30px;} Live Example click here.

ID (id selectors): The Id name is used to apply the style for the unique element. Each ID name is unique and each classname are common. ID names are specify with (#) symbol. This selector is called as id selecotors

Syntax: #idname{/*properties and values*/} 

Eg: #myIdName{font-size: 30px;}Live Example click here.

* selector (universal selectors): This selector is used select all the elements in the document. This selector is called as universal selector

Syntax: *{/*properties and values*/}  

Eg: *{font-size: 30px;} Live Example click here.

Element (type selectors): we can give the some styles for the particular elements also like div or span etc., we can give the multiple elements seperated by (,) comma. This selector is called as type selector.

Syntax:  htmlelement{/*properties and values*/} or firsthtmlelement,secondhtmlelement{/*properties and values*/}

Eg1: div{font-size: 30px;} Live Example click here.

Eg2: div,span{font-size: 30px;} Live Example click here.

Element Element(decendant selector): If the multiple elements seperated by "space" then it means it selects the element inside the next element. i.e., child of its element. See example below to have the clear understanding. This selector is called as "decendant selector".

Syntax: firstelement secondelement {/*properties and values*/}

Eg: div span{font-size: 30px;} Live Example click here. While using the "comma" separator it selects all the element in the HTML document. In these example the CSS looks for the span element inside the div element. 

Element > Element (child combinator selector): It selects all the second element which parent the first element. This selector is called as "child combinator selector".

Syntax: firstelement > secondelement{/*properties and values*/} 

Eg: div > span {font-size: 30px;} Live Example click here. which means the CSS search for the element span which has the parent as div.

Element + Element (adjacent sibling selector): This selector is used to selects the element which is directly after another specific element i.e., immediately next to the element. This selector is called as adjacent sibling selector.

Syntax: firstelement + secondelement{/*properties and values*/} 

Eg: div + span {font-size: 30px;}Live Example click here. which means the CSS search for the span element wich is next to the div element.

Element ~ Element (General sibling selector) : This selector is same as the adjacent sibling selector the only difference is adjacent sibling selector can apply styles only first next to the element. But, general sibling selector does not search for the immediate next it applies all the element which next to the specific element. This selector is called as general sibling selector.

Syntax: firstelement ~ secondelement {/*properties and values*/} 

Eg: div ~ span{font-size: 30px;}Live Example click here.

[attr] (attribute selectors): This selector search for the element which has the attribute we given. 

Syntax: element[attributename] {/*properties and values*/}

Eg: div[value] {font-size: 30px}Live Example click here. In here the CSS search for the div element which has the attribute name as "value".

[attr = val]: This selector search for the element that has the attribute name and value as equal.

Syntax: element[attributename = value] {/*properties and values*/}

Eg: div[value = new] {font-size: 30px}Live Example click here. In here the CSS search for the div element which has the attribute name and value as equal to the selector.

[attr ~= val]: This selector selects the element which has the same word of the value. i.e., it selects whether the value found in the attribute value

Syntax: element[attributename ~= value] {/*properties and values*/}

Eg: div[value ~= new] {font-size: 30px;}Live Example click here. In here CSS search for the element which has the attribute name as "value" and the value which has the word as "new".

[attr |= val]: This selector selects the element starting with the given value immediately followed by (-).

Syntax: element[attributename |= value] {/*properties and values*/}

Eg: div[value |= new] {font-size: 30px;}Live Example click here.

:link (link pseudo class): This selector applies the given property to the hyperlink that not visited in the document. The browser automatically applies the colors for the link we can override that using this CSS selectors

Syntax: :link{/*properties and values*/};

Eg: :link{color: yellow}; Live Example click here.

:visited (link pseudo class): This selector applies the properties to the hyperlink that visited already.

Syntax: :visited{/*properties and values*/};

Eg: :visited{color: blue}; Live Example click here.

:hover (dynamic pseudo class): This selector applies the property only when the mouse hover to that element.

Syntax: element:hover{/*properties and values*/};

Eg: div:hover{background-color: red}; Live Example click here.

:active(dynamic pseudo class): This selector selects the active link.

Syntax: :active {/*properties and values*/}

Eg: :active{color: red} Live Example click here.

:focus (dynamic pseudo class): This selector selects the input element that has focus or the other elements which has the focus.

Syntax: element:focus{/*properties and values*/} 

Eg: input:focus{border-color: red} Live Example click here.

:first-line: This applies the style for the first line of the given element. Its also one of the pseudo class.

Syntax: element:first-line{/*properties and values*/}

Eg: div:first-line{color: red}; Live Example click here.

:first-letter: This selector applies the style to the first letter of the given element. It also one of the pseudo class.

Syntax: element:first-letter{/*properties and values*/}

Eg: div:first-letter{font-size: 30px;} Live Example click here.

:first-child: This selectors applies style to the element which has the first child to their parent. It also one of the pseudo class.

Syntax: element:first-child{/*properties and values*/} 

Eg: span:first-child{font-size: 20px;} Live Example click here.

:before: This selector is used to insert the generated content before to the given element.

Syntax: element:before{/*properties and values*/} 

Eg: div:before{content: "hai"} Live Example click here.

:after: This selector is used to insert the generated content after the given element.

Syntax: element:after{/*properties and values*/} 

Eg: div:after{content: "hai"} Live Example click here.

:first-of-type: This selector applies style for the element that is the first parent in the document.

Syntax: element:first-of-type{/*properties and values*/}

Eg: div:first-of-type{font-size: 15px;} 

:only-child: This selector search for the given element is child to the other element. 

Syntax: element:only-child{/*properties and values*/} 

Eg: span:only-child{font-size: 20px;} Live Example click here.

:last-child: This selector search for the give element is the last child to the element. 

Syntax: element:last-child{/*properties and values*/}

Eg: span:last-child{font-size: 20px;} Live Example click here.

:empty: This selector select the elements which is empty.

Syntax: element:empty{/*properties and values*/}

Eg: div:empty{color: red;} Live Example click here.

:enabled: This selector applies the style for the input element which is enabled.

Syntax: element:enabled{/*properties and values*/}

Eg: input:enabled{border-color: red} Live Example click here.

:disabled: This selector applies the style for the input element which is disabled.

Syntax: element:disabled{/*properties and values*/}

Eg: input:disabled{border-color: red} Live Example click here.

:not: This selector selects all other element with out the given element in not. 

Syntax: :not(element) {/*properties and values*/}

Eg: div *:not(span){color: red;}Live Example click here. In here CSS search for the child element of the div which is not span. 

::selection: This is used to style the selection of text in browser. 

Syntax: element::selection{/*properties and values*/};

Eg: div::selection{color: red}; Live Example click here.

:nth-child(n): This selectors selects the elements which is the nth child of its parent.

Syntax: element:nth-child(number){/*properties and values*/};

Eg: div:nth-child(2){color:red} Live Example click here.

:nth-last-child(n): This is same as the above selector the only difference it count from the last child of the element. 

Syntax: element:nth-last-child(number) {/*properties and values*/}

Eg: div:nth-last-child(2){color:red} Live Example click here.

:nth-of-type(n): This is also same as the nth-child selector but the only difference is nth-child() selector counts the every child not the same of type i.e., it search for the element only not to its type. In nth-of-type it search also for the element type. See Difference.

Syntax: element:nth-of-type(number){/*properties and values*/}

Eg: div:nth-of-type(2){color:red} Live Example click here.

:nth-last-of-type(n): This is same as the nth-of-type the only difference is it count from the last child instead of first child.

Syntax: element:nth-last-of-type(number) {/*properties and values*/}

Eg: div:nth-last-of-type(2){color:red} Live Example click here. 

The above given are various types of CSS selector using these selector you can easily style the HTML elements and also these selectors used to coding in "Jquery" a Javascript library.

CSS Tutorial part3

                              CASCADING STYLE SHEET

Part 3.

Transition:

This property is used to animating the elements it can smoothly increase the pixel elements and its look like a animation. This property is the shortand property of all other transition properties.

Syntax: transition: property duration timing-function delay;

Eg: transition: height 2s. Live Example click here.

Transition property: This property is used to set the property value that has the transition effects we can give transition effects for all the elements. If you want to specify more than one property value then use (,) comma as a seperator.

Eg: transition: height,width 2s (or) transition: all 2s. Live Example click here.

Transition duration: This property is used to set the seconds or milliseconds to complete the transition effect. 

Eg: transition-duration: 2s; Live Example click here.

Transition delay: This property specifies transition can start after a short delay i.e., some seconds or milliseconds.

Eg: transition-delay: 2s; Live Example click here. 

Vertical Align:

 This property is used align the element at vertically. We can also give the pixel,cm,em,percentage as the value. These has the following values

• sub
• super
•  top
• middle
• bottom
• text-top
• text-bottom
• baseline

Eg: vertical-align: middle. Live Example click here.

Visibility: 

This property is used to sets the element may visible or not. It has the hidden, collapse, inherit and visible. The difference between the visibility:hidden and display:none is when the visibility is hidden then the element is present in the document and it takes the relevant space for that. In case of display:none the element is not present in the document and its space can be used by another element. 

Eg: visibility: hidden; Live Example click here.

Width: 

This property is used to set the width for the particular element. we can give values in pixel, percentage, cm, em and we can set the value as auto the browser automatically detects the width of the browser. 

Eg: width: 40px; 

Word spacing:

 This property is also same as the letter spacing in here we can give the space between the two words. 

Eg: word-spacing: 10px; Live Example click here.

Word wrap:

This property allows the word can be break into next line.

Eg: word-wrap: break-word;  Live Example click here.

 White space:

This property is used to manage the white space in the element.

Eg: white-space: nowrap; Live Example click here. 

Z-index:

This property is used to set the stack order of the specific elements to display. The having the maximum z-index are present in-front of the document.

Eg: z-index: 5; Live Example click here. 

Refer CSS selector to know more about CSS

CSS Tutorial part2

CASCADING STYLE SHEET

Part 2.

Border Property:

Border: We can set the border for our HTML elements using the border property.

Syntax: border: width style color; 

Eg: <div style="border: 1px solid black">Hello World</div>. Live example click here.

We can set the border for only the left or right or top or bottom or combine with these.

 Eg: <div style="border-top: 1px solid black;border-bottom: 1px solid black">Hello World</div>. Live example click here.

Border-style: border-style sets the style for the border. See the various styles of the border click here. we can set the top, left, right, bottom property for this also See demo.

Eg: <div style="border-style: double">Hello World</div>.

Border-collapse: This property sets whether the table borders are collapsed and look like a single border. It has also the three values.

• inherit. 
• collapse.
• separate.

See difference in here without collapse and with collapse.

Border-width: we can set the width of the border using this property. This property also supports the top, right, left, bottom property. 

 Eg: <div style="border-style: solid; border-width: 5px;">Hello World</div>

Live example click here. This has the default property value also. They are

• thin
• thick
• medium

Border-color: we can set the color for the border. These property also supports the top, left, right, bottom and we have use the colors as HTML colors.

Eg: <div style="border-style: double;border-width: 5px;border-color: red;">Hello World</div>

Live Example click here.

Border-radius: This property is used to add the rounded border our HTML elements. We can give the values for radius as pixel, percentage, em. We can give the border-radius for only the top-left, top-right, bottom-left, bottom-right.

Eg1:  <div style="border: 5px solid black; border-radius: 6px;">Hello World</div>

Live Example click here. 

Eg2: <div style="border: 5px solid black; border-radius: 10px 8px 4px 1px;">Hello World</div>.

In the above example border-radius can differ each border. It sets the border in clockwise rotation i.e., top-left, top-right, bottom-right, bottom-left.

Live Example click here.

Border-spacing: we can give space between the each borders in table. This can be done with the help of this property.  

Click here to see example.  In these example we set the spacing for both the horizontal and vertical. We can also sets the various spacing for horizontal and vertical. See Demo, In here first value represents the vertical spacing and second one is horizontal spacing.

 Border-image: we can also sets the border as a image. Example.

Bottom:

This property is used to set the elements at the bottom of the container. Its place your element to the bottom edge. Before using this property we can set that element position as absolute or relative, without setting the position it has no effect click here.

Eg: bottom: 2px; Live Example click here.

Box Shadow:

This property shows the shadow for the HTML elements. 

Syntax: box-shadow: h-shadow v-shadow blur spread color inset;

Eg: box-shadow: 10px 10px 5px #868686. Live Example click here.

Color: 

This property is used to set the font color.

Syntax: color: colorvalues;

Eg: color: red;  Live Example click here.

Cursor: 

This property is used to change the style of the cursor. There are different values for the cursor. To see the example of all cursor click below.

• auto
• default
• pointer
• text
• crosshair
• move
• help
• no-crop
• not-allowed
• none
• all-scroll
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize
• ew-resize
• ns-resize
• nesw-resize
• nwse-resize
• col-resize
• row-resize
• cell
• context-menu
• progress
• vertical-text
• wait
• copy
• alias
• none

Eg: cursor: pointer; Live example click here.

Clear: 

This property does not allow the floating element on its elements, its work only if the floating elements are presented. See example below to get the complete understand about clear property. These has the following values. 

• left
• right
• both
• none
• inherit

 Eg: clear: both; Live Example click here.

Display: 

 This property tells how the HTML elements can be displayed in the browser. It has the various values. 

• none
• inline
• inline-block
• list-item
• table
• inline-table
• table-row
• table-cell
• table-caption
• inherit
• block.

Eg: display: inline; Live Example click here.

Direction:

This property is used to specify the text direction from where it starts. It's also like the alignment of the paragraph. It has the two property values ltr(left to right), rtl (right to left);

Eg: direction: rtl; Live Example click here. 

Font:

This property is used to set the font family, size, style, font-variant. It sets all the other font property to one declaration

Eg: font: italic small-caps bold 20px TimesNewRoman; Live Example click here. 

Font-size: Its used to set the font size for the text. We can set the size of the font in pixel, percentage, em. It has the various values they are

• small
• medium
• large
• x-large
• xx-large
• smaller
• larger 

Eg: font-size: 20px;  Live Example click here.

Font-family: Its used to set the various font for the text and it takes system default font to set. we can give the values separated with commas, like this it tries for the first font and its not available then it tries for the next font.

Eg: font-family: arial, "Times New Roman"; Live Example click here. 

In the above example, it takes the system default font. If we want to display the non-system fonts then we use the "@font-face"

Eg:  

@font-face{

font-family: fontname; src: url('overwrite.ttf') format ('truetype'); 

}

 Font-style: Its used to set the style for the font. It has the following values.

• normal
• italic
• oblique
• inherit.

Eg: font-style: italic; Live Example click here.

Font-weight: This property shows the text can be display with the specified thickness or thinness. It has the following property value

• normal
• bold
• bolder
• lighter
• 100 to 900.
• inherit

Eg: font-weight: bold; Live Example click here.

Float: 

This property used to float the elements in the HTML page. Its ignored when the position is absolute. It has the following values

• left
• right
• none
• inherit

Eg: float: left. Live Example click here.

Height: 

Its used to set the height for the elements. It accepts the value as pixel, percentage, em. and also we give the value as auto. 

Eg:  height: 400px; Live Example click here.

Left: 

Its used to set the elements position left. It response only when the element is positioned as absolute or relative.It also accept the value as pixel, percentage. See the below example to get a clear understand of left property.

Eg: left: 50%; Live Example click here.

Letter Spacing: 

This property is used to increase or decrease the space between the characters in the text. 

Eg: letter-spacing: 5px; Live Example click here.

Line Height: 

Its puts the space between the each lines. i.e., heights between the two lines. This property is applied only when the text exceeds more than one line. 

 Eg: line-height: 30px; Live Example click here.

 List style: 

This is used to style the listed item. It has the following values

• none
• disc
• decimal
• circle
• square
• lower-roman
• upper-roman
• lower-greek
• lower-alpha
• upper-alpha

Eg: list-style: disc; Live Example click here.

List style image: We can also set image as a bulleted in HTML using this property. 

Eg: list-style-image: url("imageurl.png") ; Live Example click here.

 List style position: We can set the position of the list by inside or outside. 

Eg: list-style-position: inside; Live Example click here.

List style type: This property is same as the list style in that property we can give all the other list properties with the single declaration in here we can specify only the type of style for the list

Eg: list-style-type: disc; Live Example click here.

 Margin: 

Margin property is used to set the elements spacing between the margin, its supports the top, left, right, bottom property also and we can give the values as pixels, percentage, cm, em.

Eg1: margin: 4px; Live Example click here. In this example it sets the margin for all the four directions. we can set the margin for them separately.

Eg2: margin-left: 4px; (or) margin: 3px 2px 10px 2px; Live example click here. In here the margins can be set in the clock wise direction i.e., top, right, bottom, left. we can also specify this like Eg3: margin: 3px 10px Live Example click here. In here it set fir vertical and then horizontal. 

Min Height: 

This property sets the minimum height for the element. If your height property value is less than the min-height property value then it ignores the height value. 

Eg: min-height: 40px; Live Example click here.

Max Height: 

This property sets the maximum height for the element. It also ignores the height property value if the value is greater than the maximum height value. 

Eg: max-height: 50px; Live Example click here.

Min Width: 

 This property is same as the min-height property its sets the minimum width for the element. 

Eg: min-width: 60px; Live Example click here.

Max Width: 

This property sets the maximum width for the element. Its also same as the max-height property.

Eg: max-width: 150px; Live Example click here.

Opacity: 

This property sets the alpha level for the element i.e., opacity as we studied previously in the background-color property. This has values from 0.0 to 1.0. We can hide the element by setting the opacity level as 0.

Eg: opacity: 0.4; Live Example click here.

Overflow: 

This property says when the content overflow from the element what would be happen. It has the following values.

• scroll
• hidden
• auto
• visible
• inherit

 Eg: overflow: scroll; Live Example click here.

Overflow-x: This property says what would be happen when the content overflow horizontally.

Eg: overflow-x: hidden. Live Example click here.

Overflow-y: This property says what happen when the content overflow vertically.

Eg: overflow-y: auto. Live Example click here. 

Padding: 

This property sets the spacing between the border of the element from inside. It is opposite to the margin property. In margin property it gives the space outside from the border. In here it gives inside from the border. It also supports for left, right, bottom, top and we can give the values as pixel, cm, em, percentage.

Eg1: padding: 5px; Live Example click here.

Eg2: padding-top: 20px; Live Example click here.

Eg3: padding: 10px 20px 10px 5px; Live Example click here.

Pointer Events: 

This property is used to disable the events going to run. This property is more useful while instead of removeListening in Javascript. We can set the events back by setting the property value as auto

 Eg: pointer-events: none; Live Example click here.

Position: 

 This property is used to set the elements positioning in the HTML page. It has the following values.

• absolute
• relative
• inherit
• fixed
• static

Eg1: position: absolute. Live Example click here. Using this property value we can move our HTML element in any of the position. It means the element is taken completely out of the normal flow of the page layout.

Eg2: position: relative. Live Example click here. The relative position is take the rest of the space where the other elements can be occupied.

Eg3: position: fixed. Live Example click here. In the fixed positioned element cannot move from the occupied space. This type of positioning is mostly used for header. In these live example, the fixed position element cannot be scrolled.

Right:

This property sets the elements can be positioned from the right side. We can give values as pixel, percentage, cm, em. This property works only when that elements position is absolute or relative

Eg: right: 10px; Live Example click here.

Top:

This property is also same as the right property inhere we sets the elements position from the top of the document. This property is also works when the elements position is absolute or relative.

Eg: top: 20px;  Live Example click here.

Text align:

This property is used to align the text of the element. It has following values

• center
• justify
• left
• right
• start
• end
• inherit 

 Eg: text-align: center. Live Example click here.

Text Decoration:

This property sets the style or decoration for the text in the element. It has the following values

• none
• underline
• overline
• line-through
• inherit

Eg: text-decoration: underline; Live Example click here.

Text indent: 

This property specifies the indentation of the first line of paragraph.

Eg: text-indent: 50px; Live Example click here.

Text overflow: 

This property specifies what happens when the text overflow from the container. It has the values of ellipsis, clip,

Eg: text-overflow: ellipsis. Live Example click here. 

Text shadow: 

This property applies the shadow to the text in the element. It also same as the box-shadow. we can give the values as pixel. 

Syntax: text-shadow: hshadow vshadow blur color;

Eg: text-shadow:  3px 3px 5px red; Live Example click here.

Text transform:

This property can change the case of the text i.e., it can convert lower case letter upper case. It has the following values.

• capitalize
• uppercase
• lowercase
• none

Eg: text-transform: uppercase;  Live Example click here.

Continue in part3.

CSS Tutorial part1

CASCADING STYLE SHEET

                     CSS (CASCADING STYLE SHEET) which defines how to show the HTML elements with the design format. You must know about the HTML before you learn about CSS. It is very useful to give your HTML pages like neat presentations. When a browser reads a style sheet, it will format the document according to it. We can style a HTML tags using CSS selectors which we will discuss later.  Each CSS has a specific rule and we save the CSS file with the .css extension.

CSS Syntax:

     We can define a CSS styles using selectors and declarations.

Eg:   div {color: red; text-align: center;}

In the above example, div is a selector and the elements within paranthesis is declaration. Each Declaration has their own property and its values "color" is a property and "red" is value.

CSS Styles are given by Three ways

• Inline CSS styles. 
• Embedded CSS styles.
• External CSS styles.

Inline CSS Styles:

    Inline CSS styles has the "Maximum Priority" i.e., We can style the "HTML tag internally" using style attribute. But the main thing to know is defining the Inline CSS is become more complex to edit when you create a large HTML pages.

          Eg:   <div style="font-size: 40px;color: red;">Example For Easy Learning</div>

         Live Example click here

 When defining the multiple properties you can use a semicolon(;) to separate the property value.

Embedded CSS Styles:

       Embedded CSS styles are given within the "HTML Document" which has the next level priority. If we have only one CSS file for the whole HTML Document then we use this type. This can be define using the style tag and this tag is must given within the head section of the document. 

          Eg: div{display: block;} span{visibility: hidden;}

          Live Example click here

External CSS Styles:

       External CSS Styles are given the external CSS document which can be save as the extension of .css and we can link this document using the "link tag". This tag also must be in head section of the document.

         Eg: <head>
               <link rel='stylesheet' type='text/css' href="external.css" />
               </head>

        If you give the Embedded and External CSS styles in the same HTML document then it takes the priority of order of your CSS. Eg: You give the Embedded Styles at first and the External CSS as second then the External CSS Styles can override the Embedded Styles. For Efficient Coding avoid these types of CSS using.

CSS Selectors:

      We Use the "ID" and "Class" as a main selectors for using CSS. You can use ID for the unique way of representation and Class for the common way of representing the CSS Styles. ID defined with a "#" Symbol and Class defined with a "." Symbol. 

Eg for using ID:  <div id='test'>Testing</div>

        #test{color: red;}

          Live Example click here

Eg for using Class: <div class='test'>Testing</div><div class='test'>Sample</div><div class='test'>Content</div>

        .test{color:red;font-size: 30px;}

           Live Example click here

Now you have the clear idea of using Class'es and Id's. Ids is like your office employee number and the classes is like your office name. Use your ID and Class names as alphabetic avoid using only numbers as a name which is a good coding style.

CSS Properties: 

     There are several CSS properties which has to be used to style the document. These are the most commonly used properties in CSS

·         Background-color
·         Background-image
·         Background-repeat
·         Background-position
·         Border (top,right,bottom,left)
·         Border-collapse
·         border-style (top,right,bottom,left)
·         border-width
·         border-color (top,right,bottom,left)
·         border-radius (top,right,bottom,left)
·         border-spacing
·         border-image
·         bottom
·         box-shadow
·         color
·         cursor
·         clear
·         display
·         direction
·         font
·         font-family
·         font-size
·         font-style
·         font-weight
·         float
·         height
·         left
·         letter-spacing
·         line-height
·         list-style
·         list-style-image
·         list-style-position
·         list-style-type
·         margin (top,right,bottom,left)
·         min-height
·         max-height
·         min-width
·         max-width
·         opacity
·         overflow-x
·         overflow-y
·         padding (top,right,bottom,left)
·         pointer-events
·         position
·         right
·         top
·         text-align
·         text-decoration
·         text-indent
·         text-shadow
·         text-transform
·         transition
·         transition-delay
·         transform
·         transform-style
·         vertical-align
·         visibility
·         width
·         word-spacing
·         word-wrap
·         word-break
·         white-space
·         z-index

Background Property:

                   Using these property we can change our HTML document background.

Background-color:  is used to set the color for the background we can give only the valid color reference as the background-color they are

• Hexadecimal colors.

• RGB colors

• RGBA colors

• HSL colors

• HSLA colors

• Predefined/Cross-browser color names

Hexadecimal Colors: This colors are range from 00 to FF and we give this color in CSS like #RRGGBB (Red, Green, Blue) Eg: background-color: #000000 (black) or #00ff00 (green). Like this combination we can create the 16581375 combinations of colors. Live Example click here.

RGB Colors: This colors is also like a hexadecimal in here we give the value of this color with rgb(). Eg: background-color: rgb(0,255,0);. We can set the color values as a percentage also Eg: background-color: rgb(0%,100%,0%). Live Example click here.

RGBA Colors: This is same as the RGB color but instead of with an alpha channel which specifies the opacity. The alpha parameter is between 0.0 to 1.0. Eg: background-color: rgb(0,255,0,0.3). Live Example click here.

HSL Colors: HSL means Hue, Saturation, Lightness. which is a degree of a color wheel of 0 to 360. Saturation is a shade of grey which given in a percentage value 0 to 100%. Lightness is the brightness relative to the brightness of a similarly illuminated white which also in a percentage value 0 to 100%. Eg: background-color: hsl(240,50%,50%) ; Live Example click here.

HSLA Colors: This is same as the HSL colors which contains the alpha range to set for the opacity. Eg: background-color: hsla(240,50%,50%,0.3). Live Example click here.

Predefined/Cross-browser color names: There are several color names in HTML. They are given below

Color Name	RGB Value	Hexadecimal Value	Appearance
AliceBlue	rgb(240, 248, 255)	#F0F8FF
AntiqueWhite	rgb(250, 235, 215)	#FAEBD7
Aqua	rgb(0, 255, 255)	#00FFFF
Aquamarine	rgb(127, 255, 212)	#7FFFD4
Azure	rgb(240, 255, 255)	#F0FFFF
Beige	rgb(245, 245, 220)	#F5F5DC
Bisque	rgb(255, 228, 196)	#FFE4C4
Black	rgb(0, 0, 0)	#000000
BlanchedAlmond	rgb(255, 235, 205)	#FFEBCD
Blue	rgb(0, 0, 255)	#0000FF
BlueViolet	rgb(138, 43, 226)	#8A2BE2
Brown	rgb(165, 42, 42)	#A52A2A
BurlyWood	rgb(222, 184, 135)	#DEB887
CadetBlue	rgb(95, 158, 160)	#5F9EA0
Chartreuse	rgb(127, 255, 0)	#7FFF00
Chocolate	rgb(210, 105, 30)	#D2691E
Coral	rgb(255, 127, 80)	#FF7F50
CornflowerBlue	rgb(100, 149, 237)	#6495ED
Cornsilk	rgb(255, 248, 220)	#FFF8DC
Crimson	rgb(220, 20, 60)	#DC143C
Cyan	rgb(0, 255, 255)	#00FFFF
DarkBlue	rgb(0, 0, 139)	#00008B
DarkCyan	rgb(0, 139, 139)	#008B8B
DarkGoldenrod	rgb(184, 134, 11)	#B8860B
DarkGray	rgb(169, 169, 169)	#A9A9A9
DarkGreen	rgb(0, 100, 0)	#006400
DarkKhaki	rgb(189, 183, 107)	#BDB76B
DarkMagenta	rgb(139, 0, 139)	#8B008B
DarkOliveGreen	rgb(85, 107, 47)	#556B2F
DarkOrange	rgb(255, 140, 0)	#FF8C00
DarkOrchid	rgb(153, 50, 204)	#9932CC
DarkRed	rgb(139, 0, 0)	#8B0000
DarkSalmon	rgb(233, 150, 122)	#E9967A
DarkSeaGreen	rgb(143, 188, 143)	#8FBC8F
DarkSlateBlue	rgb(72, 61, 139)	#483D8B
DarkSlateGray	rgb(47, 79, 79)	#2F4F4F
DarkTurquoise	rgb(0, 206, 209)	#00CED1
DarkViolet	rgb(148, 0, 211)	#9400D3
DeepPink	rgb(255, 20, 147)	#FF1493
DeepSkyBlue	rgb(0, 191, 255)	#00BFFF
DimGray	rgb(105, 105, 105)	#696969
DodgerBlue	rgb(30, 144, 255)	#1E90FF
FireBrick	rgb(178, 34, 34)	#B22222
FloralWhite	rgb(255, 250, 240)	#FFFAF0
ForestGreen	rgb(34, 139, 34)	#228B22
Fuchsia	rgb(255, 0, 255)	#FF00FF
Gainsboro	rgb(220, 220, 220)	#DCDCDC
GhostWhite	rgb(248, 248, 255)	#F8F8FF
Gold	rgb(255, 215, 0)	#FFD700
Goldenrod	rgb(218, 165, 32)	#DAA520
Gray	rgb(128, 128, 128)	#808080
Green	rgb(0, 128, 0)	#008000
GreenYellow	rgb(173, 255, 47)	#ADFF2F
Honeydew	rgb(240, 255, 240)	#F0FFF0
HotPink	rgb(255, 105, 180)	#FF69B4
IndianRed	rgb(205, 92, 92)	#CD5C5C
Indigo	rgb(75, 0, 130)	#4B0082
Ivory	rgb(255, 255, 240)	#FFFFF0
Khaki	rgb(240, 230, 140)	#F0E68C
Lavender	rgb(230, 230, 250)	#E6E6FA
LavenderBlush	rgb(255, 240, 245)	#FFF0F5
LawnGreen	rgb(124, 252, 0)	#7CFC00
LemonChiffon	rgb(255, 250, 205)	#FFFACD
LightBlue	rgb(173, 216, 230)	#ADD8E6
LightCoral	rgb(240, 128, 128)	#F08080
LightCyan	rgb(224, 255, 255)	#E0FFFF
LightGoldenrodYellow	rgb(250, 250, 210)	#FAFAD2
LightGreen	rgb(144, 238, 144)	#90EE90
LightGrey	rgb(211, 211, 211)	#D3D3D3
LightPink	rgb(255, 182, 193)	#FFB6C1
LightSalmon	rgb(255, 160, 122)	#FFA07A
LightSeaGreen	rgb(32, 178, 170)	#20B2AA
LightSkyBlue	rgb(135, 206, 250)	#87CEFA
LightSlateGray	rgb(119, 136, 153)	#778899
LightSteelBlue	rgb(176, 196, 222)	#B0C4DE
LightYellow	rgb(255, 255, 224)	#FFFFE0
Lime	rgb(0, 255, 0)	#00FF00
LimeGreen	rgb(50, 205, 50)	#32CD32
Linen	rgb(250, 240, 230)	#FAF0E6
Magenta	rgb(255, 0, 255)	#FF00FF
Maroon	rgb(128, 0, 0)	#800000
MediumAquamarine	rgb(102, 205, 170)	#66CDAA
MediumBlue	rgb(0, 0, 205)	#0000CD
MediumOrchid	rgb(186, 85, 211)	#BA55D3
MediumPurple	rgb(147, 112, 219)	#9370DB
MediumSeaGreen	rgb(60, 179, 113)	#3CB371
MediumSlateBlue	rgb(123, 104, 238)	#7B68EE
MediumSpringGreen	rgb(0, 250, 154)	#00FA9A
MediumTurquoise	rgb(72, 209, 204)	#48D1CC
MediumVioletRed	rgb(199, 21, 133)	#C71585
MidnightBlue	rgb(25, 25, 112)	#191970
MintCream	rgb(245, 255, 250)	#F5FFFA
MistyRose	rgb(255, 228, 225)	#FFE4E1
Moccasin	rgb(255, 228, 181)	#FFE4B5
NavajoWhite	rgb(255, 222, 173)	#FFDEAD
Navy	rgb(0, 0, 128)	#000080
OldLace	rgb(253, 245, 230)	#FDF5E6
Olive	rgb(128, 128, 0)	#808000
OliveDrab	rgb(107, 142, 35)	#6B8E23
Orange	rgb(255, 165, 0)	#FFA500
OrangeRed	rgb(255, 69, 0)	#FF4500
Orchid	rgb(218, 112, 214)	#DA70D6
PaleGoldenrod	rgb(238, 232, 170)	#EEE8AA
PaleGreen	rgb(152, 251, 152)	#98FB98
PaleTurquoise	rgb(175, 238, 238)	#AFEEEE
PaleVioletRed	rgb(219, 112, 147)	#DB7093
PapayaWhip	rgb(255, 239, 213)	#FFEFD5
PeachPuff	rgb(255, 218, 185)	#FFDAB9
Peru	rgb(205, 133, 63)	#CD853F
Pink	rgb(255, 192, 203)	#FFC0CB
Plum	rgb(221, 160, 221)	#DDA0DD
PowderBlue	rgb(176, 224, 230)	#B0E0E6
Purple	rgb(128, 0, 128)	#800080
Red	rgb(255, 0, 0)	#FF0000
RosyBrown	rgb(188, 143, 143)	#BC8F8F
RoyalBlue	rgb(65, 105, 225)	#4169E1
SaddleBrown	rgb(139, 69, 19)	#8B4513
Salmon	rgb(250, 128, 114)	#FA8072
SandyBrown	rgb(244, 164, 96)	#F4A460
SeaGreen	rgb(46, 139, 87)	#2E8B57
Seashell	rgb(255, 245, 238)	#FFF5EE
Sienna	rgb(160, 82, 45)	#A0522D
Silver	rgb(192, 192, 192)	#C0C0C0
SkyBlue	rgb(135, 206, 235)	#87CEEB
SlateBlue	rgb(106, 90, 205)	#6A5ACD
SlateGray	rgb(112, 128, 144)	#708090
Snow	rgb(255, 250, 250)	#FFFAFA
SpringGreen	rgb(0, 255, 127)	#00FF7F
SteelBlue	rgb(70, 130, 180)	#4682B4
Tan	rgb(210, 180, 140)	#D2B48C
Teal	rgb(0, 128, 128)	#008080
Thistle	rgb(216, 191, 216)	#D8BFD8
Tomato	rgb(255, 99, 71)	#FF6347
Turquoise	rgb(64, 224, 208)	#40E0D0
Violet	rgb(238, 130, 238)	#EE82EE
Wheat	rgb(245, 222, 179)	#F5DEB3
White	rgb(255, 255, 255)	#FFFFFF
WhiteSmoke	rgb(245, 245, 245)	#F5F5F5
Yellow	rgb(255, 255, 0)	#FFFF00
YellowGreen	rgb(154, 205, 50)	#9ACD32

Background-image: Instead of colors we can set a image as a background in HTML document. value can be given within the url(). Eg: background-image: url(http://cdn.overclock.net/a/ae/aed86d82_Opera-Background-Speaker.jpeg). Live Example click here.

Background-repeat: If we use a small size of image then we can repeat the same image in horizontally or vertically for our requirement. It has 5 property values they are

• Repeat
• Repeat-x (for horizontal)
• Repeat-y (for vertical)
• no-repeat
• inherit

You can use this property values and see the difference. Eg: background-repeat: repeat-x. Live Example click here.

Background-position: We can adjust the position of the background-image using this property. It has the following values.

•  left top
•  left center
•  left bottom
•  right top
•  right center
•  right bottom
•  center top
•  center center
•  center bottom
•  x% y% (values in percentage).
•  x(px) y(px) (values in pixel).

click the above values to see the live demo.

Continue in part2.