Color Scheme Generator

CSS 3 Background Properties

I have already discussed about the background properties in Color and Background Properties.

background-size: 

 The background-size allows to decide the size of the image. Before CSS 3 size of the image was the size of the background image. With CSS 3 we can decide the height and width for the background image, following is the syntax for background-size:

background-size: <width> <height>;

Example :

This is sample for "background-size"





Its a very good feature

The one good feature added with CSS3 is that you can add multiple background images.

                   



Its a very good feature. The grass and tree are from two different images. But still both can be seen as background of single element.

background-origin:

     The background-origin property decides origin of the background image. It can start from border-box ie from border or padding-box from padding or can be placed only in the content box.

 

Example :

                   



background-origin: border-box

                   



background-origin: content-box

CSS 3 Border and Shadow Properties

 I have already written about CSS border properties in Margin, Border and Pdding Properties. This article contains the description "border-style", "border-color","border-width".
There are few more properties added with introduction of CSS 3.

Following are the properties introduced with CSS 3 :

1. border-radius

     This property is useful to give rounded corners to any element. This property allows developers to give rounded corner elements in their design. This elements having round corner background images and multiple div tags.
    "border-radius" is the short hand version of the border-*-*-radius. Following is the syntax using which we can implement the border radius property:

Syntax:

border-radius: <length | percentage %>

border-top-left-radius: <length | percentage %>

border-top-right-radius: <length | percentage %>

border-bottom-left-radius: <length | percentage %>

border-bottom-left-radius: <length | percentage %>


Example :


In the following example border-radius: 20px. We can change the radius by entering it in the text box below.

Enter radius :

In the following example border is set for the top-left, top-right, bottom-left and bottom-right of each element.

border-top-left-radius: 50px;

                                   

border-top-right-radius: 50px;

                                   

border-bottom-left-radius: 50px;

                                   

border-bottom-right-radius: 50px;

                                   

2. box-shadow

         The box-shadow property allows to give shadow effect any element. Following is the syntax for box-shadow:

 box-shadow:  H-shadow V-shadow blur spread color inset

H-shadow:  Horizontal shadow this is required value, we can have negative values as well.

V-shadow:  Vertical shadow this is required value, we can have negative values as well.

blur:  set the blur effect of shadow.

spread:  This decides the size of the shadow.

color:  this decides the color of the shadow.

inset: This sets the shadow inner shadow effect

Example:

box-shadow: 10px 10px 10px 2px black;

                                   

box-shadow: 10px 10px 10px 2px black inset;

                                   

box-shadow: -10px -10px 10px 2px black;

                                   

CSS 3 Selectors

With the introduction of CSS 3 many new selectors have been added to the CSS. We have already discussed selectors in CSS in following post:
CSS Selectors, CSS Link Styling, Pseudo Elements and Pseudo Classes.

CSS 3 Selectors

1.  Element1 ~  Element2

      In this type the style is applied to all the element's that are present after the element1. This is type of element selector.
  
Example:

div ~ table{

border: 0px;
background-color: red;

}

 

The above example will apply style to all the table elements present after div element in the document.

 

2.  Element [Attribute^="value"]

  This is attribute selector. This element selects the elements with attribute value starting with specific sub-string.

Example:

div [id^="test"]{

background-color: blue;

}

Above style will be applied to all the div elements which has id attribute that begins with "test".
 

3.  Element [Attribute$="value"]

  This is attribute selector. This element selects the elements with attribute value ending with specific sub-string.

Example:

a [href$=".html"]{

background-color: blue;

}

Above style will be applied to all the Anchor <a> elements which has href attribute that ending with ".html".

4.  Element [Attribute*="value"]

  This is attribute selector. This element selects the elements with attribute value having specific sub-string.

Example:

div [class*="test"]{

background-color: blue;

}

Output :

Get your potbellied pig to mate

Above style will be applied to all the div elements which has class attribute with value that contains sub-string "test".

5.  :root

 This is a "Structural Pseudo Element". The ":root" pseudo element applies style to the root element of the document. In html documents root element is always <html>.

Example:

