Common CSS Properties

MinalS's Avatar author of Common CSS Properties
The CSS divides the properties into the number of categories. The different categories of the properties are Text Style, Text Layout, Background, Border, Margin, Padding, Page Layout, Element Type.
The CSS divides the properties into the number of categories. The different categories of the properties are as mentioned below:
  1. Text Style
  2. Text Layout
  3. Background
  4. Border
  5. Margin
  6. Padding
  7. Page Layout
  8. Element Type

Text Style



The text style property shows how the text appears on a page. The following properties of the text style are as mentioned below:

1. color: The property is used to set the foreground color of an element. It means the text color. There is no default value assigned to the property.

The following code snippet demonstrates the color property.
Code:
<style>
body{color: Red;}
p {color: rgb (0,0,255);}
}
</style>

<h1>The demo for properties in CSS</h1>
<p>This is the demo of color style property</p>
The output for the code is as shown below:



2. font-weight: The font-weight property is used to determine how bold the text is on the page. The possible values are keywords and numerical. The keyword can be absolute or relative. The absolute keywords are normal and bold. The relative keywords are bolder and lighter. The numeric values can be any integer value.

The following code demonstrates the property in CSS.
Code:
<style>
p.normal { font-weight: normal;}
p.thick { font-weight: bold;}
p.big { font-weight: 700;}
</style>
< p class=”thick”> The font weight is assigned </p>
<p class=”normal”> The font weight is normal </p>
<p class=”big”> The font weight is numerical value </p>
The output for the code is as shown below:



3. font-family: The property specifies the hierarchical list of preferred fonts that the browser uses for the element. There are several elements in the font-family as Times, Arial, fantasy and many more.

The following code demonstrates the property in CSS.
Code:
<style>
p.times { font-family: “Times New Roman”, Times, Serif;}
p.serif { font-family: “Arial”, Helvetica, Sans-Serif;}
</style>

<p class=”times”> The font style is times roman </p>
<p class=”serif”> The font style is serif </p>
The output for the code is as shown below:



4. font-size: It is used to specify the text size on the web page. The size can be specified in several units. The units as ems, exs, picas, pixels, inches, etc are used to add to the size of the text.

The following code demonstrates the property in CSS.
Code:
<style>
h1 { font-size: larger;}
h2{ font-size: x-small;}
</style>
<h1> Demo of font size </h1>
<h2> Different sizes are displayed</h2>
The output for the code is as shown below:



5. font-variant: The property is used to specify that the text should appear in small capitals. The values can be normal or small-caps. The normal specifies the text should appear using capital or lowercase letters. The normal is the default value of the text.

The following code demonstrates the property.
Code:
<style>
p.small { font-variant: small-caps;}
p.normal1 { font-variant: normal;}
</style>
<p class=”small”>The font variant is small </p>
<p class=”normal1”> The font variant is normal </p>
The output for the code is as shown below:



6. font-style: The property has several types of fonts. With CSS, you can specify the style as normal, italic and oblique. The default value of the property is normal.

The following code snippet demonstrates the property.
Code:
<style>
p.normal2 { font-style: normal;}
p.italic { font-style: italic;}
p.oblique { font-style: oblique;}
</style>
<p class=”normal2”>The font style is normal </p>
<p class=”italic”> The font style is italic </p>
<p class=”oblique”> The font style is oblique </p>
The output for the code is as shown below:



Text Layout



1. letter spacing: The property gives the spaces between the characters. They are specified in any length unit. The default value is normal.

The following code snippet demonstrates the property.
Code:
<style>
h2 { letter - spacing: 2px;}
h3 { letter - spacing: -4px;}
</style>
<h2>Demo of letter spacing </h2>
<h3>The space is assigned </h3>
The output for the code is as shown below:



2. word spacing: The word spacing is used to control the flow of the text. They can be specified in any length unit. The default value is normal.

The following code snippet demonstrates the property.
Code:
<style>
p2 { word-spacing: 35px;}
</style>
<p2>The text id displayed on the device</p2>
The output for the code is as shown below:



3. line-height: The property specifies the distance between the adjacent lines. The height can be specified in different ways as percentages, length units, or keyword normal.

