Auto CAD Sunday Classes Have Been Started in Apex Educator Baldia Town.

Monday, January 12, 2015

CSS beginners and advanced Tutorial


CSS Tutorial – For beginners and advanced Learning


CSS stands for Cascading Style Sheets. Purpose of creating CSS to solve the problems faced in HTML 3.2 when tags with formatting were introduced.
As such HTML defines the content of web page, like paragraphs (p), Div, headings (h1, h2, h3 etc.). At that time formatting was defined on each HTML page in HTML tags like fonts. For larger and complex websites it became quite harder for web developers to maintain presentation layer as such any change to be made on web page was to be done on each web page separately. For example if color of heading needed to be changed across the web site in <h1>, then developers had to open each page and modify as per need. For larger websites it became a terrible thing to do.

Types of CSS

There are three types of CSS. CSS can be used within HTML document, called as internal CSS. Separate files of CSS can be created as well. This is called external CSS. Generally external CSS is used by developers. References of external CSS files are given in web pages in order to use in your documents. This CSS tutorial will use both approaches for its demo examples online.

Purpose of this CSS tutorial

This tutorial will teach you how to use CSS. How CSS can be used to define presentation/layout of your web pages. The CSS tutorial is for beginners as well as advanced learners as well.

Syntax basics in CSS

In this chapter you will be given idea of CSS syntax that will help you using CSS with HTML elements/selectors in coming chapters. You can use inline CSS as well as external CSS in your web pages. Both of these methods are explained below.


Syntax of using CSS

The CSS of syntax is quite different to HTML. The general format is:
{property: value;}
For example:
{
font-size: 10px;
font-family: Aerial, Verdana;
color: 00FF00;
}
In above example font-size, font-family and color are properties and10px, “Aerial, Verdana”, 00FF00 are respective values of each CSS property. The combination of property:value is called ‘declaration’.CSS Declarations have to be enclosed in curly braces.
A single line may contain more than one declarations as shown below:
{
font-size: 10px; font-family: Aerial, Verdana; color: 00FF00;
}
Each CSS declaration is ended with a semi-colon. Whereas property and values are separated by colon ‘:’


Applying CSS in HTML tags

There are different ways of applying CSS in HTML tags in a web page.

Using CSS selectors in external files

In this method a selector is assigned properties/values at CSS level. For example if you want H1 tag in your document formatted as follows:
H1
{
font-weight: normal;
font-size: 20px;
line-height: 40px;
background: #000000;
padding: 5px 25px;
color: #355681;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: ‘Muli’, sans-serif;
}
All H1 in your document will be formatted on the basis of above specification.

Inline CSS

CSS can be applied within HTML tags itself, called as inline. You will use <style> tag for inline CSS. To use CSS inline style you can include multiple CSS properties separated by semi-colon. Following example shows how to use inline CSS in <h1> tag.


Example


<html>
<head>
<title>CSS Examples</title>
</head>
<h1 style="font-weight: normal; font-size: 20px; background: #00FF00; color: #355681;">This is CSS Tutorial</h1>
</body>
</html>

As you can see inline style is used in <h1> tag of HTML with multiple properties.

Using external CSS file into HTML document

Generally external CSS files are used for multi-pages web site. A separate external CSS file with .css extension is created that contains HTML document display specification. See example below:
  • For this example our external CSS file name is style.css
  • Place external css file at same directory where HTML file resides
  • Style.css (external CSS file) contains following code:

h1 {

font-weight: normal;

font-size: 20px;

background: #00FF00;
color: #355681;

}


The HTML file code:

See External CSS Example Online

<html>
<head>
<link rel="stylesheet" href="style.css">
<title>CSS Examples</title>
</head>
<h1>This is CSS Tutorial</h1>
</body>
</html>

As you can see the line in <head> tag includes style.css external css file:
<link rel=”stylesheet” href=”style.css”>

Other ways

We can also use Classes and IDs to apply CSS into HTML tags. These are explained in detail to their respective chapters along with examples.

Creating and using CSS Class Selectors with example

The Class Selector

In previous chapter we saw how to use HTML selectors to style with CSS. In CSS you can also define your own CSS selectors. These selectors are Classes and IDs. This chapter explains only CSS class selectors.
Alternatively we can say that we can select and style HTML elements byclass names.The Class selectors are used when you need to apply same style to many elements. Whereas CSS ID selector is used to style single HTML element.

Syntax of defining a class of CSS

The class selector is defined as follows:
.class_name
{

property: value;
property: value;
property: value;
}
i.e. a dot (.) followed by class CSS selector name. All definitions are enclosed in curly braces.

Example of defining and using CSS class selector

In example below we will define a test class in CSS with a few properties. Then we will use this class in HTML elements. Same style will be applied to a <div> and <p> HTML elements.

<html>
<head>
<style>
/*defining class selector*/
.testclass
{
font-weight: normal;
font-size: 20px;
background: #00FF00;
color: #000000;
}
</style>
</head>
<body>
<div>This DIV will use testclass.</div>
<p>This paragraph also uses same class, i.e. testclass</p>
<p>No style applied to this paragraph</p>
</body>
</html>

As you can see, once a testclass is defined this is used in <div> and <p> HTML elements with same styling. If you make changes in testclass, it will depict on <div> and <p> where testclass was used.
In HTML elements, class selector is referred by class=”classname”where you intend to use that style.

Creating and using CSS ID selectors with example

In CSS you can also define your own selectors. These CSS selectors areClass and ID selectors. This chapter explains only ID selectors.
Alternatively we can say that we may select and style HTML elements by ID. CSS ID selectors are used when you need to apply style to single element.


Syntax of defining ID selector

The CSS ID selector is defined as follows:
#ID_name
{
property: value;
property: value;
property: value;
}
i.e. a hash-tag (#) followed by  id selector name. All definitions are enclosed in curly braces.


Example of defining and using div ID selector

In following example we will define a test ID selector with a few properties. Then we will use this ID CSS selector in HTML DIV element.

<html>
<head>
<style>
/*defining ID selector*/
#testid
{
font-weight: normal;
font-size: 20px;
background: #00FF00;
color: #000000;
}
</style>
</head>
<body>
<div id="testid">This DIV used testid id selector.</div>
<div>No style applied to this div</div>
</body>
</html>

As you can see, once a testid is defined this is used in div HTML element with id css.
In HTML elements, CSS id selector is referred by id=”idname”.

Learn to use CSS background property in HTML elements with examples

The background is used to apply background styling to HTML elements. For example in <h1> heading you may want to use a specific color or image as background. While in paragraphs or Div you may want different background color or an image etc. CSS gives options to control how to use CSS background color or images. Whether to repeat image or not background by using background property. You can also specify whether background image should be scrolled with page or not in background CSS property. background property also allows to mix background color with image by flexible image related properties.


A basic example of background property

This chapter describes about background property with basic example. You can also find links to detail pages for background properties below.

Basic syntax of using background

Following is the basic syntax to use CSS background property:
background: 000000 url(‘image.jpg’) right;


For example:

h1
{
background: #000000;
}
The example sets <h1>’s background color as black in document by using background CSS.


Example of using background

In following example we use background property in headings, h1 and h2. <h1> is simply given background color as black. <h2> is styled with multiple background properties including background color, background image, position etc.


<html>
<head>
<style>
/*Using background*/
h1
{
background-color: #000000;
color: #FFFFFF;
}
h2
{
background-color: #00FF00;
background-image: url(exclamation.jpg);
background-position: right;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: contain;
color: #000000;
}
</style>
</head>
<body>
<h1>This is background chapter</h1>
<h2>H2 with many background properties<br/>
H2 with many background properties</h2>
</body>
</html>


CSS background properties

Following are properties of background in CSS.
  • background-color (sets background color of the element)
    background-color:#003399;
  • background-image (This sets the background image of element)
  • background-image: url(‘image location‘);
  • background-position (This property sets the starting position of background image. For example image starts where text ends in <h1> or <h2> etc.
    background-position: value;
where values can be:
  • left
  • right
  • left center
  • left top
  • left bottom
  • right top
  • right bottom
  • center top
  • center bottom
  • background-size (This property sets the size of image (CSS3))
  • background-attachment (This property controls scrolling of  image in background)
  • background-repeat (This property is used to set whether to repeat an image in background or not.)
  • background (This property is used to set one or more above mentioned properties)
Few of these background properties are explained in their respective chapters along with examples. Click on any link above.

CSS background color – Learn to set background color, opacity in CSS


The background color property of CSS

The Background color property is used to set the background color of HTML elements. For example setting background colors of headings in your web page. Similarly setting background color of the entire body, paragraphs or div etc. of document. Following are few background color CSS properties examples but let us first look at its syntax:

Syntax of CSS background color

Following is the background color syntax:
background-color:#003399;
OR
background-color: red;
OR
background-color: rgb(33,45,55)
Background color in CSS can be set by using:

  • Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F) in CSS background color property.
  • Color name: Giving a color name in background color CSSproperty like red, green, yellow etc. Generally this is not preferred method.
  • RGB: RGB stands for Red, Green, Blue. It defines the values of red, green and blue at range of 0-255 for each. So for example for R part if it is set to 0 means no red and 255 would mean full red.


Example of using background color property

Following example shows how to use CSS background property. We will set colors of <h1>, <p> and <div> tags by using background color property.
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-color: black;
color: #FFFFFF;
}
p
{
background-color: #00FF00;
}
.divex
{
background-color: rgb(012,202,111);
}
</style>
</head>
<body>
<h1>Heading background color set by color name</h1>
<p>Paragraph background color set with HEX value</p>
<div class="divex">Div background color is set with RGB value</div>
</body>
</html>

CSS background transparent color or no opacity

Following example shows CSS background transparent color setting. By default CSS background color property’s value is set to transparent. One of the way you can set opacity or transparency is with RGBa. To setCSS background opacity or transparent background you can use fourth value as shown below:

<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-color:rgb(012,202,111)
}
h2
{
background-color:rgba(012,202,111, 0.3)
}
</style>
</head>
<body>
<h1>H1 background color set by simple RGB</h1>
<h2>Heading background color set by RGBa (by setting opacity or transparency to 0.3)</h2>
</body>
</html>

As you can see the color of <h2> heading is made transparent by background color opacity in RGB part.

CSS background image – Setting image, size, position, repeat, opacity etc


The background image property

In last chapter we learnt how to use color as background in HTML elements using CSS. In this chapter we will learn how to use CSS background image property in HTML elements.
The background image property is used to set the background image of HTML elements. Background images can be used in various elements like across the page (body), lists, DIVs, Paragraphs, headings and others.

Along with setting image as background, CSS has other properties to specify position of image, whether to repeat or not (default is repeat) etc. These are explained with examples below but first of all syntax of using background image CSS property:

Syntax of CSS background image property

Following is the syntax of using background image property
background-image: url(‘image location‘);
Where value URL(); specifies the CSS background URL of image. The other values that can be specified in background image CSS property are:
None: The is default, which means no background image to be displayed.
background-image: none;

Example of using background image property

In this example we will simply set background-image of body, that goes across the page. As mentioned by default image will be repeated. If image is smaller it will be repeated to cover whole body in background image.
<html>
<head>
<style>
/*Using CSS background*/
body
{
background-image: url(OA_logo.png);
}
</style>
</head>
<body>
</body>
</html>


Background image position example

In this example we will use text and image. The text will be aligned left and image to the right position of <h1> heading.
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(OA_logo.png);
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>


As you can see background position is set by using following syntax:
background-position: right;

Background image repeat or no repeat example

As you can see in above example we used another line of code to specify background repeat.
background-repeat: no-repeat;
To make an image in background to repeat or not we can specify CSS background repeat property as:
To make background image repeat, use value:

    1-repeat

To make background image no repeat, use:

    2-no-repeat

By default this value is set to repeat. Or if you do not specify this value, the image will be repeated across the heading in above example. This will make heading cluttered, see example below:
<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(OA_logo.png);
background-position: right;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>


As you can see, the text and image are mixed up as by default image is repeated across the heading area.

    Background image size

CSS3 comes up with background-size property that sets the size of image. This is how we can set the height and width of image.
e.g. background-size: 263px 60px;

    Example of setting background image height and width

The following example shows how you can set CSS background image size: height and width.


