Programming Tutorials: CSS

Showing posts with label CSS. Show all posts

Wednesday, January 22, 2014

Background Properties

CSS Background Image :

Usage:
background-image: url('image.jpg');
background-image: none;

Definition:

Background Image can be set using the tag background-image.
It takes the image in url as said in the example.

a) Url("image directory"). We have to set the image path inside the tag url. It accepts either of the given values.
b) None, if no background image is required.

Examples

Example 1:

<div style="background-image: url('test.jpeg');"> color name <br><br><br></div>

Result:

color name

Example 2:

<font style="background-image: none; background-color: green; "> color using hex values <br><br><br><br></font>

Result:

color using hex values

Background Properties__CSS Background Color

BackGround Color

Usage:
background-color: red;
background-color: #343434;
background-color: transparent;

Definition:

Background Color in html can be set using the css property background-color.
It accepts values in two formats

a) Color name
b) #xxyyz where xx,yy,zz points to hexadecimal values of red,green,blue
c) Transparent background can also be set in css.

Examples

Example 1:

<font style="background-color: green;"> color name </font>

Result:

color name

Example 2:

<font style="background-color: #888888;"> html text background using css</font>

Result:

html text background using css

Example 3:

<font style="background-color: transparent; color:green;"> transparent backgrounds can also be given using css</font>

Result:

transparent backgrounds can also be given using css

Background Properties_ CSS Text/Font Color

Property: Color

Usage:
color: red;
color: rgb(125,234,124);
color: #343434;

Definition:

Colors for html font/text can be set using the css tag "color".
It accepts values in three formats

a) Color name
b) rgb(x,y,z) where x,y,z is red,green,blue
c) #xxyyz where xx,yy,zz points to hexadecimal(hex) values of red,green,blue

Examples

The following examples will show on how to set color for a font or text in html using css.

<div style="color: green;"> color name </div> <div style="color: rgb(125,125,125);"> color using rgb(x,y,z) </div> <div style="color: #343434;"> color using hex values</div>

Code:

<div style="color: green;"> color name </div>

<div style="color: rgb(125,125,125);"> color using rgb(x,y,z) </div>

<div style="color: #343434;"> color using hex values</div>

Result:

color name

color using rgb(x,y,z)

color using hex values

Sunday, January 19, 2014

Types - External Style Sheet

This will be very useful when we have so many styles defined. We will want to take all the styles in to a different file. That's what we do in External CSS. We take all the styles in a external file and map it with the html page.

Example:
We will put the following style in a text file say mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

In our head we will link to the external style sheet using the tag link in header portion
Tag:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class".
Example1:

<font class=mystyle1> MY STYLE </font>

Result1:

MY STYLE

Example2:
<a href="index.php" class=mystyle1> MY STYLE </a>

Result2:

MY STYLE

Types - User Defined

Here user defines his own style and uses it anywhere he wants.

Code:
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

The names used for user defined styles should not belong to any html tag. We set the style for the tag using the attribute "class".

Example1:

<font class=mystyle1> MY STYLE </font>

Result:

MY STYLE

Example2:

<a href="index.php" class=mystyle1> MY STYLE </a>

Result:

MY STYLE

Internal Styles - Identifiers

If we use internal styles with identifiers, we have to set the id for the style to take effect.

Code:

<head>
<style>
a#test1
{
color: red;
background-color: orange;
}

a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

<a href="index.html" id=test1> Index </a><br><br>
<a href="index.html" id=test2> Index </a>

Now you can see how we have different styles for the same "a" tag.

Note 1: If required you can using <span> instead of <div> tags. div tag will start and end on new lines. span will not exceed the tag area.

Internal Styles - Universal

Example:

This page defines the style as explained above. So we can see how a "a" tag looks like

Code:

<head>
<style>
a
{
color: green;
}
</style>
</head>

Result:

INDEX

CSS Style Types>>Topic-01

Topic: How can I set a style in html?

Types of styles:

Basically there are three ways we can set styles for the html tags.

a) Inline
b) Internal
c) External CSS

Inline Styles
This kind of style takes values inline with the html tag

e.g:

Result:

Test Font

Internal Styles

universal,
identifiers,
user defined.

Rule with CSS

A fast and easy method to insert a separating line into a website is with a horizontal rule, the hr tag.

This horizontal rule:

Was bent by the following inline CSS style:

It could also be styled in your inside or exterior style sheet (which is habitually the better come within reach of):

hr {

color: #f00;

background: #f00;

width: 75%;

height: 5px;

}

Note: So as to color AND background-color are practical. This is essential, as some browsers use the background-color, others (IE) the color constituent to apply color to the rule.