This post is
for adding the attribute and their value to your web pages,
As,
I have discussed four different
ways to include style sheet rules in a HTML document. So there is some preference rule for the
different types of CSS.
- Inline style sheet takes highest priority, so it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
- Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
- Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable.
CSS Comments:
Comments
are the lines other than coding, many times you may need to put additional information in your style sheet blocks.
For this purpose we can use comments in any part of our style sheet. The css comments are same as c, c++ like /*.....this is a
comment in style sheet.....*/.
We can use /*
....*/ to comment multi-line blocks also.
Example:
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
margin-top: 1em;
text-transform: lowercase;
}
/* end of style rules. */
CSS - Measurement Units
CSS supports a number of measurements including absolute units such as inches, centimeters, points, etc. as
well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g border="1px solid red".
There
is a list of all CSS Measurement
Units alogwith Examples:
|
Unit
|
Description
|
Example
|
|
%
|
Defines a
measurement as a percentage relative to another value, typically an enclosing
element.
|
p {font-size:
16pt;
line-height:
125%;}
|
|
cm
|
Defines a
measurement in centimeters.
|
div
{margin-bottom: 2cm;}
|
|
em
|
A relative
measurement for the height of a font in em spaces. Because an em unit is
equivalent to the size of a given font, if you assign a font to 12pt, each
"em" unit would be 12pt; thus, 2em would be 24pt.
|
p
{letter-spacing: 7em;}
|
|
ex
|
This value
defines a measurement relative to a font's x-height. The x-height is
determined by the height of the font's lowercase letter x.
|
p {font-size:
24pt;
line-height: 3ex;}
|
|
in
|
Defines a
measurement in inches.
|
p
{word-spacing: .15in;}
|
|
mm
|
Defines a
measurement in millimeters.
|
p
{word-spacing: 15mm;}
|
|
pc
|
Defines a
measurement in picas. A pica is equivalent to 12 points; thus, there are 6
picas per inch.
|
p {font-size:
20pc;}
|
|
pt
|
Defines a
measurement in points. A point is defined as 1/72nd of an inch.
|
body
{font-size: 18pt;}
|
|
px
|
Defines a
measurement in screen pixels.
|
p {padding:
25px;}
|
CSS – Colors
It
is used to specify a color to any part of your webpage. Generally these are used to set a background
color of an element or the foreground color of an element(i.e., its text). They can also
be used to give color effect to the borders of tables / pages and other decorative
effects.
There
are three 5 different formats to specify the colors to an element which are
listed below :-
|
Format
|
Syntax
|
Example
|
|
Hex Code
|
#RRGGBB
|
p{color : #FF0000;}
|
|
Short Hex Code
|
#RGB
|
p{color:#6A7;}
|
|
RGB %
|
rgb(rrr%,ggg%,bbb%)
|
p{color:rgb(50%,50%,50%);}
|
|
RGB Absolute
|
rgb(rrr,ggg,bbb)
|
p{color:rgb(0,0,255);}
|
|
keyword
|
aqua, black,
etc.
|
p{color:teal;}
|
1.
CSS Colors
- Hex Codes: it is a 6 digit representation of three colors RGB. Out of 6 digits first two digits(RR) represent a red
value, the next two are a green
value(GG), and the last are the blue
value(BB). The value of all 3 color could range from 0-9,A-F, 0 means
that color is not available in the color code and F means highest intensity of
that color is available. We can get this code value from our graphics software
like photoshop, paint brush etc. each hexadecimal code is prefixed with a
pound(#) sign.
For example :-
#000000 - white, #FF0000-red, #00FF00-green
2.
CSS Colors - Short Hex
Codes: it is a shorter form of hex code of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit
value; For example: #6A7 becomes
#66AA77.
For
Example : - #000000 can be written as #000
3.
CSS Colors
- RGB Values: color value can be specified using
the rgb( )
property. This property takes three values, one each for red, green, and
blue. The value can be an integer between 0 and 255 or a percentage.
For
example to show few colors using RGB values.
: rgb(0,0,0), rgb(255,0,0), rgb(0,255,0),rgb(0,0,255), rgb(255,255,0)
Backgrounds using
CSS :- background
properties
of an element are as under :
- The background-color - used to set the background color of an element.
- The background-image - used to set the background image of an element.
- The background-repeat -used to control the repetition of an image in the background.
- The background-position -used to control the position of an image in the background.
- The background-attachment-used to control the scrolling of an image in the background.
- The background-used as shorthand to specify a number other background properties.
The following
table will illustrate all the above attributes and their respective possible
values.
|
Attribute
|
Value
|
description
|
|
Background
Attachment :value
|
•
Fixed
•
Scroll
|
This
property decides whether your background should be scroll with the page or
not . Fixed will fixed the background so when you go down the page it may
possible you will not see the background setting while scroll allow the
background (for example image) to be scroll with the page.
|
|
background-color:
value;
|
•
color name
•
Hexa. No.
•
RGB color code
•
transparent
|
declare
a color for the background of an element. For example :-
background-color:yellow
background-color:rgb(255,0,0)
background-color:”#FF0000”
or
transparent make the background transparent.
|
|
background-image:
url(path_to_image);
Values:
|
•
url
•
none
|
set
an image for the background of an element
|
|
background-position: value;
|
•
top
left
•
top
center
•
top
right
•
center
left
•
center
center
•
center
right
•
bottom
left
•
bottom
center
•
bottom
right
•
x-%
y-%
•
x-pos
y-pos
|
position an image used for the background
of an element
|
|
background-repeat: value;
|
•
no-repeat
•
repeat
•
repeat-x
•
repeat-y
|
This is a very important
attribute in which we can repeat our smaller image through out the page, on x
axis, on y axis or no-repeat
|
Set the background color:- For example
:- if you want to set the background color of any element.
<p style="background-color:yellow;">
This text has a yellow background color.
</p>
Set
the background image:- the following is the example which demonstrates how to set the background
image for an element.
<table style="background-image:url(pattern1.png);">
<tr><td>
This table has background image set.
</td></tr>
</table>
Example :-
<p style="background-color:yellow;">
This text has a yellow background color. </p>
<table style="background-image:url(pattern1.png);">
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr><tr><td>
This table has background image set. </td><td>
Column2 </td></tr><tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
<tr><td>
This table has background image set. </td><td>
Column2 </td></tr>
</table>
Repeat the
background image: Following is the example which demonstrates how to repeat the background image if image is
small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display
only once. For example Following
is the example which
demonstrates how to repeat the background image horizontally.
<html>
<head>
<style>
body
{
background-image:url('pattern1.png');
background-repeat:repeat;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<p>this
is a background with no-repeat, set the position on right top corner
example.</p>
<p>Now
the background image is only shown once, and positioned away from the
text.</p>
<p>In
this example we have also added a margin on the right side, so the background
image will never disturb the text.</p> </body> </html>
In
this example our image is repeated throughout the page.
Set
the background image position:
Following is the example which demonstrates how to set the background image position at top right corner and its right margin is 200
px away from the right side.
<html> <head>
<style>
body
{
background-image:url('pattern1.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
} </style>
</head>
<body>
<h1>Hello World!</h1>
<p>this is a background with no-repeat, set the
position on right top corner example.</p>
<p>Now the background image is only shown once, and
positioned away from the text.</p>
<p>In this example we have also added a margin on
the right side, so the background image will never disturb the text.</p>
</body>
</html>
If you want that the image should repeat
on x-axis use its repeat-x value and if on Y-axis the use repeat-y value of the
background-repeat attribute :-
<html>
<head>
<style>
body
{
background-image:url('pattern1.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<p>this
is a background with no-repeat, set the position on right top corner
example.</p>
<p>Now
the background image is only shown once, and positioned away from the
text.</p>
<p>In
this example we have also added a margin on the right side, so the background
image will never disturb the text.</p> </body> </html>
<html>
<head>
<style>
body
{
background-image:url('pattern1.png');
background-repeat:repeat-yx;
}
</style>
</head>
<body>
<h1>Hello
World!</h1>
<p>this
is a background with no-repeat, set the position on right top corner
example.</p>
<p>Now
the background image is only shown once, and positioned away from the
text.</p>
<p>In
this example we have also added a margin on the right side, so the background
image will never disturb the text.</p> </body> </html>
Set
the background attachment:
Background attachment determines whether
a background image is fixed or scrolls with the rest
of the page.
Following
is the example which
demonstrates how to set the fixed background image.
<p style="background-image:url(/images/pattern1.gif);
background-attachment: fixed; “>
This parapgraph has fixed background image. </p>
Following
is the example which
demonstrates how to set the scrolling
background image.
<p style="background-image:url(/images/pattern1.gif);
background-attachment:scroll;">
This parapgraph has scrolling background image. </p>
Shorthand property :
You
can
use the background property to set all the background properties
at once. For example:
<p style="background:url(/images/pattern1.gif) repeat fixed;"> This parapgraph has fixed repeated
background image.
</p>
No comments:
Post a Comment