The HTML <style> tag is used for declaring style sheets
within your HTML document. Each HTML document can contain multiple <style> tags.
The below code defines the style.
- background-color: color name or code
- background-image=url(imagename)
- font-family: fontname
- font-size: number unit ->units can be px, pt, mm,
cm, in
- font-weight:bold | bolder
- text-decoration:underline | none
- position: absolute | relative
- color: color name or code
- left=x
- top=y
- cursor: hand | crosshair
When a browser reads a style sheet, it will format the
document according to it.
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to
provide the browser with more information about how the tag should appear or
behave. Attributes consist of a name and a value separated by an equals (=)
sign, with the value surrounded by double quotes.
There are 3 kinds of attributes that you can add to your
HTML tags: Element-specific, global, and event handler content attributes. The
attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
|
Attributes Introduced by
HTML5 |
| Attributes |
Description |
| type |
Specifies the style sheet
language as a content-type (MIME type). |
| media |
Specifies the device that
the styles apply to. Must be a valid media query.
Possible values:
all
braille
print
projection
screen
speech |
| scoped |
The scoped attribute
specifies the style apply only for the style element's parent element
and the parent element's children. Not the whole document. |
Global Attributes
The following attributes are standard across all HTML 5 tags.
|
HTML5
Global Attributes |
| accesskey |
draggable |
style |
| class |
hidden |
tabindex |
| dir |
spellcheck |
|
| contenteditable |
id |
title |
| contextmenu |
lang |
|
Event Handler Content Attributes
Here are the standard HTML 5 event handler content
attributes.
| onabort |
onerror* |
onmousewheel |
| onblur* |
onfocus* |
onpause |
| oncanplay |
onformchange |
onplay |
| oncanplaythrough |
onforminput |
onplaying |
| onchange |
oninput |
onprogress |
| onclick |
oninvalid |
onratechange |
| oncontextmenu |
onkeydown |
onreadystatechange |
| ondblclick |
onkeypress |
onscroll |
| ondrag |
onkeyup |
onseeked |
| ondragend |
onload* |
onseeking |
| ondragenter |
onloadeddata |
onselect |
| ondragleave |
onloadedmetadata |
onshow |
| ondragover |
onloadstart |
onstalled |
| ondragstart |
onmousedown |
onsubmit |
| ondrop |
onmousemove |
onsuspend |
| ondurationchange |
onmouseout |
ontimeupdate |
| onemptied |
onmouseover |
onvolumechange |
| onended |
onmouseup |
onwaiting |
Types of Cascading Style Sheets (CSS) : There are
three types of CSS.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS: Inline CSS means applying the code
directly on tags using STYLE attribute.
For example:
<body>
<form
id="form1"
runat="server">
<div>
<p
style="background-color:Black;color:Yellow">Hello</p>
<h1
style="font-size:1in;color:red">
Hi</h1>
</div>
</form>
</body>
Internal CSS: Internal CSS means applying
the codes on the specified tags or create a named style that can be applied to
any kind of tag. Such styles are created in <STYLE> tag under <HEAD> section. To
create the named styles use . along with some name called as class name. Use
CLASS attribute on tags to apply that class.
For example:
<head
runat="server">
<title>Untitled
Page</title>
<style
type="text/css">
p {color:blue;font-size:12pt}
A {text-decoration:none}
A:hover{color:red}
.btn{cursor:hand}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<p>%</p>
<p>ass<span
class="btn">aa</span>sfasfasdf</p>
<a
href="http://asdfasd.com">
asdf</a><br
/>
<a
href="http://asdfasdf.com">
as</a><br
/>
dfas<br
/>
df<br
/>
asf<br
/>
<input
id="Button1"
style="z-index:
100; left:
192px; position:
absolute; top:
64px"
type="button"
value="button"
class="btn"
onclick="return
Button1_onclick()" />
External CSS: An external style sheet is ideal
when the style is applied to many pages. With an external style sheet, you can
change the look of an entire Web site by changing one file. Each page must link
to the style sheet using the <link> tag. The <link> tag goes inside the <head>
section.
<LINK href="filename.css"
rel="stylesheet">
add the following code in mylibrary.css file.
body
{
background-color:Aqua;
}
.testing
{
font-family: Arial;
font-size: 16px;
background-color:
#FF00FF;
border-style: dotted;
}
#first
{
}
Now using file code.
<html
>
<head
>
<title>Untitled
Page</title>
<style
type="text/css">
#abc {color:Red;background-color:blue}
.xyz {color:Yellow;background-color:Black}
</style>
<link
href="MyLibrary.css"
rel="Stylesheet"
/>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<h1
id="abc">Hello
to all</h1>
<p
class="xyz">Welcome
to India</p>
<input
type="button"
value="Save Data"
id="abc"
/>
</div>
<asp:TextBox
ID="TextBox1"
runat="server"
Class="xyz"></asp:TextBox>
</form>
<p
class="testing">
Hello</p>
</body>
</html>