:root{

background-color: blue;

}

   

6.  :nth-child(n)

 This is a "Structural Pseudo Element". The ":nth-child(n)" pseudo element applies style to the "nth" element of its parent. Where as n mentioned in the syntax can be a "number",  or a "formula" or "Keywords(even, odd)". 

   :nth-child(n) : This will select the nth element of its parent.

   :nth-child(an+b)  :  The formula acts as a counter and style is applied to every element after specific                intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.

   :nth-child(even) : This will apply style to all the even elements to apply style.

   :nth-child(odd) : This will apply style to all the odd elements to apply style.

 Example:

    div:nth-child(1) : This will select the first element of its parent.

   div:nth-child(2n+1)  :  The "2n+1" formula will select the elements starting from 1st  element(n=0), (n=1) 3rd element, (n=2) 5th element and so on.

   p:nth-child(even) : This will apply style to all the even para tags.

   p:nth-child(odd) : This will apply style to all the odd para tags.

  

7.  :nth-last-child(n)

            It is similar to the ":nth-child" except it will select child elements from end of parent.  It also uses numbers, formula and keywords.

   :nth-last-child(n) : This will select the nth element of its parent.

   :nth-last-child(an+b)  :  The formula acts as a counter and style is applied to every element after specific                intervals. n starts with 0. The 'a' and 'b' are two positive integers, values of both must be greater than equal to 0. We can use Addition and Subtraction operation in the formula.

   :nth-last-child(even) : This will apply style to all the even elements to apply style.

   :nth-last-child(odd) : This will apply style to all the odd elements to apply style.

8.  :nth-of-type(n)

        This will apply style to nth element of its parent having n-1 element before it. It can have values as numbers, formula or keyword.

For syntax you can look at the  :nth-child(n).

The major difference between nth-child and nth-of-type is that, the nth-child(3) will select the third child of its parent. Where as the nth-of-type(3) will select the third element a particular type of its parent.

9.  :nth-last-of-type(n)

        This will apply style to nth element of its parent having n-1 element after it. It can have values as numbers, formula or keyword.

For syntax you can look at the  :nth-last-child(n).

10.  :first-of-type

              This is a "Structural Pseudo Element".  This will select first child element same as type of its parent.

It will similar to :nth-of-type(n), except it will select only first element.

Example:

Following code will select the first div element.

div:first-of-type{

border: 0px;
background-color: red;

}

11.  :last-of-type

              This is a "Structural Pseudo Element".  This will select last child element same as type as its parent.

It will similar to :nth-last-of-type(n), except it will select only last element.

12.  :only-of-type

           This is a "Structural Pseudo Element".   This will select the only element of its type, of its parent.


Example:

Following code will select the only span element.

span:only-of-type{
border: 0px;
background-color: red;
}

13.  :only-child

           This is a "Structural Pseudo Element".   This will select the only element of its parent.


Example:

Following code will select the only span element.

span:only-child{
border: 0px;
background-color: red;
}

14.  :only-child

              This is a "Structural Pseudo Element".  This will select last child element of its parent.


Example:

Following code will select the last div element.

div:last-of-type{
border: 0px;
background-color: red;
}

15.  :empty

                        This will apply style to all the empty elements. These elements should be empty it should not contain text nodes.

Content Property

The content property is used to insert the predefined content using the style sheet. The content property is used with ":after" and ":before" Pseudo elements. 

syntax:

<element>:after{content: <value>}

<element>:before{content: <value>}

Following are the values that are used for "content" property :

1. string: sets a string the string before or after the content of the element
2. counter: sets the counter value before or after the element.
3. attr(attribute): sets the content as the selector elements attribute.
4. open-quote: sets opening quote as content
5. close-quote: sets closing quote as content.
6. no-open-quote: Removes any open quote present before or after the element.
7. no-close-quote: removes any close quote present before or after the element.
8. url(url): sets the content as specified by the url. It can be image, video etc..
9. normal : sets the content to the normal.
10. none: sets content to nothing, if present 

Example 1: 

div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}

output of the above code :

This is the test for the content class. 

Example 2:

