Monday, 25 March 2013

A to Z about CSS


CSS Tutorial



 

 

 

 

 

 

 

 

 

 

 

 

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets.
CSS easy Manage a lot of Website page Layout.
CSS save a lot of Time.
CSS Sheets make Global change to all website pages.


CSS (Cascading Style Sheets) use for how to display HTML elements and elements style are set using CSS properties. Using CSS style you can change every elements style can change as you like. style sheets create and include is so easy it means using CSS Style Sheet update document formatting and maintain consistency across multiple documents.
Coding individual elements is best way done while document is being created. Style Sheets like a 'blueprints', because Style sheets holding a group of style related properties and value.
You can add comments to your <style> section or Style Sheet by the comments with /* and */.
For example. /* Define a Font Style in Header Text */



Advantage of CSS

Easy Manage
CSS with you can better manage over website. You can specify value of properties that use and you can create good style sheets.
Global Change
Style Sheets to make global change to all documents from a single location. When Style Sheet appear with web page it is know as Cascading Style Sheet
CSS Save a lot of time
When we create HTML documents at that time we separate set attributes value in each elements. but it is limited use. now, CSS give a lot of flexibility to set the value of properties in elements.
Easy Maintenance
CSS sheets Maintenance easier and you can get edit the elements properties in style sheets.
Inline/Internal/External Style Sheets
CSS Styles are write in inline in elements line, Internal style sheets write in Head part, or External style sheets write in external .css files. External style sheets enable you to change the elements and layout style of all the pages in a Web site, just by editing one single file.
Page Load Faster
HTML Web documents with Style Sheets easier and fast Load.


3 Types of CSS Styles - Internal, External, Inline

Defination of Style Sheets

You can write style sheet code in three different ways.
1.)Inline CSS style Sheet
2.)Internal Style Sheet
3.)External Style Sheet
All this three Style Sheet Syntax different types write in a document. Next Chapter learn all this three style sheet how to write in a document:

Inline Style Sheet

Inline Style Sheet includes main HTML documents. and place on the elements inline in you can enable to write. Mostly it i use to number of(one or two) elements style, font, background etc.. you can change.
What is the Syntax of Inline Style Sheets Learn More...

Internal Style Sheet

Internal Style Sheet includes main HTML documents. Style Sheet is used in web page with in <style>.....</style> tags and between this tags style properties are listed. The <style>tag is Normally written within <head>.....</head> tag.
What is the Syntax of Internal Style Sheets Learn More...

External Style Sheet

External Style Sheet is defined in a separate file. External style sheets enable you to change the elements and layout style of all the pages in a Web site, just by editing one single file. External Style Sheet should have extension .css and it is linked with the web documents.
What is the Syntax of External Style Sheets Learn More...

CSS Inline Style Sheets

Inline CSS Style Sheet consists of set a rules in 4 part:
1.Selector,
2.Style,
3.Property, and
4.Value.


Syntax understand

 

The selector is normally the HTML element you want use to style.
The style is defining the property or value is supported by CSS style.
The elements decorated declaration consists of a property and set a suitable value.


Example Code:

<p style="color:purple;margin-left:20px">This is a paragraph line. </p>

<div style="color:purple;font-size:16px;background-color:#FF6633;">This is a paragraph Second line.</p>
Online Try This Code Your Self....   »

Example Result:

This is a paragraph line.
This is a paragraph Second line.

CSS Internal Style Sheets

Internal style sheet declare include web document. Style Sheet write inside Style Tag. Internal CSS Style Sheet consists of set a rules in 3 part:
1.Selector,
2.Property, and
3.Value.


Syntax understand

 

Internal Style Sheet can be writing in <head> tags.The selector is normally the HTML element you want use to style.
The elements decorated declaration consists of a property and set a suitable value.


Example Code:

<head>
<style type="text/css">
p {
   color:purple;
   margin-left:20px;
  }
div{
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
<p>This is a paragraph line.</p>
<div>This is a paragraph Second line.</div>
</body>
Online Try This Code Your Self....   »

Example Result:

This is a paragraph line.
This is a paragraph Second line.

CSS External Style Sheets

External style sheet write .css file and used to make global change and manage to all documents from a single location to all web documents. External CSS Style Sheet consists of set a rules in 3 part:
1.Selector,
2.Property, and
3.Value.


Syntax Understand



External style sheets enable you to change the elements and layout style of all the pages in a Web site, just by editing one single file. External Style Sheet should have extension .css and it is linked with the web documents.

The selector is normally the HTML element you want use to style. The elements decorated declaration consists of a property and set a suitable value.


Example Code:

<head>
<link rel="stylesheet" type="text/css" href="jnj_css.css" />
</head>
<body>
<p>This is a paragraph line.</p>
<div>This is a paragraph Second line.</div>
</body>

Example Code:External Source Code (jnj_css.css)

p {
   color:purple;
   margin-left:20px;
  }
div{
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }
Online Try This Code Your Self....   »

Example Result:

This is a paragraph line.
This is a paragraph Second line.












CSS Class

CSS Syntax

CSS class use to particular elements name and change individual selector class property value easy modify. CSS class identify using dot(".") concat with user define class name.
CSS Class allows you to set a particular style for any HTML elements with the same class.

Syntax Understand

If you use same class name in single elements than syntax write first dot("."), user define class name and property value.
.Class-Name { Property:Value; }

If you use same class name in multiple elements than syntax write first elements name with dot(.), user define class name and property value.
Element.Class-Name { Property:Value; }


Example Code:

<head>
<style type="text/css">
.line_1 {
   color:purple;
   margin-left:20px;
  }
.line_2 {
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
<p class="line_1">This is a paragraph line.</p>
<div class="line_2">This is a paragraph Second line.</div>
</body>
Online Try This Code Your Self....   »

Example Result:

This is a paragraph line.
This is a paragraph Second line.

CSS Id vs Class

It important to know you where is use CSS Class and ID. ID is a use to "unique identifier an element". It means ID selector can be called only one times in a document while class selector can be called multiple times in a document.
But you can use Class have a maximum flexibility. ID is use for when you using JavaScript its identify of element using getElementByID function. But Class and ID is not any strong rules to when to use ID and when to use Class.
  • CSS ID: Unique Personally Identification(ID) in Number of ID's.
  • CSS Class: Multiple Identification in Number of Class.

CSS ID

CSS ID Syntax

CSS ID assign to a individual identifier to an HTML element. ID use to specify style that can only be used by the selector element.
The ID selector use the HTML elements, and it is defined with a hash("#").

Syntax Understand

If you write ID name in single elements than syntax is first hash("#"), user define ID name and property value.
#ID-Name { Property:Value; }

and If you write ID name in multiple elements than syntax is first elements name and hash("#"), user define ID name and property value.
Element#ID-Name { Property:Value; }

Example Code:

<head>
<style type="text/css">
#line_1 {
   color:purple;
   margin-left:20px;
  }
#line_2 {
   color:purple;
   font-size:16px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
<p id="line_1">This is a paragraph line.</p>
<div id="line_2">This is a paragraph Second line.</div>
</body>
Online Try This Code Your Self....   »

Example Result:

This is a paragraph line.
This is a paragraph Second line.

CSS Id vs Class

It important to know you where is use CSS Class and ID. ID is a use to "unique identifier an element". It means ID selector can be called only one times in a document while class selector can be called multiple times in a document.
But you can use Class have a maximum flexibility. ID is use for when you using JavaScript its identify of element using getElementByID function. But Class and ID is not any strong rules to when to use ID and when to use Class.
  • CSS ID: Unique Personally Identification(ID) in Number of ID's.
  • CSS Class: Multiple Identification in Number of Class.

CSS Text Properties

CSS TEXT properties are various type. For example, you are use to change the style like color of text, text align, text decoration, text letter spacing properties and much more.
Following CSS text properties various type style listed. Using these properties you are play with Text Styles.

CSS TEXT Color

TEXT Color property is used to set the color of the text. The color can be specified following two types:
1. Color Name: "Orange"
2. Color Code: "#FFA500;"
Example Code:
<p style="color:orange;">CSS TEXT Color Name is Orange</p>
<p style="color:#FFA500;">CSS TEXT Color Code is #FFA500</p>

Example Result:
CSS TEXT Color Name is Orange
CSS TEXT Color Code is #FFA500

CSS TEXT Align

TEXT Align property is used to set the horizontal alignment of text.
The text align value can be specify Center, Left, Right, or Justify.
When text align set is justify than the both width equal like newspaper or books.
Example Code:
<p style="text-align:right;">CSS TEXT Align Right</p>
<p style="text-align:center;">CSS TEXT Align Center</p>
<p style="text-align:left;">CSS TEXT Align Left</p>

Example Result:
CSS TEXT Align Right
CSS TEXT Align Center
CSS TEXT Align Left

CSS TEXT Indent

TEXT Indent property is used to set the paragraph first line leave the left space.
Example Code:
<p style="text-indent:35px;">This Paragraph purpose is text indent in
 35 pixels space first leave a space than the after start a first line
 paragraph text.</p>

Example Result:
This Paragraph purpose is text indent in 35 pixels space first leave a space than the after start a first line paragraph text.

CSS TEXT Decoration

TEXT Decoration property is used to decorate the text like underline, overline, blink, through etc.
Example Code:
<p style="text-decoration:underline;">Text is underline decorate</p>
<p style="text-decoration:overline;">Text is overline decorate</p>
<p style="text-decoration:blink;">Text is blink decorate</p>
<p style="text-decoration:line-through;">Text is line delete decorate</p>
<p style="text-decoration:none;">Text is Nothing any decorate value</p>

Example Result
Text is underline decorate
Text is overline decorate
Text is blink decorate
Text is line delete decorate
Text is Nothing any decorate value

CSS Text Transformation

TEXT Transformation property is used to specify uppercase and lowercase letters in a text.
TEXT Transformation property set a value like capitalize means First letter capital for word, uppercase, lowercase.
Example Code:
<p style="text-transform:capitalize;">this line transform capital</p>
<p style="text-transform:lowercase;">this line transform Lowercase</p>
<p style="text-transform:uppercase;">this line transform Uppercase</p>

Example Result:
This Line Transform Capital.
this line transform lowercase.
THIS LINE TRANSFORM UPPERCASE.

CSS Letter Spacing

<p style="letter-spacing:5px">This text is letter spacing</p>

Example Result:
This text is letter spacing

CSS Word Spacing

<p style="word-spacing:25px">This text is Word Spacing</p>

Example Result:
This text is Word Spacing

CSS White Space

CSS TEXT White Space use to predefine task. It possible value is Normal, Pre etc..
<p style="white-space:pre">This text is Predefined Area
Predefined area second line</p>

Example Result:
This text is Predefined Area
Predefined area second line

CSS Text Shadow

<p style="text-shadow:4px 4px 8px orange">This text is Text Shadow  Effect
</p>

Example Result:
This text is Text Shadow Effect


CSS Font Properties

CSS Font properties are various type. For example, you are use to change the font style like font family, font size, font style, font weight properties and much more.
Following CSS Font properties various type style listed. Using these properties you are play with Font Style.

CSS Font Family

Example Code:
<p style="font-family:'Courier New', Courier, monospace;">This example
is CSS font family example. Font family type is Courier New, Curier,
monospace type text can be display</p>

Example Result:
This example is CSS font family example. Font family type is Courier New, Curier, monospace type text can be display.

CSS Font Size

Example Code:
<p style="font-size:18px;">This example font size is 18 pixels</p>

Example Result:
This example font size is 18 pixels

CSS Font Style

Example Code:
<p style="font-style:normal">This text type Normal</p>
<p style="font-style:italic">This text type Italic</p>
<p style="font-style:oblique">This text type Oblique</p>

Example Result:
This text type Normal
This text type Italic
This text type Oblique

CSS Font Weight

Example Code:
<p style="font-weight:normal;">This example font weight type Normal</p>
<p style="font-weight:bold;">This example font weight type Bold</p>
<p style="font-weight:lighter;">This example font weight type Lighter</p>

Example Result:
This example font weight type Normal
This example font weight type Bold
This example font weight type Lighter

CSS Font Variant

CSS Font Variant only word First Capital letter can be display in Variant style.
Example Code:
<p style="font-variant:small-caps;">Example is Font-Variant Style</p>

Example Result:
Example is Font-Variant Style

CSS Background Properties

CSS Background properties are various type. For example, you are use to change the Background style like background-color, background-image, background-position, background-repeat, background-attachment properties and much more.
Following CSS Background properties various type style listed. Using these properties you are play with Background Style.
CSS Background Color
Example Code:
<p style="background-color:orange;">This paragraph background color 
orange</p>
Example Result:
This paragraph background color orange

CSS Background Image

Example Code:
<p style="background-image:url(/jix/img_nat.png);color:#FFFFFF;
height:130px;width:200px;font-size:20px">This example is Background 
Image set in element.</p>
Example Result:s example is Background Image set in element.

CSS Background Repeat

CSS Background Repeat is Both side Horizontaly or Varticaly than Posible value is repeat, no-repeat, repeat-x means only verticaly repeat, and repeat-y means only horizontaly repeat.
Example Code:
<p style="background-image:url(/jix/img_nat.png);height:120px;
background-repeat:no-repeat;">This example is Background repeat.</p>
Example Result
This example is Background repeat.

CSS Background Attachment

Example Code:
<p style="background-image:url(/jix/img_nat.png);height:130px;
width:200px;overflow:scroll;background-attachment:fixed;
color:white;">This example is Background attachment image is fixed 
means image does not moved only fixed attached a image. background 
attachment posible value fixed or scroll. you can use this value and 
display results.This example is Background attachment image is fixed 
means image does not moved only fixed attached a image. background 
attachment posible value fixed or scroll. you can use this value and 
display results.</p>
y results.

CSS Background Position

Example Code:
<p style="background-image:url(/jix/img_nat.png);height:120px;
background-repeat:no-repeat;background-position:150px;">
This example is Background Position left 150 pixel.</p>
This example is Background Position left 150 pixel.

CSS Shorthand Code Style

Example Code:
<p style="height:130px;width:200px;overflow:scroll;background:
url(../../jix/img_nat.png) repeat fixed;color:white;">This example is 
Background attachment image is fixed means image does not moved only 
fixed attached a image.background attachment posible value fixed or 
scroll. you can use this value and display results.</p>

CSS Hyperlinks Style

CSS Hyperlinks Style work when cursor rollover or click on specific hyperlink. you are set hyperlinks style using various properties like background-color, font-family, font-weight, color, font-size properties and much more..
CSS Special style purpose links are that they can be set different style properties for depending.
Special Style Purpose use 4 links:

a:link - Normal link, unvisited link
a:visited - Link already user has been Visited
a:hover - when the user mouse over to the Link
a:active - Clicked the Link at that moment

When set the style for several link, there are under some Rules:

a:hover always come after a:link and a:visited
a:active always come after a:hover
Following CSS hyperlinks Style properties are various type style listed.

CSS Links Color

Example Code:
<head>
<style type="text/css">
a:link {color:#F9864D;}    /* normal link */
a:visited {color:#F9864D;} /* visited link */
a:hover {color:#575757;}   /* mouse over link */
a:active {color:#575757}  /* selected link */
</style>
</head>
<body>
Click Here <a href="../css_tutorial.php" >Example Link</a>
</body>
Example Result:
Click Here  Example Link

CSS Links Background Color

Example Code Style:
<style type="text/css">
a:link {background-color:#CCCCCC;}    
a:visited {background-color:#CCFFCC;} 
a:hover {background-color:#CCFFFF;}   
a:active {background-color:#FFFFFF;}  
</style>

CSS Text Decoration

Example Code Style:
<style type="text/css">
a:link {text-decoration:none;}    
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;}   
a:active {text-decoration:underline;}  
</style>
 
 
 
 
 

CSS Links Style Type

CSS List Style are use to list item display in Ordered list, Unordered list. Set ordered list style like type roman, alpha, numeric or Unordered list style type circle, square, and disk.
List Style Type possible values see the list-style-type:

Unordered List Value

Value
Description
disk
Specifies the disk type list, by default value
circle
Specifies the circle type list.
square
Specified the square type list.
none
Nothing any style maker

Ordered List Value

Value
Description
decimal
Specified the decimal numeric list like(1, 2, 3 etc..)
by default value set.
upper-alpha
Specifies the upper-alpha (A, B, C, D, etc..)
lower-alpha
Specifies the lower-alpha list like(a, b, c, d, etc..)
upper-roman
Specified the upper-roman list like(I, II, III, etc..)
lower-roman
Specified the lower-roman list like(i, ii, iii, etc..)

CSS List Style Type

Example Code:
<ul style="list-style-type:square;">
<li>Item one</li>
<li>Item two</li>
</ul>
 
<ul style="list-style-type:lower-roman;">
<li>Item one</li>
<li>Item two</li>
</ul>
Example Result:
  • Item one
  • Item two
  1. Item one
  2. Item two

CSS List Style Image

Example Code:
<ul style="list-style-image:url(jix/new.png);">
<li>Item one</li>
<li>Item two</li></ul>
Example Result:
  • Item one
  • Item two

CSS List Style Position

Example Code:
<ul style="list-style-position:outside;list-style-type:lower-roman;">
<li>Item one</li>
<li>Item two</li>
</ul>
 
<ul style="list-style-position:inside;list-style-type:lower-alpha;">
<li>Item one</li>
<li>Item two</li>
</ul>
Example Result:
  1. Item one
  2. Item two
    1. Item one
    2. Item two


















CSS Display inline, block, inline-block, none

CSS Display Style are use to list of item display inline, block, inline-block, none.

CSS Display Properties

Syntax
Value
Description
display
inline
block
inline-block
none
Specifies the display of the elements


CSS Display Inline Style

Display inline means element is displayed inline current block on the line.
Example-Code:
<head>
<style type="text/css">
li{
  display:inline;
  }
</style>
</head>
<body>
<p>This example is Inline elements</p>
<ul>
<li>Menu.1</li>  | 
<li>Menu.2</li>  | 
<li>Menu.3</li>  | 
<li>Menu.4</li> 
</ul>
</body>


Example-Result
This example is Inline elements
  • Menu.1
 |  
  • Menu.2
 |  
  • Menu.3
 |  
  • Menu.4


CSS Display Block Style

Display block means element is display as a block. Header and Paragraphs have always been.
Example-Code:
<head>
<style type="text/css">
li{
  display:block;
  }
</style>
</head>
<body>
<p>This example is First Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
<p>This example is Second Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
</body>


Example-Result:
This example is First Block paragraph
  • This is block Menu.1
  • This is block Menu.2
This example is Second Block paragraph
  • This is block Menu.1
  • This is block Menu.2

CSS Display inline-block Style

Display inline block means element is display as a inline. but it's behaves is a block type.
Example-Code:
<head>
<style type="text/css">
li{
  display:inline-block;
  }
</style>
</head>
<body>
<p>This example is First Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
<p>This example is Second Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
</body>


Example-Result:
This example is First Block paragraph
  • This is block Menu.1

  • This is block Menu.2
This example is Second Block paragraph
  • This is block Menu.1

  • This is block Menu.2

CSS Display none Style

Display none means element is not display. Element is not displayed at all.
Example-Code:
<head>
<style type="text/css">
li{
  display:none;
  }
</style>
</head>
<body>
<p>This example is First Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
<p>This example is Second Block paragraph</p>
<ul>
<li>This is block Menu.1</li>
<li>This is block Menu.2</li>
</ul>
</body>


Example-Result:
This example is First Block paragraph
This example is Second Block paragraph
 
 
 
 
 
 
 
 
 
 
 
 

CSS Visibility

CSS Visibility Style are set an elements to display hide or show.
visibility set visible than element display or hidden does not element display.


CSS Visibility Properties

Syntax
Value
Description
visibility
visible
hidden
Specifies the visibility of the elements


CSS Visibility Style

Example-Code:
<p>This example is Visibility elements</p>
<ul>
<li style:"visibility:hidden">Menu.1</li> 
<li style:"visibility:visible">Menu.2</li>
</ul>
Online Try This Code Your Self....   »

Example-Result
This example is Visibility elements
Menu.2





















CSS Layout Model

Following CSS Layout Model are understand about basic knowledge of Content padding, margin or border.
The Layout Model allows us to place a border around padding and margin are better manage to set a value of elements properties.

  
Margin
Margin is defining area of the content border outside area. Margin is not a supported like background-color or background-image property value. It is use to space a margin elements.

Border

Border are define the content border. it is use to display content(like text, images etc..) outside border. Many border properties are use to set a value.

Padding

Padding are define the content or border in this two part middle part like a padding. it is us to give a space between content or border.

Width or Height of Elements
As with all CSS properties , you can specify an absolute value or a relative value. when specifying a relative value, the value is applied to the size of element's content(such as font-size), not the default value of the padding.
For example define padding of the elements font size: padding:200%;

Total width can be count by following way..
Total width= width + left padding + right padding + left border + right border + left margin + right margin

Total Height can be count by following way..
Total Height= height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

CSS Border Style Properties

The CSS Border Style Properties set border style like border-width, border-style and border-color.

CSS Border Property

Border Properties are you can allow to individual list like
Border
Define Properties
border-top
border-top-color
border-top-style
border-top-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width


Mixed Border Properties: (border-style, border-width, border-color)

Example Code:
<p style="border-style:solid;border-width:1px;border-color:
orange;">This Paragraph is example of the border properties of CSS 
style can change a border color, border width or border style.</p>
Online Try This Code Your Self....   »

Example Result:
This Paragraph is example of the border properties of CSS style can change a border color, border width or border style.

CSS Border Style

Example Code:
<p style="border:2px solid orange;"> border style is solid.</p>
<p style="border:2px dotted orange;"> border style is dotted.</p>
<p style="border:2px dashed orange;"> border style is dashed.</p>
<p style="border:2px double orange;"> border style is double.</p>
<p style="border:2px groove orange;"> border style is groove.</p>
<p style="border:2px ridge orange;"> border style is ridge.</p>
<p style="border:2px inset orange;"> border style is inset.</p>
<p style="border:2px outset orange;"> border style is outset.</p>
<p style="border:2px hidden orange;"> border style is hidden.</p>
Online Try This Code Your Self....   »

Example Result:
border style is solid.
border style is dotted.
border style is dashed.
border style is double.
border style is groove.
border style is ridge.
border style is inset.
border style is outset.
border style is hidden.

CSS Shorthand Properties

CSS Border Style writes on Shorthand Style.
Example Code:
<p style="border-top:2px dashed orange;">top border style dashed.</p>
Online Try This Code Your Self....   »

Example-Result:
top border style dashed.































CSS Margin Style

The CSS Margin Properties set a specify space around elements (outside of border). Margin properties support following value type.

CSS Margin Value

Property
Value
Description
margin
Size_px
%
auto
Margin set in pixel value.
Margin set in Percentage value.
Margin set automatic.
margin-left
Size_px
%
auto
Margin set in pixel value.
Margin set in Percentage value.
Margin set automatic.
margin-right
Size_px
%
auto
Margin set in pixel value.
Margin set in Percentage value.
Margin set automatic.
margin-top
Size_px
%
auto
Margin set in pixel value.
Margin set in Percentage value.
Margin set automatic.
margin-bottom
Size_px
%
auto
Margin set in pixel value.
Margin set in Percentage value.
Margin set automatic.


CSS Margin Style

Example Code:
<p style="border-style:solid;border-color:orange;margin-left:30px;">
This Paragraph is example of the Left Margin use in CSS 
style can change a border color, border width or border style.</p>
Online Try This Code Your Self....   »

Example Result:
This Paragraph is example of the Left Margin use in CSS style can change a border color, border width or border style.

CSS Shorthand Margin Style

Example Code:
<p style="border:1px solid orange;margin:25px 25px 5px 50px;width:
300px;">This example is shorthand margin style property value are allow
to display results. border color orange and border style dashed.</p>
Online Try This Code Your Self....   »

Example-Result:
This example is shorthand margin style property value are allow to display results. border color orange and border style dashed.


Margin Set Value

Margin:12px;
All sides have Margin 12 pixels.

Margin:10px 20px;
Top and bottom have Margin 10 pixels.
Right and left have Margin 20 pixels.

Margin:10px 20px 30px;
Top Margin is 10px
Left and right are 20px
Bottom Margin is 30px

Margin:10px 20px 30px 40px;
Top Margin is 10px
Right Margin is 20px
Bottom Margin is 30px
Left Margin is 40px





























CSS Padding Properties

The CSS Padding Properties set a specify space between border and elements. Padding properties support following value type.

CSS Padding Value

Property
Value
Description
padding
Size_px
%
auto
Padding set in pixel value.
Padding set in Percentage value.
Padding set automatic.
padding-left
Size_px
%
auto
Padding set in pixel value.
Padding set in Percentage value.
Padding set automatic.
padding-right
Size_px
%
auto
Padding set in pixel value.
Padding set in Percentage value.
Padding set automatic.
padding-top
Size_px
%
auto
Padding set in pixel value.
Padding set in Percentage value.
Padding set automatic.
padding-bottom
Size_px
%
auto
Padding set in pixel value.
Padding set in Percentage value.
Padding set automatic.


CSS Padding Style

Example Code:
<p style="border-style:solid;border-color:orange;padding-left:30px;">
This Paragraph is example of the Left padding space use in CSS 
style can change a border color, border width or border style.</p>
Online Try This Code Your Self....   »

Example Result:
This Paragraph is example of the Left padding space use in CSS style can change a border color, border width or border style.

CSS Shorthand Padding Style

Example Code:
<p style="border:1px solid orange;padding:25px 25px 5px 50px;width:
300px;">This example is shorthand padding style property value are allow
to display results. border color orange and border style solid.</p>
Online Try This Code Your Self....   »

Example-Result:
This example is shorthand padding style property value are allow to display results. border color orange and border style solid.


Padding Set Value

padding:12px;
All sides have padding 12 pixels.

padding:10px 20px;
Top and bottom have padding 10 pixels.
Right and left have padding 20 pixels.

padding:10px 20px 30px;
Top padding is 10px
Left and right are 20px
Bottom padding is 30px

padding:10px 20px 30px 40px;
Top padding is 10px
Right padding is 20px
Bottom padding is 30px
Left padding is 40px





























CSS Outline Properties

The CSS Outline Property use to set specify border outside color, width and style decorate on elements.

CSS Outline Property

Property
Value
Description
outline-color
#XXXXXXX
Set the outline color.
outline-width
Size_px
%
auto
set the outline width size.
ouline-style
none
solid
dotted
dashed
double
groove
ridge
inset
outset
inherit
set the outline style


Mixed Outline Properties: (outline-style, outline-width, outline-color)

Example Code:
<p style="outline-style:solid;outline-width:2px;outline-color:
orange;">This Paragraph is example of the outline properties of CSS 
style can change a outline color, outline width or outline style.</p>
Online Try This Code Your Self....   »

Example Result:
This Paragraph is example of the outline properties of CSS style can change a outline color, outline width or outline style.

CSS Outline Style

Example Code:
<p style="border:1px solid orange;outline-style:solid">
outline style solid.</p>
<p style="border:1px solid orange;outline-style:dotted">
outline style dotted.</p>
<p style="border:1px solid orange;outline-style:dashed">
outline style dashed.</p>
<p style="border:1px solid orange;outline-style:double">
outline style double.</p>
<p style="border:1px solid orange;outline-style:groove">
outline style groove.</p>
<p style="border:1px solid orange;outline-style:inset">
outline style inset.</p>
<p style="border:1px solid orange;outline-style:outset">
outline style outset.</p>
 
 

CSS Float and Clear Properties

The CSS Float property use for set an element can be wrap around left or right side. Float is use to insert a image in wrap around text.

CSS Outline Property

Property
Value
Description
float
left
right
none
Set the wrap float side.
clear
left
right
both
none
set the allow to wrap flot side.


CSS Float Property

Example Code:
<div style="width:250px;">
<p style="float:left;margin:5px;font-size:18px;"> Float </p>
<p>This example is display wrap around left float style in the elements.
the paragraph style font-size is 18 pixel are write.</p>
<.div>
Online Try This Code Your Self....   »

Example Result:
Float
This example is display wrap around left float style in the elements. the paragraph style font-size is 18 pixel are write.


CSS Clear Property

Example Code:
<div style="width:250px;">
<p style="float:left;margin:5px;font-size:18px;"> Float </p>
<p style="clear:both;">This example is display wrap around left float style in the elements.
the paragraph style font-size is 18 pixel are write.</p>
<.div>
Online Try This Code Your Self....   »

Example Result:
Float
This example is display wrap around left float style in the elements. the paragraph style font-size is 18 pixel are write.
 
 
 
 

CSS Align Style

The CSS Align property set the elements align left or right side.
Previous we learn text align reference same way set the float align in multiple elements
CSS align Property set left or right side with allow we can set a margin of element, padding of elements and much more.


CSS Align Style

Example Code:
<div style="width:250px;float:right;background-color:orange;">
<p>This example is content the elements align in left or right side 
you can set. the paragraph font size is 12 pixel.</p>
<.div>
Online Try This Code Your Self....   »

Example Result:
This example is content the elements align in left or right side you can set. the paragraph font size is 12 pixel.




 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSS Position Property- Relative, Absolute, Fixed

The CSS position property refer to set an element positioning. Set specify elements position like relative, absolute and fixed.


CSS Relative Positioning

Relative positioning in CSS you use position:relative; followed by the relative offset from top, right, bottom or left. Relative position is each elements related properties(like margin, background color etc..).
Example Code:
<div style="position:relative;left:120px;background-color:orange;
width:120px;">This division part has relative positioning for each
elements.</div>
Online Try This Code Your Self....   »

Example Result:
This division part has relative positioning for each elements.

CSS Absolute Positioning

Absolute positioning in CSS you use position:absolute; followed by the absolute offset from top, right, bottom or left. Absolute position is each elements related properties(like margin, background color etc..).
Example Code:
<div style="position:absolute;top:35px;left:120px;background-color:
orange;">This division part has relative positioning for each elements.
</div>
Online Try This Code Your Self....   »


CSS Fixed Positioning

Fixed positioning in CSS you use position:fixed; followed by the fixed offset from top, right, bottom or left. Fixed position is each elements fixed properties(like margin, background color etc..).
Example Code:
<div style="position:fixed;top:35px;float:right;background-color:
orange;">This division part has fixed positioning for each elements.
</div>
<div style="width:400px; height:1400px; background-color:#FFCCCC"> 
This example is Fixed Elements display.
</div>
Online Try This Code Your Self....   »
 
 
 
 
 
 
 
 
 
 
 
 

CSS Element Size

 

The CSS elements size use to set a minimum elements size or maximum size value can be set.


CSS Elements Value

Property
Value
Description
weight
length
%
auto
Sets the width of an element
height
length
%
auto
Sets the Height of an element
max-weight
length
%
auto
Sets the max-width of an element
min-weight
length
%
auto
Sets the min-width of an element
max-height
length
%
auto
Sets the max-height of an element
min-height
length
%
auto
Sets the min-height of an element


CSS Elements Style

Elements style use to set a maximum or minimum size of each elements.
Example Code:
<textarea style="height:70px;max-height:150px;width:400px;max-width:
550px;">This division part has relative positioning for each elements.
</textarea>
Online Try This Code Your Self....   »

Example Result:
This example is show a textarea elements height and width both are set in maximum or minimum value.

CSS Layer z-index

The CSS layers style refer to set a applying the z-index property to each elements that overlap with each other.
The z-index property set a event of an overlap. Overlap is easy to set the position property and create than advance layout.
z-index value is also support negative value like(-1) only work when with position is absolute set an element.


CSS z-index Style

Example Code:
<div style="background-color:orange;
       width:130px;
       height:150px;
       top:15px;
       left:100px;   
       position:relative;
       z-index:1;">
</div>
<div style="background-color:#FF3333;
       width:130px;
       height:150px;
       position:relative;
       top:100px;
       left:45px;
       z-index:2;">
</div>
<div style="background-color:#CCFF66;
       width:230px;
       height:70px;
       position:relative;
       top:-270px;
       left:145px;
       z-index:3;">
</div>
Online Try This Code Your Self....   »

Example Result:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

All CSS Properties Groupwise

Background Properties

background 
background-attachment 
background-color
background-image
background-position 
background-repeat 

Border Properties

border 
border-style 
border-width
border-color 
border-top
border-top-color 
border-top-style
border-top-width
border-right 
border-right-color 
border-right-style
border-right-width
border-bottom 
border-bottom-color 
border-bottom-style
border-bottom-width
border-left 
border-left-color
border-left-style
border-left-width

Font Properties

font
font-family
font-style
font-size
font-weight
font-variant
font-size-adjust

Margin Properties

margin
margin-top
margin-right
margin-bottom
margin-left

Padding Properties

padding
padding-top
padding-right
padding-bottom
padding-left

Outline Properties

outline
outline-color
outline-style
outline-width

Text Properties

color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align
white-space
word-spacing

Table Properties

border-collapse 
border-spacing 
caption-side
empty-cells
table-layout

List Properties

list-style
list-style-image
list-style-position
list-style-type

Dimational Properties

height
max-height
min-height
width
max-width
min-width

Positional Properties

bottom
clear
clip
cursor
display
float
left
overflow
position
right
top
visibility
z-index

Print Properties

page-break-after
page-break-before
page-break-inside

Generated Properties

content
counter-increment
counter-reset
quotes

 







CSS Pseudo Class

The CSS pseudo class are use to special purpose like add effects to some element.
Selector:pseudo { Property:Value; }

If you can use class name in specify elements than syntax is elements name, dot(.), class name or pseudo Class.
Selector.Class:pseudo { Property:Value; }

Class Properties

Pseudo Class
Description
:active
set a style for elements activated.
:first-child
set a style for elements that is first child of list of elements.
:focus
set a style for element that has keyboard input focus.
:hover
set a style for element, when mouse over it.
:lang
set a style for elements specify language.
:link
set a style for elements in normal link(unvisited link).
:visited
set a style for element that has been visited link.


Anchor Selector:Pseudo

<style type="text/css">
a:link {color:#F9864D;}    /* normal link */
a:visited {color:#F9864D;} /* visited link */
a:hover {color:#575757;}   /* mouse over link */
a:active {color:#575757}  /* selected link */
</style>


Anchor Selector.Class:Pseudo

<style type="text/css">
a.ex1:link {color:#F9864D;}
a.ex1:hower {color:#575757;}
</style>
<body>
<a class="ex1" href="list.php">CSS Alphabetical Properties List</a>
</body>




CSS Pseudo Elements

The CSS pseudo elements are use to special purpose like add effects to some elements.


Selector:pseudo-Elements { Property:Value; }





If you can use class name in specify elements than syntax is elements name, dot(.), class name or pseudo Class.
Selector.Class:pseudo-Elements { Property:Value; }


Pseudo Element Properties

Pseudo Elements
Description
:after
add the content after the elements.
:before
add the content before the elements.
:first-letter
set a style for first character of the text element.
:firsr-line
set a style for first line of the text element.


pagraph Selector:after pseudo elements

This example set a image after a paragraph to be end.
<style type="text/css">
p:after {content:url(jix/new.png;}
</style>
<body>
<p>Example is :right Pseudo Elements</p>
</body>


paragraph Selector.image:before pseudo elements

This example set a image class before a paragraph start.
<style type="text/css">
p.image:before {content:url(jix/new.png;}
</style>
<body>
<p class="image">Example is :before Pseudo Elements</p>
</body>

Posted by at

1 comment:

  1. Jay Patel28 February 2018 at 21:30

    This text are copyright tutorial from way2tutorial.com/css/css_introduction.php website.
    you do not copy paste copyright material. I request you delete all the copy pages.

    ReplyDelete

Subscribe to: Post Comments (Atom)