Cascading style sheets
A style is a set of
formatting instructions that can be applied to a piece of text. There are three mechanisms by which we can
apply styles to our HTML documents.
1. Inline style sheets
2.Internal style sheets
3.External style sheets
Inline style sheets:
In the inline style
the style is defined within the body of the HTML document itself. For example
<html>
<head>
<title>Inline style sheets</title>
</head>
<body>
<p
style=”margin-left:10%;border:ridge;background:0000ff”>
Welcome To CSS
</p>
</body>
</html>
Internal style sheets:
A style sheet can
be defined in the header section with the <style> tag corresponding
ending </style> tag. This way of
defining style sheets is called an internal style sheets.
<html>
<head>
<title>internal style sheets</title>
<style>
<!---h1
{margin:10%;
Align:left
Font face: Times New Roman
}
--->
</head>
</style>
<body>
<h2>OmgMca.blogspot.in</h2>
</body>
</html>
In the above example h1 tag is re defined. The font face is name of the font that is Times New Roman, margin for
the text is 10% and the alignment is left placed around it.
External Style sheets:
In this case of
external style it is stored in a separate file.
This style sheet can be linked to no.of HTML documents
Body{font:14pt “Arial”;color:black:background:orange}
H1{font: 12pt “Times Roman” bold}
P{font:12pt “Times Roman”}
H4{font:26pt “Times New Roman” Italics}
A(text decorator: blinking; color: green)
This style sheets
can be linked by the link tag of the header section as follows
<link rel=styleshhet href=”ex.css” type=”test/css”>
The attribute rel=stylesheet informs is that this link tag
is for linking a style sheet to the document.
The href=”ex.css”
informs that ex.css is the file name of the style sheet. Tyle/css informs as
that the style sheet type is text/css
Properties of style sheets:
A number of
properties for available formatting text using style sheet. These are as follows
Fonts:
Fonts are identified by giving the name of a specified
font. This is called font family.
H{
Font family=”Arial”}
The font family
properly specifies the name of the font that should be displayed. In this case we use Arial font.
Font style:
The style property
defines that the font to be displayed in one of three ways that are normal, italic,
bold.
Example:
P{
Font_style=”italic”;}
Font weight:{normal/bold/bolder/lighter/100/200}
The first four
option are relative while the numbered values is the absolute weights and not
all fonts not support to all possible weights and should be careful while using
the absolute weights.
Font size: (large, 10, 12, 14----)
The absolute size
of font is small, medium, and large.
Example:
H1{
Font_size=”12pt” font_style=”italic”}
Text decoration:
Any piece of text
can be decorated the underline can be removed for hyperlinks by using the
following code
A:link, A:visited, A:actice
{
Text.decoration.overline;
}
Borders:
Borders colors and
styles can also be applied to the border of their box using the following
syntax.
Border-color=”pink”;
Border-style=”doubled, dashed, dotted;”
IN the above
example the color pink is specified to margins that is top and bottom, the border
style is dotted to margin.
thanks mani
ReplyDeletecan u prepare tutorials for python
Sorry madhu, PYTHON is not in our syllabus.
Delete