div.test_content:before
{
content: "<"attr(class)">";
font-size: 15px;
text-decoration: underline;
color:red;
}

    This is sample with with attr().

Example 3: using counter

         

span.count_inc
{
   counter-increment: counter_val;
}
span.count_inc:before
{
 content: counter(counter_val);
}

        
           Output when above classes are applied to the span tag.

             Test value
             Test value
             Test value

Pseudo Elements and Pseudo Classes

Pseudo elements and Pseudo classes are very interesting part of CSS, these are the elements and classes that are not present in the document. But the Pseudo elements and classes apply the style to elements based on their state or position in the document.
            For "Pseudo classes" you can go through the post posted earlier CSS Link Styling.The classes used apply style according to the state ":link, :visited, :hover, :active". 

Pseudo Elements

Pseudo elements will start with (:)or (::). These pseudo elements are like a virtual element, by using these we apply styles to the elements in the html/xhtml document. The pseudo elements and classes can be combined. Following are the Pseudo elements that are used in CSS :

• :after : This pseudo element will insert the content after the content of the element.

          Syntax :               

<class\element>:after{style}

      

         

       Example: 

       

div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}

This is the test for the after class.

• :before : This pseudo element will insert the content before the content of the element.
  
  
            Syntax :               
  
  
  <class\element>:before{style}
        
           
         Example: 
  
  
         
  
  div.test_before:before
  {
  content: "This is test before";
  font-size: 15px;
  text-decoration: underline;
  color:red;
  } 

           

This is the test for the before class.

Note: The :after and :before use "content property" to set the content before or after element.

• :first-letter : This pseudo element will apply the style to the first character of the text.

          Syntax :               

<class\element>:first-letter{style mentioned}

   

         

       Example: 

       

div.test_firstletter:first-letter

{

font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}

This the test for the first letter of the line. It will be styled as per the style in the above class.     

                         

• :first-line : This pseudo element will apply the style to the first line of the text.

          Syntax :               

<class\element>:first-line{style mentioned}

      

     
    

       Example: 

       

div.test_firstline:first-line
{
content: "This is test before";
font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}

This is the test to show first-line of the paragraph will be styled. The rest of the text will appear as it is. There will be no changed in it. first-line pseudo element is very useful to apply styles to first line in paragraph on any other tag.

z-index

  The z-index property decides order in which the elements are displayed in the web page. This property is useful to create layers for the document. This property gives the third dimension to the element. The element having z-index property will be displayed above or in background of other element.

Syntax

z-index: <numeric value>;

There are two values for the z-index auto and “numeric value” or order. The higher the numeric value the more the element is on the top of the other element. Lower(negative also) the value more element is displayed behind the other elements.

  This property works with position property.

Following is the code example of the z-index property:

<div id="zid1" style="border: 1px solid; height: 200px; position: relative; right: 0px; width: 200px;">

<div id="zid2" style="background-color: red; border: 1px solid; height: 100px; position: relative; width: 125px; z-index:10;">

Div 1

</div>

<div id="zid3" style="background-color: green; border: 1px solid; height: 100px; left: 20px; position: relative; top:-50px;  width: 125px;  ">

Div 2

</div>

</div>

Following is the output of the above code:
Now here you can see the red box is above the green box. This is because the z-index property of the element is set to 10.

Div 1

Div 2

Visibility Property

 The visibility property decides whether an element should be visible or not. It has three values:

o   visible: The visible value will make element visible.

o   hidden: The hidden value will hide the element. But the hidden element will not affect flow of the document

o   collapse: The collapse value will work only for table, table columns, table rows, table cells. As like the hidden value the flow of the table will not be altered.

Syntax:

visibility: {visible|hidden | collapse}

Example :

Div {visibility: visible}

P{visibility: hidden}

tr.test{visibility:collapse}

Display Property

The display property is used to display the box. The display property overrides normal flow of the document.  Following are the values for the display property :

  

  o     none:  will not show the element at all.

  o   block: It will display the element as block. This value when applied to the element will leave space on all the sides.

  o   Inline: When element is applied display:inline it will be part of the flow as part of the parent.

  o   list-item: The element will behave like a <li> element.

