Introduction of CSS (Cascading Style Sheet)
The Cascading Style Sheets
specifications from the World Wide Web Consortium (the W3C, which develops
Internet standards; http://www.w3.org)
allows designers to specify the look of page elements, including type, as well
as position those elements precisely on the Web page. Besides these abilities,
CSS allows designers to easily do something at which they excel: change their
minds.
If the look of the elements of your site is
defined according to a style sheet, in order to change the look of the site,
you simply need to change the definitions in the style sheet, and the changes
are automatically applied. Using CSS allows Web designers to spend more time
designing, rather than wasting time with HTML's limitations.
CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an
extension to basic HTML that allows you to style your web pages. An example of a style change would be to
make words bold. In standard HTML you would use the <b> tag like so:
<b> make me bold</b>
This works fine and there is nothing wrong with this process,
except that now if you wanted to say change all your text that you initially
made bold to underlined, you would have to go to every spot in the page and
change the tag.
Another disadvantage can be found in this example: say you wanted
to make the above text bold, make the font style Verdana and change its color
to red, you would need a lot of code wrapped around the text:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>This is text</strong></font>
This is verbose and contributes to making your HTML messy. With
CSS, you can create a custom style elsewhere and set all its properties, give
it a unique name and then ‘tag’ your HTML to apply these stylistic properties:
CSS Syntax:
A CSS rule has two main parts: a selector, and one or more
declaration.
Selector
{Declaration<property:value>; Declaration<property:value>}
Where, the Selector is normally the HTML element you want to
style. And each declaration consists of a property and a value. The property is
the style attribute you want to change. Each property has a value.
Example:
<style
type = "text/css">
h1
{
color: red;
font-size:14px;
}
</style>
CSS Comments:
A CSS comment begins with "/*", and ends with
"*/".
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Applying Cascading Style Sheet:
We can apply Style Sheet in various way into our web pages.
a) Internal Style Sheet
If you simply place the CSS code within the
<HEAD></HEAD> tag of each HTML file is called Internal Style Sheet.
Syntax:
<HTML>
<HEAD>
<TITLE>Title
of Page</TITLE>
<Style type
= "text/css">
CSS Code here…
</style>
</HEAD>
<BODY>
</BODY>
</HTML>
With this method each HTML
file contains the CSS code needed to style the page. Meaning that any changes
you want to make to one page, will have to be made to all. This method can be
good if you need to style only one page, or if you want different pages to have
varying styles.
b) External Style Sheet
An external CSS file can be created with any text editor such as
Notepad like application. A CSS file contains no HTML, only CSS codes. You
simply save it with the ".css" file extension. You can link to the
file externally by placing one of the following links in the head section of
every HTML file you want to style with the CSS file.
Syntax:
<LINK rel="stylesheet"
type="text/css" href="path & filename of css" />
Or you can also use the "@import" method as shown below:
<style type = "text/css">
@import url(path
& filename of .css)
</style>
Example:
<HEAD>
<LINK REL = "stylesheet" TYPE =
"text/css" HREF = " style.css">
</HEAD>
OR
<STYLE TYPE = "text/css" >
<!--
@import url(http://www.abc.com/style.css);
@import url(/style/another.css);
-->
</STYLE>
By using an external style
sheet, all of your HTML files link to one CSS file in order to style the pages.
This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are few reasons this
method is better:
i. Easier
Maintenance
ii. Reduced
File Size
iii. Reduced
Bandwidth
iv. Improved
Flexibility
c) Inline Style Sheet
Inline Styles are defined right in the HTML file along with the
element you want to style. CSS codes are inserted within the STYLE attribute of
each HTML tag.
Example:
<P Style = "color:#00ff00;
font-family:verdana;"> Hello All </P>
Cascading Style Sheet Selectors:
a) The id selector:
The id selector is used to specify a style for a single, unique
element. The id selector uses the id attribute of the HTML element, and is
defined with a "#".
The style rule below will be applied to the element with
id="txtName":
#txtName
{
text-align:center;
color:red;
}
{
text-align:center;
color:red;
}
b) The class selector:
The class selector is used
to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements. This allows you to set a
particular style for many HTML elements with the same class. The class selector
uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center"
will be center-aligned:
.center {text-align:center;}
Formatting Font:
CSS font properties enable you to change the look of your text.
For example, you can assign a font family, apply bold or italic formatting,
change the size and more.
i) Font-Family
This property enables you to set the font family from the list.
Syntax:
font-family:font-name1,font-name2;
Example:
p
{
font-family:
"Times New Roman","Arial","Verdana";
}
ii) Font-Size
This property enables you to set the font size. The possible
values for font size are:
Absolute Value:
xx-small, x-small, small,
medium, large, x-large, xx-large
Relative size: larger, smaller
Percentage: An absolute font size
relative to the parent element's font size.
Syntax:
font-size:font-size-value;
Example:
<HTML>
<HEAD>
<TITLE>Sample
CSS Example</TITLE>
<STYLE type =
"text/css">
h1
{ font-size:14px;}
h2 { font-size:x-large;}
p { font-size:120%;}
</STYLE>
</HEAD>
<BODY>
<H1>This is
Heading 1</H1>
<H2>This is
Heading 2</H2>
<P> This is
Paragraph</P>
</BODY>
</HTML>
iii) Font-Size-Adjust
iv) Font-Stretch
This property relies on the user's computer to have an expanded or
condensed version of the font being used. The possible value for this is:
normal, wider, narrower, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded, expanded, extra-expanded,
ultra-expanded
Note: If this does not appear to work, it is likely that your
computer doesn't have a condensed or expanded version of the font being used.
Example:
<style type="text/css">
p {font-stretch: ultra-expanded}
</style>
<p>CSS font-stretch.<br>
Note: If this doesn''t appear to work, it is
likely that your computer doesn''t have a condensed or expanded version of the
font being used.</p>
v) Font-Style
This declaration helps to set the font style. The possible value
for this is:
normal, italic, oblique and inherit
Example:
<html>
<body >
<h1
style="font-style:italic">Italic Heading</h1>
<h1
style="font-style:inherit">Oblique Heading</h1>
</body>
</html>
Note:
The Oblique Style uses the same font
as Normal (non-italic version of the font-type / font-face) but skews
(slants) it to the right a-little before presenting it to the screen – it looks
less readable than the true Italic version.
While the Italic Style uses a Italic type/version of
the font, most of the time almost all fonts have a Italic version of
the font which has special characters defined for it. But that is not Always the
case, sometimes the Font Designer doesn’t provide those and only provides
the Normal version of the font.
vi) Font-Variant
Enables you to set your text to use small caps. The possible
values for this property are normal and small-caps.
Example:
<style>
p { font-variant:small-caps; }
</style>
vii) Font-Weight
The font-weight property sets how thick or thin characters in text
should be displayed. The possible values for this property are:
normal, bold, bolder, lighter and 100
– 900(400 is same as normal).
Example:
<style>
p { font-weight:bold; }
</style>
viii) Font
The font property is a shorthand property that enables you to set
all font properties in one go.
<style>
p {
font:bold
small-caps italic 20px "Arial","verdana","Times";
}
</style>
Formatting Text:
i) Text-Align
The text-align property specifies the horizontal alignment of the text in an
element. The possible values are: left, right, center and justify.
Example:
<style>
P {
font-size:40;
text-align:justify;
}
</style>
ii) Color
This color property specify the text color of an element. You can
specify color name or hexadecimal value of color.
Example:
<style>
P {
color:#00ff00;
}
</style>
iii) Text-Decoration
This text-decoration property specifies the decoration added to
text. The possible values are: none, underline, overline, line-through and blink.
Example:
<style>
P {
text-decoration:overline;
}
</style>
iv) Text-Indent
The text-indent property specifies the indentation of the first
line in a text-block. You can specify numeric value in px, pt,cm, or %.
Example:
<style>
P {
text-indent:100px;
}
</style>
v) Letter-Spacing
The letter-spacing property helps to set the spacing between
letters in a text-block.
Example:
<style>
P {
letter-spacing:5;
}
</style>
vi) Word-Spacing
The word-spacing property helps to set the spacing between words
in a text-block.
Example:
<style>
P {
word-spacing:20;
}
</style>
vii) Text-Transform
The text-transform property controls the capitalization of text.
The possible values for text-transform property are: none, capitalize,
uppercase and lowercase.
Example:
<style>
P {
text-transform:uppercase;
}
</style>
viii) Direction
The direction property specifies the text
direction / writing direction. Specify "ltr" for
left-to-right, and "rtl" for right-to-left.
Example:
<style>
P {
direction:rtl;
}
</style>
ix) Text-Shadow (Does not supported by IE)
The text-shadow property applies shadow to text.
Syntax:
text-shadow:
h-shadow v-shadow blur color;
where,
h-shadow: The
position of the horizontal shadow. Negative values are allowed.
v-shadow: The
position of the vertical shadow. Negative values are allowed.
blur: The
blur distance value.
color: The
color value for the shadow.
Example:
<p
style="text-shadow:5px 5px 1px blue;">Text shadow:5px 5px 1px
blue;</p>
x) White-Space
The white-space property specifies how white space inside an
element is handled. The possible values for this property are: normal,
nowarp, pre-warp.
Example:
<style>
div {
white-space:pre-wrap;
}
</style>
CSS position Property:
The position property specifies the type of positioning method
used for an element. The possible values for position are: static,
relative, absolute or fixed.
Where:
static –
Elements renders in order, as they appear in the document flow. This is default.
absolute –
The element is positioned relative to its first positioned
(not static) ancestor element.
fixed –
The element is positioned relative to the browser window.
relative –
The element is positioned relative to its
normal position, so "left:20" adds 20 pixels to the element's LEFT
position.
CSS border Property:
The border property sets all the border properties in one
direction. The property can be set are (in order): border-width, border-style,
and border-color. It doesn't matter if one of the value are missing.
Example:
<style
type="text/css">
p
{
border: 5px solid red;
}
</style>
There are several other property which is the family of the border
property are:
i) border-color:
The border-color property sets the color of an element's four site
borders. This property can have from one to four values.
Examples:
· border-color:red green blue pink;
o top border is red
o right border is green
o bottom border is blue
o left border is pink
· border-color:red green blue;
o top border is red
o right and left borders are green
o bottom border is blue
· border-color:red green;
o top and bottom borders are red
o right and left borders are green
· border-color:red;
o all four borders are red
ii) border-style:
The border-style property sets the border line style of an
element. This property can have from one to four values. Possible values are: solid,
dotted, double and dashed.
iii) border-bottom:
iv) border-bottom-color:
v) border-bottom-style:
vi) border-bottom-width:
vii) border-collapse://
viii) border-left:
ix) border-left-color:
x) border-left-style:
xi) border-left-width:
xii) border-right:
xiii) border-right-color:
xiv) border-right-style:
xv) border-right-width:
xvi) border-top:
xvii) border-top-color:
xviii) border-top-style:
xix) border-top-width:
xx) border-width:
xxi) border-radius:
xxii) border-top-left-radius:
xxiii) border-top-right-radius:
xxiv) border-bottom-left-radius:
xxv) border-bottom-right-radius:
xxvi) border-image:
Specify the image as the border around a div element.
Syntax:
border-image:
source slice width outset repeat;
Example:
<style
type="text/css">
div
{
-moz-border-image:
url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:
url(border.png) 30 30 round; /* Safari and Crome */
-o-border-image:
url(border.png) 30 30 round; /* Opera */
border-image:
url(border.png) 30 30 round;
}
</style>
Applying DIV tag to Style Sheet
The DIV tag defines a division or a section in an HTML document.
The DIV tag is used to group block-element to format them with styles.
Attributes of <DIV> tag:
class, id, style, title.
Applying SPAN tag to Style Sheet
The <SPAN> tag is used to group inline-elements in a HTML
document. The SPAN tag provides no visual change by itself.
Attributes of <SPAN> tag:
class, id, style, title
CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another,
without using Flash animations or JavaScripts. CSS3 transitions are effects that let an element gradually change
from one style to another.
To do this, you must specify two things:
- Specify
the CSS property you want to add an effect to
- Specify
the duration of the effect.
Example:
<style
type="text/css">
div {
background:red;
width:100px;
height:100px;
transition: width 2s;
}
div:hover {
width:300px;
}
</style>
Transition Properties
The following table lists all the transition properties:
|
Property
|
Description
|
CSS
|
|
A
shorthand property for setting the four transition properties into a single
property
|
3
|
|
|
Specifies
the name of the CSS property to which the transition is applied
|
3
|
|
|
Defines
the length of time that a transition takes. Default 0
|
3
|
|
|
Describes
how the speed during a transition will be calculated. Default
"ease"
|
3
|
|
|
Defines
when the transition will start. Default 0
|
3
|
Example:
<style
type="text/css">
div {
background:red;
width:100px;
height:100px;
transition: width 2s, height 2s, transform 2s;
transition-delay:2s;
}
div:hover {
width:300px;
height:300px;
}
</style>
CSS3 Animations
With CSS3, we can create animations, which can replace animated
images, Flash animations, and JavaScripts in many web pages.
CSS3 @keyframes Rule
To create animations in CSS3, you will have to learn about the
@keyframes rule.
The @keyframes rule is where the animation is created. Specify a
CSS style inside the @keyframes rule and the animation will gradually change
from the current style to the new style.
CSS3 animation
When the animation is created in the @keyframe, bind it to a
selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two
CSS3 animation properties:
- Specify
the name of the animation
- Specify
the duration of the animation
Example:
|
@keyframes myfirst
{ from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background: red;} to {background: yellow;} }
div
{ animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari and Chrome */ } |
CSS3 Animation
Properties
The following table lists the @keyframes rule and all the
animation properties:
|
Property
|
Description
|
CSS
|
|
Specifies
the animation
|
3
|
|
|
A
shorthand property for all the the animation properties, except the
animation-play-state property
|
3
|
|
|
Specifies
the name of the @keyframes animation
|
3
|
|
|
Specifies
how many seconds or milliseconds an animation takes to complete one cycle.
Default 0
|
3
|
|
|
Describes
how the animation will progress over one cycle of its duration. Default
"ease"
|
3
|
|
|
Specifies
when the animation will start. Default 0
|
3
|
|
|
Specifies
the number of times an animation is played. Default 1
|
3
|
|
|
Specifies
whether or not the animation should play in reverse on alternate cycles.
Default "normal"
|
3
|
|
|
Specifies
whether the animation is running or paused. Default "running"
|
3
|
No comments:
Post a Comment