The following code snippet demonstrates the property.
Code:
<style>
p.small { line-height: 70%;}
</style>
<p class=”small”>The paragraph is with small height<br/>
The space is reduced<br/>
The look is changed<br/>
</p>
The output for the code is as shown below:



4. vertical-align: The property is used to align the elements vertically across the page. They can be specified as keywords or percentage values.

The following code snippet demonstrates the property.
Code:
<style>
p.top { vertical-align: text-top;}
p.bottom { vertical-align: text-bottom;}
</style>
<p class=”top”>The text id aligned at the top </p>
<p class=”bottom”> The text is aligned at the bottom </p>
The output for the code is as shown below:



5. text-indent: The property is used to control the first line of any element. The values can be specified as percentage or length.

The following code snippet demonstrates the property.
Code:
<style>
p { text-indent: 100px;}
</style>
<p> The path of success is not easy. <br/> To survive in the world needs<br/>
talent and patience. <br/> The ladder to success is slow.
The output for the code is as shown below:



6. direction: The property specifies the base direction of the text. The values can be either right to left (rtl) or left to right (ltr). The default value is left to right (ltr).

The code snippet is as shown below:
Code:
<style>
div.ex { direction: rtl; }
</style>
<div> The text is displayed as normal text </div>
<div class=”ex”> The text is displayed from right to left </div>
The output for the code is as shown below:



Background



1. background-color: The property specifies the background color of an element. Any element can be assigned with the background color. The values can be transparent ot any color value.

The following code demonstrates the property.
Code:
<style>
h1
{
    color: Red;
}
p
{
    color: Lime;
}
</style>
<h1> The code sample for background property </h1>
<p> The color value is assigned </p>
The output for the code is as shown below:



2. background-image: The property is used to set the image at the background of the page or element. The values are specified either as URL of the image or none keyword.

The following code snippet demonstrates the property.
Code:
<style>
body
{
     background-image: Garden.jpg;
}
</style>
<h1>Welcome User!!!</h1>
The output for the code is as shown below:



3. background-attachment: The property is used to make the images scroll or fixed. The value is either fixed or scroll. The scroll specifies that the image should scroll as the page progresses. The fixed value states that the image should not move even if the page scrolls.