Syntax:

Display: {none| block| inline| list-item}

Following is the example for the display property: 

Select Display Property

none

block

inline

list-item

This is a sample for display.This is a sample for display.This is a sample for display.

 Div 1

This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.

Float Property

The element with float property can be set to left, right and none. The float property works only in horizontal directions. The element can be floated in left and right side, but not on top and down side.

       The box will float in right and left direction only. There are three values for the float property “left, right, none”

Example of the float property as follows:

The following example shows when you click on the radio button with float value as left or right or none. It will show you the output.

Left

Right

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.

Clear property

The clear property controls weather element having float property should float around the element with clear property. This property has four values those are      

- left : Element will not float on the left side of the element.

           -   right : Element will not float on the right side of the element having the property clear.

     -  both : The element will not allow any floating element on the both sides .

     - none: It will allow the element to float on both sides.

    Following is the example to demonstrate how the clear and float properties behave when used together:

Select Float Property

Left

Right

none

Select Clear Property

Left

Right

both

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.

CSS Position property

          To set the element at any position in browser we can use “position” property. We have already studied background-property in “Background properties”. This property sets the element at any given coordinates in the browser. Along with “position” property use the properties “Top, left, bottom, right ” and z-index. This property has following values:

o   static

This is the default value for this property.  With this value element is not positioned but appears in the flow of the element. The properties “top, left, bottom, right” and z-index are ignored by the browser.  You need to set position to static only if you need override the position set by previous element.

o   Relative

The position when set to relative will move the element from the position where it would have appeared in the normal flow of the document. With this property you can use the “top, left, bottom, right” properties. If in your document a image appears in the header of the page when position property is set to static and you change its position to relative with “left:50px”, “top:10px” . Then the image would move left by 50px and down by 10px.

o   Absolute

The element with property absolute will be positioned considering the “top, left”  corner of the parent element as origin. When the position:absolute is set then rest of the document flow will not impact the position of the element.

     
    

  

Following is the simple example for the position properties “static, relative,  absolute” . For relative elements is moved 10px top, 10px left and absolute the elements is moved 10px top, 10px right.

Static
Relative
Absolute

Div 1

Div 2

Margin Border and padding Properties of box model

Margin Property

Margin is the outermost area surrounding the element. It is transparent and does not have background color. Following are the properties that implement margin:

Margin-top:  This will apply the margin to top side of the element.

Margin-left: This will apply the margin to the left side of the element

Margin-bottom: This will apply the margin to the bottom side of the element.

Margin-right: This will apply margin to the right side of the element.

Following is the example for the margin

p{

margin-top: 10px;

margin-left: 10px;

margin-bottom: 10px;

margin-right: 10px;

}

You can also set the property for top, right, bottom, left using the “margin” property alone

p{

margin: 10px 10px 10px 10px

} 

The above example will set the margin for all the sides to 10px.

If you don’t want margin on left and the right side of the element but want 5px margin on the top and bottom side of the element. Following example shows how to do it.

p{

margin: 10px 0px 10px 0px

} 

Always remember when using the margin property it will be applied in order “top, left, bottom, right”.

p{margin: 5px;} 

The above example will set the property for all the sides to 5px.

Border Property

The border is the area between the padding and margin of the element.  The border property allows us to decide the display of the border.  The border has three important properties those are as follows:

-          border-width

This property will set the width for the property. It has following values.

o   Thin

o   medium

o   thick

o   Length

  For example with output :

<p style="border-style: solid; border-width: thin; width:200px; " >border-width:thin</p>

 <p style="border-style: solid; border-width: medium;  width:200px;" >border-width:medium</p>

  <p style="border-style: solid; border-width: thick;  width:200px;" >border-width:thick</p>

  <p style="border-style: solid; border-width: 10px;  width:200px;" >border-width:10px</p>

Output of above code is as follows:

border-width:thin

border-width:medium

border-width:thick

border-width:10px

-          border-style

 The border style property sets the style for the border. There are different values for the style property. Those are shown below with example:

      <p style="border-style: none; border-width: medium; width:200px; padding:5px;" >border-style:none</p>

       <p style="border-style: hidden; border-width: medium; width:200px; padding:5px;" >border-style:hidden</p>

              <p style="border-style: dashed; border-width: medium; width:200px; padding:5px;" >border-style:dashed</p>

       <p style="border-style: dotted; border-width: medium; width:200px; padding:5px;" >border-style:dotted</p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; " >border-style:solid</p>

       <p style="border-style: inset; border-width: medium; width:200px; padding:5px; " >border-style:inset</p>

       <p style="border-style: outset; border-width: medium; width:200px; padding:5px; " >border-style:outset</p>

       <p style="border-style: ridge; border-width: medium; width:200px; padding:5px; " >border-style:ridge</p>

       <p style="border-style: groove; border-width: medium; width:200px; padding:5px; " >border-style:groove</p>

Output of the above code is as follows:

border-style:none

border-style:hidden

border-style:dashed

border-style:dotted

border-style:solid

border-style:inset

border-style:outset

border-style:ridge

border-style:groove

-          border-color

This property sets the property for border of the element.  Values can be set directly by color name, rgb function or by using hexadecimal values. Following is the example for border-color property:

<p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: red " >border-color: red </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: rgb(255,255,0) " >border-color: rgb(255,255,0) </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: #0000FF " >border-color: #0000FF</p>

Output of the above code is as follow :

border-color: red

border-color: rgb(255,255,0)

border-color: #0000FF

Also you can set the border property using the “border” keyword. For setting the border property set it in the sequence of width, style and color and following is the example for the same:

        border: 5px dashed red;

The border has four sides top, bottom, left, right now if you want to set the different settings for all the sides you can do it by using following set of properties :

-          top

o   border-top-width: sets the width of the top border

o   border-top-style: sets the style of the top border

o   border-top-color: sets the color of the top border

o   border-top: sets all the above three properties.

-          bottom

o   border-bottom-width: sets the width of the bottom border

o   border-bottom-style: sets the style of the bottom border

o   border-bottom-color: sets the color of the bottom border

o   border-bottom: sets all the above three properties.

-          left

o   border-left-width: sets the width of the left border

o   border-left-style: sets the style of the left border

o   border-left-color: sets the color of the left border

o   border-left: sets all the above three properties.

-          right

o   border-right-width: sets the width of the right border

o   border-right-style: sets the style of the right border

o   border-right-color: sets the color of the right border

o   border-right: sets all the above three properties.

Following is the example where different settings are set for left,right, top, bottom using the properties mentioned above.

<p style="width: 500px;border-right: 5px inset black ;border-bottom: 5px dotted green ;border-left: 5px outset blue; text-wrap: wrap; border-top: 5px dashed red " >This is example of the border propert where different setting is set for top, left, bottom, right</p>

Output of the above code as follow :

This is example of the border propert where different setting is set for top, left, bottom, right

Padding property

Padding is area surrounding the element content. This property is affected by the element background color. It creates a space between element content and border of the element. Like the border and margin property this property has four sides “top, bottom, left, right”. Following are the keywords that are used to set values for this element:

-          Padding-top

Padding top property will set the padding for top side of the element content.                                   Padding-top: 10px;

-          Padding-left

Padding left property will set the padding for left side of the element content.

Padding-left: 10px;

-          Padding-bottom

Padding bottom property will set the padding for bottom side of the element content.

Padding-bottom: 10px;

-          Padding-right

Padding right property will set the padding for right side of the element content.

Padding-bottom: 10px;

         Example with output:

<p style="border-style: solid; border-width: medium; width:200px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;border-color: #0000FF " >This example sets the padding  for top, bottom, right, left to 10 px</p>

Output of the above code as follows :

This example sets the padding for top, bottom, right, left to 10 px

You can also set the above properties under single name.

-          padding

You can set the property under one name. Following are some examples of padding.

The below example will set the padding for element on the all sides.

p{padding: 5px;} 

Below example set the padding on the top and bottom side=10px, left and right side =5px.

p{padding: 10px 5px 10px 5px;}