<html>
<head>
<style>
/*Using CSS background*/
h1
{
background-image: url(OA_logo.png);
background-size: 263px 60px;
background-position: right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1> Website logo </h1>
</body>
</html>


Apart from height and width (length) of image, background-size has following values option:
cover: This value scales the background image to maximum area of specified element.
contain: This value fits the image inside given element at its maximum, so that no part of image cuts.

    CSS multiple background images

You can set multiple image backgrounds by adding comma “,” and then second image URL.
This is how you can set CSS multiple background images:
background-image:url(“image1.png”),url(“image2.jpg”);

Learn to use CSS text properties to work with text in document

    Working with text in CSS

CSS comes up with many properties related to managing text in your web documents to make it look beautiful, prominent, better in readability etc. These CSS text related properties includes color of text, text alignment, text decoration, indentation, letter spacing and more. Note that text size comes in font properties (font-size) which is covered in CSS font chapter.
This chapter gives a brief about text properties along with examples and links to detailed chapters of each property related to text in CSS at the bottom.
Following are a few examples of using text CSS properties. You can read description, CSS code as well as see it online by clicking the demo link with each example.

    Example using alignment, color text properties

In this example we will set colors and alignment of headings and paragraph by using CSS text properties. The first heading is transformed to uppercase, second to lowercase (just for illustration purpose) while paragraph remains as given.
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>


CSS Text example with letter spacing
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
letter-spacing:4px;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
letter-spacing:3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>

    A text example of text decoration

The example below removes an underline in link by using CSS text-decoration property.


<html>
<head>
<style>
/*Using text properties*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
}
a
{
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is text-decoration example without line in link:</h1>
<a href="http://www.exampletc.com">This is link</a>
</body>
</html>


    Example of line height text property

This example shows how to use line height property in paragraph and heading.
<html>
<head>
<style>
/*Using text*/
h1
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
letter-spacing:5px;
line-height:normal;
}
h2
{
text-align: left;
text-transform:lowercase;
background-color: #355681;
color: #F0F0F0;
letter-spacing:4px;
line-height:3;
}
p
{
text-align: center;
background-color: #F0F0F0;
color: #355681;
letter-spacing:3px;
line-height:70px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>


    Major text properties

Following is the list of CSS text related properties. Click on any link for its detailed chapter.


text-align property
text-align: center;
CSS line-height property
line-height: normal;
OR
line-height: 3;
OR
line-height: 60px;
text color property
color:#003399;
OR
color: red;
OR
color: rgb(33,45,55)
CSS letter-spacing property
letter-spacing:3px;
letter-spacing:-1px;
text direction property
direction: rtl;
text-align
text-align: center;
CSS vertical align property
vertical-align: text-top;
text-indent property
text-indent:50px;
CSS white-space property
white-space: nowrap;
text-shadow property
text-shadow:  2px 3px;
OR
text-shadow:  2px 3px 4px;
OR
text-shadow:  3px 5px 4px #E399E3;
Text decoration
text-decoration: line-through;
text-decoration: underline;
text-decoration: none;


text transform
text-transform:uppercase;
text-transform:capitalize;
word-spacing:-2px;
word-spacing:-2px;


A comprehensive guide about CSS font properties in single and separate declaration

    The font property of CSS

To make text look stylish, prominent and presenting differently for different section of your web pages, CSS comes up with text specific properties. You can apply those properties to different headings (h1, h2…h6), paragraphs and other sections of web site. Few properties are explained in CSS text properties tutorial of this guide. This chapter covers font properties. CSS font includes font family, font size, font style, font weight etc.
This tutorial gives a brief on font properties along with examples. We will show you how to use font property at single declaration to specify text properties. Also This tutorial will give a brief about font properties to be used separately.
Besides you will find links at lower part for detail tutorials of these properties.

Font properties in single declaration

All the font properties like font size, font weight, font family etc. can be specified in single line by using font property.
The order of declaring values is as follow:

Syntax of CSS font property

Following is the syntax of using font CSS property along with order of font properties:
font: font-style font-variant font-weight font-size/line-height font-family
If any value is not given, default value will be used. For example if no font-weight value is given it will use normal as value in font.

Font at single declaration example

The example below uses single font declaration for heading1, heading2 and paragraph for different CSS font properties.
<html>
<head>
<style>
/*Using font*/
h1
{
font:25px, Verdana;
}
h2
{
font:italic 700 20px "Times new Roman";
}
p
{
font:oblique normal 15px Arial ;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>


All these font properties are explained below with examples.

Font size property

The font size property sets the font size of text in elements. This may be required to set heading size of top heading or h1 to be larger than that comes underway in your web page. Though this is controlled by default for h1, h2 and so on. However with font size property you can control the size of text.
Similarly font size in paragraphs <p> might be required smaller in certain paragraphs than others.

Syntax of CSS font size

Following is the syntax of CSS font size property.
font-size: 15px;
font-size: 15pt;
font-size: medium;

Example of using font size property

This example sets font size of heading1, heading2 and paragraph.


<html>
<head>
<style>
/*Using font*/
h1
{
font-size:25px;
background-color: #F0F0F0;
color: #355681;
}
h2
{
font-size:20px;
background-color: #355681;
color: #F0F0F0;
}
p
{
font-size:15px;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>

The font-family property

To set the font family to be used in web page elements, CSS providesfont-family property. Multiple font family names can be provided, so if first font is not supported by browser the other one will be used and so on. Multiple names must be separated by comma. As such few font names are combination of more than one word, like “Times New Roman” so it should be enclosed in double quotes.

Syntax of font family property

Following is the syntax of font family:
font-family: Verdana, Arial, “Times New Roman”

Example of using font family property

In this example heading1, headgin2 and paragraph uses different font family values by using font CSS.
<html>
<head>
<style>
/*Using font*/
h1
{
font-family:Verdana, Arial;
font-size:25px;
background-color: #F0F0F0;
color: #355681;
}
h2
{
font-family:"Times New Roman", Arial;
font-size:20px;
background-color: #355681;
color: #F0F0F0;
}
p
{
font-family:Arial, Verana;
font-size:15px;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>

The font-weight property

In order to make text bold or normal CSS provides font-weightproperty. A value between thin and thick  or  between normal to bold can also be given.

Example of using font-weight to make text bold

This example sets the font-weight of heading1 as bold, heading 2 to use value of 600 and makes it normal for paragraph in font weight property.
<html>
<head>
<style>
/*Using font*/
h1
{
font-family:Verdana, Arial;
font-weight:bold;
font-size:25px;
}
h2
{
font-family:"Times New Roman", Arial;
font-weight:600;
font-size:20px;
}
p
{
font-family:Arial, Verana;
font-weight:normal;
font-size:15px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>

Font-style property

To make text look italic or oblique font-style property is used. The default value of this property is normal.

Syntax of font style

font-style: italic;

Example of using font style property

The example below uses Italic for heading 2 and oblique value for paragraph text in font CSS.
<html>
<head>
<style>
/*Using font*/
h1
{
font-family:Verdana, Arial;
font-weight:bold;
font-size:25px;
}
h2
{
font-family:"Times New Roman", Arial;
font-weight:600;
font-size:20px;
font-style:italic;
}
p
{
font-family:Arial, Verana;
font-weight:normal;
font-size:15px;
font-style:oblique;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is Heading 2</h2>
<p>This is Paragraph</p>
</body>
</html>

Detail of font properties

Follow the link below to see the detailed chapter of font properties:
font size property
font-size: 15px;
OR
font-size: 15pt;
OR
font-size: medium;
OR
font-size:1em;
font weight property
font-weight:lighter;
OR
font-weight:normal;
font family property
font-family:Verdana, Arial, Serif;
OR
font-family:"Times New Roman", Arial, Serif;
OR
font-family:Arial, Verana, serif;
font style property
font-style:italic;
OR
font-style:oblique;
font variant property
font-variant: small-caps;
OR
font-variant: normal
font color property
color: #355681;
OR
color: white;
OR
color: rgb(000,125,255);


Learn to set CSS border styles in div, table and other elements

The border in CSS

The border properties of CSS allow placing border(s) around HTML elements. This is very useful and gives a lot of control to specify border specifications. You can place borders on top, bottom, left or right with different colors and widths. The borders make it quite easier to differentiate among elements of your web page with different styling that otherwise you had to do by using HTML table/borders or by using images.
<html>
<head>
<style>
/*Using CSS border*/
.div_dotted
{
border: dotted 4px #355681;
color: #355681;
}
.div_solid
{
border: solid 1px black;
color: #355681;
}
</style>
</head>
<body>
<div class="div_dotted">This is Div element with dotted style border</div>
<br />
<div class="div_solid">This is Div element with solid style border</div>
</body>
</html>



Another Example
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid;
border-top: 2px solid #355681;
border-bottom: 1px dashed #00FFEE;
border-left: 3px double blue;
border-right: 3px dotted rgb(111,121,333)
}
</style>
</head>
<body>
<div class="div_ex">This is Div element with top, bottom, left and right border specification</div>
</body>
</html>
You can specify CSS border styles in one declaration by using borderproperty, for simple border. Alternatively you can specify it separately by using border properties like border-top, border-top-color, border-top-width to control border look in depth.
This chapter will explain about common border properties in general with examples along with links to border properties to their respective chapter in bottom.
Border syntax for single declaration
You can simple specify all border styles, top, bottom, left, right in one declaration by using border property. This allows to set values for border width, border style and border color. This will be applied to all four borders of specified element. For instance:
border: dotted 4px #00FFHH;

CSS div border example

In following example we will set border of <div> element by using border CSS property in one declaration. The first div is set with dottedstyle, the second is set with solid style value. The styles of borders available is explained in separate chapter, click on linked text or go to bottom part.
<html>
<head>
<style>
/*Using border*/
.div_dotted
{
border: dotted 4px #355681;
color: #355681;
}
.div_solid
{
border: solid 1px black;
color: #355681;
}
</style>
</head>
<body>
<div>This is Div element with dotted style border</div>
<br />
<div>This is Div element with solid style border</div>
</body>
</html>
As you see by single declaration you can set border in CSS. The dotted div (first div in example) is given dotted border style with 4px border width. Also this one declaration is applied to: CSS border bottom, border top, border left and border right, i.e. All four borders by single specification.
The cool thing about border is that you can specify all four borderproperties separately. See following section:

Set CSS border bottom, top, left and right styles separately example

In this example we will set border styles and border color of all four sides separately. Following border properties will be used to specify borders seperately:
  1. border-top
  2. border-bottom
  3. border-right
  4. border-left
A div element border is set with top as solid and HEX color, bottom as dashed and HEX color, left as double and color name and right as dotted with rgb color number by using above border properties.

Table border example using border CSS

In spite of setting table display settings at in-line you can specify table border in CSS. In this example table style, including border is styled inside CSS.
<html>
<head>
<style>
/*Using CSS border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>

CSS border style – How to set solid, dotted, dashed etc border styles in CSS

The border style property

The border-style property defines what type of border to choose among available list given below. CSS border style also allows to set different style for four borders (left, right top and bottom). Though border style CSS can be specified in single declaration as well by usingborder property.
The type of borders that can be set using border-style are:
  • none
  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset
  • hidden
For example border style can be set as follows:
border-style: solid
This will set solid border, single solid line for all four borders.
Setting four border style values in single declaration
You may specify four values to four borders in single declaration, this is how you can specify this in border-style:
border-style: solid dotted dashed double;
The sequence, if four values are give will be: Top, Right, Bottom and Left.
in this case solid will be assigned to top, dotted to right, dashed to bottom and double to left border.
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>
A border-style example with all possible values example
This example shows how each value of CSS border style will look. Ten div elements are created and each is assigned with different border styled CSS class.
<html>
<head>
<style>
/*Using CSS border*/
.div1
{
border-style: none;
border-width: 2px;
}
.div2
{
border-style: solid;
border-width: 2px;
}
.div3
{
border-style: dashed;
border-width: 2px;
}
.div4
{
border-style: dotted;
border-width: 2px;
}
.div5
{
border-style: double;
border-width: 2px;
}
.div6
{
border-style: groove;
border-width: 2px;
border-color: #009988;
}
.div7
{
border-style: ridge;
border-width: 2px;
border-color: #007788;
}
.div8
{
border-style: inset;
border-width: 2px;
}
.div9
{
border-style: outset;
border-width: 2px;
}
.div10
{
border-style: hidden;
border-width: 2px;
}
</style>
</head>
<body>
<div>This is Div element with none value.</div><br />
<div>This is Div element with solid value</div><br />
<div>This is Div element with dashed value</div><br />
<div>This is Div element with dotted value</div><br />
<div>This is Div element with double value</div><br />
<div>This is Div element with groove value</div><br />
<div>This is Div element with ridge value</div><br />
<div>This is Div element with inset value</div><br />
<div>This is Div element with outset value</div><br />
<div>This is Div element with hidden value</div><br />
</body>
</html>
As you can see ten div elements with ten different CSS border stylevalues (as mentioned in above section).

How to use CSS border color property with examples

The border color property of CSS

With border color property you can set border color of one or all four borders of specified element. A simple example of using border color CSS property is:
border-color: blue;
The border color can be set by using:
Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F).
Color name: Giving a color name like red, green, yellow etc. Generally this is not preferred method to specify in CSS border color.

RGB: RGB stands for Red, Green and Blue. It defines the values of red, green and blue at range of 0-255 for each. So for example for R part if it is set to 0 means no red and 255 would mean full red.
Example of setting border color of Div with one value
In this example four border styles are given with different value, whereas CSS border-color is given single color name, blue. You can see all borders (top, bottom, left and right) will take same color. Note that CSS border-style must be specified in order to make CSS border-color property work.


<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-color: blue;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>

Example of setting border color of div with four values

In this example four borders are specified and four color name values are assigned to CSS border-style property. The order of color to each border will be:
Top = blue
Right = red
Bottom = green
Left = yellow


<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid dotted dashed double;
border-color: blue red green yellow;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>

Example of setting border-color CSS with each border’s property

As such each border can be specified by using its own set of properties, like border-right, border-left. Each border has its own color property as well like border-right-color.
This example demonstrates how to specify each CSS border color by its property.
Note, this example also uses different color naming for different borders.
<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-top-style: solid;
border-top-color: blue;
border-right-style: dotted;
border-right-color:#FF0000;
border-bottom-style: dashed;
border-bottom-color: #008000;
border-left-style: double;
border-left-color: rgb(255,255,0);
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
<br />
This is Div element with top, bottom, left and right border specification
</div>
</body>
</html>

CSS border radius property with examples

The border radius

The CSS border-radius property sets the rounding of the borders of the specified element. The round may be circle or ellipse. You can set border radius in one declaration by using: e.g.
border-radius: 15px;
Or by using specific border side like top left, or top right, bottom left or bottom right separately: e.g.
border-top-left-radius: 10px;
border-top-right-radius: 20px;

The examples below shows both ways of using border radius: setting radius of borders in one declaration and setting CSS border radius separately.
Setting circular border radius with short-hand
This example sets border radius of all sides in one declaration by usingborder-radius CSS property to Div element.


<html>
<head>
<style>
/*Using CSS border*/
.div_ex
{
border-style: solid;
border-color: #FF5599;
border-radius: 15px;
border-width: 5px;
}
</style>
</head>
<body>
<div>This is Div element border-radius in single declaration.
<br />
This is Div element border-radius in single declaration.<br />
This is Div element border-radius in single declaration.
</div>
</body>
</html>

Setting border radius for each corner separately in circle

This example sets border radius of all sides separately by using border-radius properties to Div element. Following border radius CSSproperties are used:
  1. border-top-left-radius;
  2. border-top-right-radius;
  3. border-bottom-left-radius;
  4. border-bottom-right-radius;
    <html>
    <head>
    <style>
    /*Using CSS border*/
    .div_ex1
    {
    border-style: solid;
    border-color: #FF5599;
    border-width: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 15px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex1">This is Div element with top, bottom, left and right border specification
    <br />
    This is Div element with top, bottom, left and right border specification
    <br />
    This is Div element with top, bottom, left and right border specification
    </div>
    </body>
    </html>

    Setting ellipsis border radius CSS with horizontal and vertical values example

    <html>
    <head>
    <style>
    /*Using CSS border*/
    .div_ex
    {
    border-style: solid;
    border-color: #FF5599;
    border-width: 5px;
    border-radius: 0.5em 1em;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with horizontal and vertical value for border-radius
    <br />
    This is Div element with horizontal and vertical value for border-radius
    <br />
    This is Div element with horizontal and vertical value for border-radius
    </div>
    </body>
    </html>
    As you can see value in CSS border radius is specified for vertical and horizontal values to make ellipsis border.

CSS margin – Learn to define left, right, top margin in CSS

The margin property

The margin and padding properties adds spaces in specified HTML elements. The difference between margin and padding is that margin adds space between different element’s borders. While padding adds space between content and border within specified element.
This chapter explains about margin CSS property. You can use shorthand of this property (margin) to specify spaces for all directions: top, bottom, right and left. On the other hand you can use each independently to define space in CSS margin.
The example below shows how you can use margin in CSS in both ways.
The margin property example to add margins with single declaration
You can use CSS margin property shorthand to specify margins in all directions. If only one value is given in margin it will be applied to all four directions, as shown below.
    <html>
    <head>
    <style>
    /*Using CSS margin*/
    .div_ex
    {
    margin: 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with margin property
    <br />
    This is Div element with margin property
    <br />
    This is Div element with margin property
    </div>
    </body>
    </html>

Using shorthand margin property to add margins with four values

This example uses four values to define margins in CSS. The first value for CSS margin top, second is right, third is bottom and fourth defines CSS left margin.
    <html>
    <head>
    <style>
    /*Using CSS margin */
    .div_ex
    {
    margin: 20px 200px 50px 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with four margin values
    <br />
    This is Div element with four margin values
    <br />
    This is Div element with four margin values
    </div>
    </body>
    </html>

    A margin example to change margins with two values

If you specify only two values then first value will define margin-topand bottom and second value will define CSS margin left and right.


    <html>
    <head>
    <style>
    /*Using CSS margin */
    .div_ex
    {
    margin: 50px 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with two margin values
    <br />
    This is Div element with four two values
    <br />
    This is Div element with two margin values
    </div>
    </body>
    </html>

    Using margins individually, margin-top and margin-left properties example

Instead of using shorthand margin CSS property you can use individual property for each direction. Example below shows how to use margin-top and margin-left properties to define spaces.


    <html>
    <head>
    <style>
    /*Using CSS margin */
    .div_ex
    {
    margin-top: 50px;
    margin-left: 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with margin-top and margin-left example
    <br />
    This is Div element with margin-top and margin-left example
    <br />
    This is Div element with margin-top and margin-left example
    </div>
    </body>
    </html>
    Similarly you can use CSS margin-right and margin-bottomproperties to define margins of elements.

CSS padding – How to define left, right, top padding in elements

The padding property

The padding and margin properties adds spaces in specified HTML elements. The difference between margin and padding is that margin adds space between different elements borders. While CSS padding adds space between content and border within specified element.
This chapter explains about padding property. You can use shorthand of padding property (padding) to specify spaces for all directions: top, bottom, right and left. On the other hand you can use each direction individually to define space.
    <html>
    <head>
    <style>
    /*Using CSS padding*/
    .div_ex1
    {
    padding: 20px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    .div_ex2
    {
    padding: 20pt;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    .div_ex3
    {
    padding: 1cm;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex1">This Div element uses shorthand padding property in pixels value</div><br />
    <div class="div_ex2">This Div element uses shorthand padding property in pt value</div><br />
    <div class="div_ex3">This Div element uses shorthand padding property in cm value</div>
    </body>
    </html>

Syntax of CSS padding

The basic syntax of padding in CSS is:
padding: 10px;
Where 10px is length value that can be in px, pt, cm etc.
Padding can also be set individually for each direction, by using each direction’s padding property, as follows:
padding-left: 10px;
padding-right: 10pts;
padding-top: 2cm;
padding-bottom: 10px

A padding property example to set padding with single value

This example uses padding CSS property to a Div element with single value. This single value will add space equally in all direction: top, bottom, right and left by using CSS padding.
    <html>
    <head>
    <style>
    /*Using CSS padding*/
    .div_ex1
    {
    padding: 20px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    .div_ex2
    {
    padding: 20pt;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    .div_ex3
    {
    padding: 1cm;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex1">This Div element uses shorthand padding property in pixels value</div><br />
    <div class="div_ex2">This Div element uses shorthand padding property in pt value</div><br />
    <div class="div_ex3">This Div element uses shorthand padding property in cm value</div>
    </body>
    </html>

    Using padding property to add padding with four values

This example uses four values to define CSS padding.
The padding order is:
first value is top
second is right
third is bottom
fourth defines left padding.


    <html>
    <head>
    <style>
    /*Using CSS padding */
    .div_ex
    {
    padding: 20px 200px 50px 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with four padding values
    <br />
    This is Div element with four padding values
    <br />
    This is Div element with four padding values
    </div>
    </body>
    </html>

    Using shorthand padding property to change padding with two values

If you specify only two values then the CSS padding order will be:
first value will define padding for top and bottom
and second value will define padding for left and right.
See example of padding with two values:



    <html>
    <head>
    <style>
    /*Using CSS padding */
    .div_ex
    {
    padding: 20px 200px 50px 100px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with four padding values
    <br />
    This is Div element with four padding values
    <br />
    This is Div element with four padding values
    </div>
    </body>
    </html>
    Specify padding individually, padding-top and padding-left properties example
Instead of using shorthand padding CSS property you can use individual property for each direction. Example below shows how to usepadding-top and padding-left properties to define spaces in a div element.

    <html>
    <head>
    <style>
    /*Using CSS padding */
    .div_ex
    {
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    border-style: solid;
    border-color: #FF5599;
    border-width: 1px;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">This is Div element with padding-top, padding-left and padding-bottom example
    <br />
    This is Div element with padding-top, padding-left and padding-bottom example
    <br />
    This is Div element with padding-top, padding-left and padding-bottom example
    </div>
    </body>
    </html>
Similarly you can use padding-right and padding-bottom properties to define padding of elements.

CSS link – Setting color, style to HTLML link with CSS a hover, active etc. States

    The link styling in CSS

HTML links, <a href=”"> can use CSS power to style, color etc. to hyper-links in web pages. You can apply different colors, styles, background, font size etc. in different states of a link by using linkproperties.

As such CSS links has four states:
  • A link till it is not visited/clicked is normal state of link.
  • As mouse comes over link, this is called hover state.
  • As a link is clicked, this is called active state.
  • After a link is visited, is called visited state.
You can set different link properties for all these states, in order to distinguish links that are visited or not or as mouse comes over a link or a link is visited.
Below are example of using each of state and setting link CSS properties.
Setting link CSS properties for normal state of link
Till a link is unvisited, it is called normal state of link. The example below shows how to set CSS link properties, color, style, font size etc for link in normal state.
The first link example is set with CSS link color, font style and font size property. The second link is set without underline by using text-decoration property.
    <html>
    <head>
    <style>
    /*Using CSS link */
    .link1:link
    {
    color: #355681;
    font-style: normal;
    font-size: 15px;
    }
    .link2:link
    {
    color: #355681;
    font-style: italic;
    font-size: 15px;
    text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="http://www.example.com" class="link1">Example link without border</a><br /><br />
    <a href="http://www.example.com" class="link2">Example link without underline</a>
    </div>
    </body>
    </html>

Setting link properties at hover state by CSS a:hover

This example show setting link properties in hover state, as mouse is over a link. The color and size will be changed as mouse comes over link by using CSS a:hover property.
    <html>
    <head>
    <style>
    /*Using CSS link */
    .link1:link
    {
    color: #355681;
    font-style: normal;
    font-size: 15px;
    }
    .link1:hover
    {
    color: #E84940;
    font-size: 17px;
    }
    .link2:link
    {
    color: #355681;
    font-style: italic;
    font-size: 15px;
    text-decoration:none;
    }
    .link2:hover
    {
    color: #008000;
    font-style: normal;
    font-size: 15px;
    text-decoration:underline;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="http://www.example.com" class="link1">Example link without border</a><br /><br />
    <a href="http://www.example.com" class="link2">Example link without underline</a>
    </div>
    </body>
    </html>

Setting link properties for active link by CSS a:active

This example shows setting CSS link properties in active state, as mouse is clicked. The color and size will be changed as mouse is clicked over link. Note that nothing will be change as mouse is over link. The appearance will be changed once mouse is clicked on link by using CSS a:active.


    <html>
    <head>
    <style>
    /*Using CSS link */
    .link1:link
    {
    color: #355681;
    font-style: normal;
    font-size: 15px;
    }
    .link1:active
    {
    color: #E84940;
    font-size: 17px;
    }
    .link2:link
    {
    color: #355681;
    font-style: italic;
    font-size: 15px;
    text-decoration:none;
    }
    .link2:active
    {
    color: #008000;
    font-style: normal;
    font-size: 15px;
    text-decoration:underline;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="http://www.example.com" class="link1">Example link without border</a><br /><br />
    <a href="http://www.example.com" class="link2">Example link without underline</a>
    </div>
    </body>
    </html>

Setting link properties for visited link by CSS a:visited

To show your users of website that they have visited certain link(s), you can use visited state of link to change certain properties of link by using CSS a:visited.
    <html>
    <head>
    <style>
    /*Using CSS link */
    .link1:link
    {
    color: #355681;
    font-style: normal;
    font-size: 15px;
    }
    .link1:visited
    {
    color: #E84940;
    font-size: 17px;
    }
    .link2:link
    {
    color: #355681;
    font-style: italic;
    font-size: 15px;
    text-decoration:none;
    }
    .link2:visited
    {
    color: #008000;
    font-style: normal;
    font-size: 15px;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="http://www.example.com" class="link1">Example link for visited state</a><br /><br />
    <a href="http://www.example.com" class="link2">Example link without underline</a>
    </div>
    </body>
    </html>

    CSS cursor – How to use cursors – hand, pointer and others

    The cursor and CSS

While using browsers or operating systems we come across different cursors while using mouse. For example hand cursor for links (pointer), ‘I’ type while in text box, resize etc.
CSS cursor property lets you specify which type of cursor to show for different elements. For example specifying different cursor for main headings and other for paragraph or Div by using cursor property.
The examples below shows how to show different cursors for different elements of HTML let us first look at syntax of cursor CSS property.

CSS cursor Syntax

Following is the general syntax of cursor:
cursor: cursor-value;
Where cursor-value can be pointer, progress, help, no-drop etc. The example shows different types of CSS cursors.

A cursor hand and other cursors for different HTML elements example

This example shows how to use cursor CSS property for different HTML elements including h1, h2, h3, h4, div, <p>, and link. The default behaviour is changed to other value of cursor for demonstration purpose.
The h1 uses vertical-text value. The cursor hand (cursor pointer) is used for <h4> heading and so on, See demo online:
    <html>
    <head>
    <style>
    /*Using CSS cursor */
    h1
    {
    cursor:vertical-text;
    }
    h2
    {
    cursor:no-drop;
    }
    h3
    {
    cursor:cell;
    }
    h4
    {
    cursor:pointer;
    }
    p
    {
    cursor:progress;
    }
    div
    {
    cursor:pointer;
    }
    a
    {
    cursor:help;
    }
    </style>
    </head>
    <body>
    <h1>This is heading 1 with <b>vertical-text</b> cursor</h1>
    <h2>This is heading 2 with <b>no-drop</b> cursor</h2>
    <h3>This is heading 3 with <b>all-scroll</b> cursor</h3>
    <h4>This is heading 4 with <b>pointer</b> cursor</h4>
    <p>This is paragraph element with <b>progress</b> cursor</p>
    <div>This is Div element with <b>pointer</b> cursor</div>
    <a href="http://www.example.com" target="_blank" rel="nofollow">help cursor in link</a>
    </body>
    </html>
    As you can see seven types of cursor value are shown in above example that are used in different HTML elements. As mentioned h1 is using vertical-text, h2 using no-drop value. <h4> tag is assignedcursor hand which is basically CSS cursor pointer value. The div is also assigned CSS pointer cursor. <p> is using progress and so on.

CSS hover – examples of using hover in a: link, p, div, headings etc.

CSS hover

The hover is state when mouse is over certain element of document. Generally it is used for HTML links. However hover state also applies to other elements like Div, headings, paragraphs etc.
This tutorial shows how you can apply different CSS hover properties in hover state to different elements including links.

Example of using hover to HTML links

This example shows how to use hover CSS properties to hover state of HTML link. As mouse is over a link, font style, color etc. will be changed by using hover property.
    <html>
    <head>
    <style>
    /*Using CSS hover */
    .link1:link
    {
    color: #355681;
    font-style: normal;
    font-size: 15px;
    }
    .link1:hover
    {
    color: #E84940;
    font-size: 17px;
    }
    .link2:link
    {
    color: #355681;
    font-style: italic;
    font-size: 15px;
    text-decoration:none;
    }
    .link2:hover
    {
    color: #008000;
    font-style: normal;
    font-size: 15px;
    text-decoration:underline;
    }
    </style>
    </head>
    <body>
    <div>
    <a href="http://www.example.com" class="link1">Example link without border</a><br /><br />
    <a href="http://www.example.com" class="link2">Example link without underline</a>
    </div>
    </body>
    </html>
    As you can see you can use CSS a:hover to apply properties in link’s hover state. As you bring mouse over first link its font size will be changed by CSS a hover.
    hover to Div element example
    Not only hover state applies to HTML links this also applies to div as well. Following example shows how CSS div hover works. Example below applies border and text color change to Div element as hover (mouseover) state happens to Div by using hover in CSS.
    <html>
    <head>
    <style>
    /*Using CSS hover */
    .div_ex
    {
    border: dotted 4px #355681;
    color: #355681;
    }
    .div_ex:hover
    {
    color: #E84940;
    border: solid 4px #355681;
    }
    </style>
    </head>
    <body>
    <div class="div_ex">
    This is div element
    </div>
    </body>
    </html>
    As you can see as mouse is over div hover changes border style of div to solid.
    Using CSS hover to heading example
You can apply hover CSS to headings in HTML document as well. Example below shows changing properties of heading 1 as hover state occurs by using hover.
    <html>
    <head>
    <style>
    /*Using CSS hover */
    h1
    {
    font-size: 15px;
    color: #355681;
    }
    h1:hover
    {
    font-size: 20px;
    color: #E84940;
    }
    </style>
    </head>
    <body>
    <h1>This is heading1 with hover state example</h1>
    </body>
    </html>

Using hover to <p> element

Similarly you can apply CSS hover to paragraph tag as well. Example below shows changing certain properties of <p> as hover state occurs.
    <html>
    <head>
    <style>
    /*Using CSS hover */
    .p_ex
    {
    border: dotted 4px #355681;
    color: #355681;
    }
    .p_ex:hover
    {
    color: #E84940;
    border: solid 4px #355681;
    }
    </style>
    </head>
    <body>
    <p class="p_ex">
    This is paragraph element
    </p>
    </body>
    </html>

    CSS display – Working with display property for block, table or none in CSS

The Display property of CSS

The CSS display property is used to display or hide specified HTML elements. The display CSS property value as none makes specified element hidden. The element will be hidden the way as it does not exist in web page. Or you can say an element with display: none would not occupy any space in web page.
    <html>
    <head>
    <style>
    /*Using CSS Display*/
    .div1
    {
    border: solid;
    border-width:1px;
    color: #355681;
    }
    a
    {
    border: solid;
    border-width:1px;
    }
    </style>
    </head>
    <body>
    <div class="div1">This is Div block with full width and line-breaks before and after</div><br />
    <a href="http://www.example.com" target="_blank" rel="nofollow">default link style</a>
    </body>
    </html>
The display property is also to control display of elements (block or inline) the way it does. As such block elements (div, p, h1, h2 etc.) are those that occupies full available width. Besides it adds line-breaks before and after it. While in-line items like <a> <span> etc. are those that takes only required space.
This chapter will show examples of display in CSS for both: hiding elements and changing behaviour of inline or block elements by using display property. First let us look at display inline-block part.

CSS display inline-block example

See example below how block and inline elements look normally with Div block and <a> and then we will show how to use display:
    <html>
    <head>
    <style>
    /*Using CSS Display*/
    .div1
    {
    border: solid;
    border-width:1px;
    color: #355681;
    }
    a
    {
    border: solid;
    border-width:1px;
    }
    </style>
    </head>
    <body>
    <div class="div1">This is Div block with full width and line-breaks before and after</div><br />
    <a href="http://www.example.com" target="_blank" rel="nofollow">default link style</a>
    </body>
    </html>
As you can see Div element is taking full width available and <a> is taking only what is required. The examples below shows how to usedisplay CSS property to make Div element as in-line element and <a> as block element.

Display block element example

The following example shows how to use display to block element. The example uses display CSS property on Div block element to make it inline. That means it will only take necessary space and also removes line-breaks after display inline value is applied.


<html>
<head>
<style>
/*Using CSS Display*/
.div1
{
border: solid;
border-width:1px;
color: #355681;
display:inline;
}
a
{
border: solid;
border-width:1px;
}
</style>
</head>
<body>
<div class="div1">This is Div block with display:inline property</div><br />
<a href="http://www.example.com" target="_blank" rel="nofollow">default link style</a>
</body>
</html>
You can see Div element is now occupying space where text ends. Also it removes line-break unlike above example by using CSS display inlinevalue to Div element.

Display inline element element

The following example shows how to use display block value to an inline element. The example uses display property on <a> inline element to make it block. That means it will occupy whole space and also adds line-breaks after using display block value.


<html>
<head>
<style>
/*Using CSS Display*/
a
{
border: solid;
border-width:1px;
display:block;
}
</style>
</head>
<body>
<a href="http://www.example.com">link display:block</a>
</body>
</html>
You see <a> which is basically an inline element is not acting as block element by using display block value.
Display none example to make elements hidden
The following examples shows how to use display none value. The example shows how to hide Div and heading elements with display: none property value.


<html>
<head>
<style>
/*Using CSS Display*/
h1
{
font-size:16px;
}
h2
{
display:none
}
div
{
border: solid 1px black;
color: #355681;
display:inline;
display:none
}
</style>
</head>
<body>
<h1>This is not hidden heading 1</h1>
<h2>This is hidden headin 2</h2>
<div>This is hidden Div</div>
</body>
</html>
You can use JavaScript to make hidden elements as visible. The example below uses jQuery (javascript library) to show an element visible which is made hidden by using display:none.
<!DOCTYPE html>
<head>
<title>jQuery Testing</title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="text/javascript" language="javascript">


$(document).ready(function() {


$(".hidetext").click(function () {


$(".text").show("slow")
});
});
</script>
</head>
<body>
<button class="hidetext">Show yellow line</button>
<div class="text" style="background-color:yellow;display: none;">
This is Yellow line!!
</div>
</body>
</html>


You can read more about making hidden elements as visible in jQuery chapter: jQuery show.

CSS display table example to make table hidden and visible with jQuery

The following shows how to use display table. The example below shows how to hide table with display: none property value. Upon clicking on button the table will be shown by using jQuery.


<html>
<head>
<style>
/*Using CSS border*/
.table_cl{
display:none;
border-collapse: collapse;
border: 2px solid #006655;
}
.table_cl th{
border: 1px dashed black;
color: #FF8800;
}
.table_cl td{
border: 1px dotted black;
color: blue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="text/javascript" language="javascript">


$(document).ready(function() {


$(".hidetext").click(function () {


$("table").show("slow")
});
});
</script>


</head>
<body>
<table class="table_cl">
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
<button class="hidetext">Show table</button>
</body>
</html>

Difference between display and visibility property to make elements hidden

How to make elements hidden with CSS display property is explained above with examples. To make elements hidden with visibility property is explained in its own chapter.
The different between these two properties to make elements hidden is that elements hidden by display: none property will not occupy any space or web page will look like there is no element.
Whereas element made hidden with visibility: hidden will occupy element’s space.


Using CSS visibility property to make elements visible or hidden


The Visibility property in CSS

The visibility property is used to display or hide specified HTML elements. The visibility property value as hidden makes specified element invisible. An element made hidden with visibility: hidden will occupy element’s space.
CSS Display property is also used to make elements hidden. The difference between these two properties to make elements hidden is that elements hidden by display: none property will not occupy any space or web page will look like there is no element.


Whereas element made hidden with CSS visibility hidden will occupy element’s space.

Syntax of using CSS visible

Following is the syntax to use visibility CSS property:
visibility:hidden;

Example of using visibility property to make elements hidden

The following example shows how to use CSS hidden value in visibility property. The example shows how to hide Div and heading 2 elements with CSS visibility hidden property value. Heading1 and paragraph are visible so you can notice spaces, as such Visibility occupies space even after hiding elements. <html>
<head>
<style>
/*Using CSS visibility*/
h1
{
font-size:16px;
}
h2
{
visibility:hidden;
}
div
{
border: solid 1px black;
color: #355681;
visibility:hidden;
}
p
{
border: solid 1px black;
color: #355681;
}
</style>
</head>
<body>
<h1>This is not hidden heading 1</h1>
<h2>This is hidden heading 2</h2>
<div>This is hidden Div</div>
<p>Paragraph is not hidden</p>
</body>
</html>
As you can see space between H1 and paragraph in demo. The space is for H2 and Div elements that are made hidden by using CSS hiddenvalue of visibility property.

CSS table – Style HTML table border, padding, color, collapse with CSS

Tables and CSS

HTML tables can be styled with power of CSS. You can use CSS border, padding etc. properties to look table more stand out and beautiful.
This tutorial shows you how to style HTML tables by CSS properties.

CSS table with CSS border and padding properties

The example shows how to use table CSS properties to style table. The table style includes setting border, heading and table data where borders are given different specifications. In normal HTML tables borders are separate or detached. The border-collapse property is used to make it collapse into a single border. Also CSS table padding is used for table data (td) as shown below.


<html>
<head>
<style>
/*Using CSS border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
padding:10px;
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>

Setting table width and height example

This example sets height and width of table with CSS. The table headings <th> and table data<td> height and width specified separately by using table CSS properties.


<html>
<head>
<style>
/*Using CSS border*/
table{
width:400px;
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
width:50%;
height:40px;
border: 1px dashed black;
color: #FF8800;
}
table td{
width:50%;
height:30px;
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>
As you can see CSS table width and height are applied.

Using display property to make CSS table hidden and visible with jQuery

The example below shows how to hide table with display: noneproperty value. Upon clicking on button the table will be shown by using jQuery.

<html>
<head>
<style>
/*Using CSS border*/
.table_cl{
display:none;
border-collapse: collapse;
border: 2px solid #006655;
}
.table_cl th{
border: 1px dashed black;
color: #FF8800;

}
.table_cl td{
border: 1px dotted black;
color: blue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script type="text/javascript" language="javascript">


$(document).ready(function() {


$(".hidetext").click(function () {


$("table").show("slow")
});
});
</script>


</head>
<body>
<table class="table_cl">
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
<button class="hidetext">Show table</button>
</body>
</html>

Learn to use CSS float property to float left or right with examples

The float property

You might have noticed thumbnail images attached to a blog posts in landing page or post pages to the left or right of first paragraphs or summary of posts. Similarly big first letter that covers 3,4 or more lines of text in news websites, articles or magazines. Both are shown in examples below.
This can be done with float property. The float CSS property allows to wrap text paragraphs around images (generally), while text can also be wrapped around paragraphs. Generally images are wrapped in right or left directions. Following are examples of using CSS float but first its syntax:

Syntax of float property

Following is the syntax of using float property:
float: left;
Where values can be
  • left: The element or image will be floated to left by using float left
  • right: The element or image will be floated to right by usingfloat right
  • none: default value

Example of using CSS float left value

Following is float left CSS example. In this example an image is set to float to left of paragraph by using float. You can notice in code below that image is placed inside paragraph.
<html>
<head>
<style>
.img_float
{
float:left;
margin:3px;
}
</style>
</head>
<body>
<p>
<img class="img_float" src="OA_logo.png" width="263" height="60" />
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
</body>
</html>

Example of using float right value

Following is an example of using CSS float right value. In this example an image is set to float to right of paragraph. You can notice in code below that image is placed inside paragraph.
<html>
<head>
<style>
.img_float
{
float:right;
margin:3px;
}
</style>
</head>
<body>
<p>
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
<img class="img_float" src="OA_logo.png" width="263" height="60" />
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
</body>
</html>

The float property with first letter example

In this example first letter of first paragraph is floated to left in span element by using CSS float.
<html>
<head>
<style>
.span_float
{
float:left;
font-size:45px;
line-height:40px;
font-weight:bold;
text-align:top;
}
</style>
</head>
<body>
<p>
<span class="span_float">I</span>n this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
<br /><br />
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
In this chapter CSS float is explained, and this is text example. In this chapter CSS float is explained, and this is text example.
</p>
</body>
</html>
As you can see letter I is occupying almost two lines of height that is assigned float property along with others.

Learn to use CSS clear both, left and right values with examples

The Clear property

The clear property is used to specify floating of other element. By default you can float an element in either direction, left or right of other element. However by using clear CSS property you can specify which direction to allow and to not allow other element’s floating.
Clear property has following values:
  1. Clear: none (This is default value, where other elements are allowed to float in any direction)
  2. Clear: left (other element is not allowed to float left)
  3. Clear: right (other element is not allowed to float right)
  4. Clear: both (other element is not allowed to float left or right in Clear both CSS value)

Clear both and left values example

The following example shows how to use CSS clear property. The example below shows four paragraphs.
The first two paragraphs use CSS clear both value while images are set with float property to left and right respectively.
The last two paragraphs uses default clear property. You can see the difference by seeing the example online.


<html>
<head>
<style>
.img_float_left
{
float:left;
margin:3px;
}
.img_float_right
{
float:right;
margin:3px;
}
.p_ex1
{
clear:left;
}
.p_ex2
{
clear:both;
}
</style>
</head>
<body>
<h1>With clear:both property</h1>
<img class="img_float_left" src="OA_logo.png" width="263" height="60" />
<p class="p_ex1">
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
<img class="img_float_right" src="OA_logo.png" width="263" height="60" />
<p class="p_ex2">
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
<h1>Without clear:both property</h1>
<img class="img_float_left" src="OA_logo.png" width="263" height="60" />
<p>
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
<img class="img_float_right" src="OA_logo.png" width="263" height="60" />
<p>
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
This is Online Academy logo. This is Online Academy logo.
</p>
</body>
</html>

The End

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Advertisement

Total Pageviews

5673