The code snippet for the property is as shown below:
Code:
<style>
body
{
    background - image: url (“Dock.jpg”);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
<p>The image for the page is fixed. It cannot be scrolled </p>
<p> Scroll the page down </p>
<p> The image is not movable </p>
<p> User cannot resize the image </p>
The output for the code is as shown below:



4. background-repeat: The property specifies how a browser places the background images when the dimensions of the image is less than the element. The parameters that can be assigned are repeat, repeat-x, repeat-y, and no-repeat.

The code snippet to demonstrate the property is as shown below:
Code:
<style>
body
{
    background-image: url (“Garden.jpg”);
    background-repeat: repeat-y;
}
<p>The image will be repeated </p>
The output is shown below:



Border



1. border-width: The width of the border is added using the property. The property can take values as keywords or length. The keyword values are thin, medium, and thick. The size of the border can be added using the length value parameter.

The following code snippet demonstrates the property.
Code:
<style>
p.first
{
    border-width: thick;
    border-style: dashed;
}
p.second
{
    border-width: thick;
    border-style: dotted;
}
</style>
<p class=”first”>This is the first paragraph </p>
<p class=”second”> This is the second paragraph </p>
<p class=”third”> This is the third paragraph </p>
The output for the code is as shown below:



2. border-color: The property is specified by using one and four colors. The border-color is used to give different colors to the edges of the element. The parameters are as follows:

One color value specifies that the same color is applied to all the edges of the element.
When two colors are used, the first color specifies the top and bottom edges, the second color value specifies for left and right.

When three colors are used, the first color is for the top edge, second color is for left and right edges, third color is for the bottom edge.

With four colors, each color specifies an edge of the element.

The code snippet is as shown below:
Code:
<style>
p.one
{
      border-style: dotted;
      border-color: Aqua;
}
p.next
{
      border-style: dotted;
      border-color: Blue Black;
}
p.new
{
      border-style: solid;
      border-color: Red Green Lime;
}
p.old
{
      border-style: dashed;
      border-color: Gray Green Blue Aqua;
}
</style>
<p class=”one”>This is one class </p>
<p class=”next”> This is next class </p>
<p class=”new”> This is new class </p>
<p class=”old”> This is the old class </p>
The output for the code is as shown below:



Margin



The margin properties set the size of margins on top, bottom, left and right respectively. They can be specified by length, percentage or using the keyword. They can contain negative values.

The sample code is as mentioned below:
Code:
<style>
p.new
{
    margin-top:50px;
    margin-bottom:100px;
    margin-left: 50px;
    margin-right:100px;
}
</style>
<p class=”new”> The length value is specified for the margin property </p>
The output for the code is as shown below:



Padding



The property is used to remove the area around the element content. There are properties for applying padding to top, right, bottom and left. The value can be percentage, length, or auto. Negative values are not allowed.

The code snippet to demonstrate the property is as shown below:
Code:
<style>
p.padd
{
     padding-top: 100px;
     padding-bottom: 150px;
     padding-left:200px;
     padding-right:170px;
}
</style>
<p class=”padd”> The paragraph is used by applying padding property </p>
The output for the code is as shown below:



Page Layout



The elements on the web page can be positioned. There are four different ways in which element can be positioned. The detail about them is explained below:

1. Static positioning: The static positioning is the default position layout of the web page. The elements are positioned according to the normal flow of the element on the page. The elements are not affected by the top, left, right and bottom properties.

2. Fixed positioning: The fixed positioning elements are positioned relative to the browser window. The elements do not move even if the window is scrolled.
The code snippet to demonstrate the property is as follows:
Code:
<style>
p.pos
{
    position: fixed;
    top: 50px;
    left: 250px;
    color: Red;
}
<p class=”pos”>The element is positioned here </p>
<p>Welcome User </p>
<p> The element is added on the web page </p>
The output for the code is as shown below:



3. Relative positioning: The relative positioning of the element is relative to the normal position on the web page. The contents of the elements can be moved or overlapped over other elements. The reserved space is preserved in the normal flow.

The code snippet to demonstrate the property:
Code:
<style>
h1.left
{
     position: relative;
     left: 20px;
}
</style>

<h1 class=”left”>The heading is moved to left side </h1>
<h2 class=”right”> The heading is moved to right side </h2>
The output for the code is as shown below:



4. Absolute positioning: The property is positioned relative to the first parent element other than the static one. The elements are removed from the normal flow. They can overlap other elements.

The code snippet is as shown below:
Code:
<style>
h2
{
   position: absolute;
   left: 100px;
   top: 50px;
}
<h2> The heading is applied to the absolute position </h2>
<p> The elements can be overlapped to other location </p>
The output for the code is as shown below:



Element Type



There are several element types in CSS for displaying data on the web page. The type includes inline, list or block item. The paragraph is an example of the block element, list is of list item type and so on. The element properties are explained below.

1. Display: The property is used to define how the element is displayed. The property value is none. The visibility property specifies the element to be hidden or visible.

The code snippet to demonstrate the property is mentioned.
Code:
<style>
h1.hide
{
      display: none;
}
h1.hidev
{
     display: hidden;
}
<h1 class=”hide”>The value is hidden</h1>
<h2> The value is visible </h2>
<h1 class=”hidev”> The value is invisible </h1>
<h3> The value is ready to be viewed </h3>
The output for the code is as shown below:



2. list-style-type: The property is used to specify the list item maker. The value can be decimal, none, square, roman, lower alpha, upper roman, etc.

The code to demonstrate the property is as shown.
Code:
<style>
ul.course
{
    list-style-type: circle;
}
ul.course1
{
   list-style-type: lower-latin;
}
ul.course2
{
   list-style-type: square;
}
</style>

<ul class=”course”>
<li> MBA </li>
<li> MCA </li>
<li> BBA </li>
</ul>
<ul class=”course1”>
<li> MBA </li>
<li> MCA </li>
<li> BBA </li>
</ul>
<ul class=”course2”>
<li> MBA </li>
<li> MCA </li>
<li> BBA </li>
</ul>
The output for the code is as shown below: