CSS: Cascading Style Sheets (CSS) is a
style sheet language used to describe the presentation semantics of a document
written in a markup language. It is a ability to suggest how your documents are
styled. It offers a superior solution to the buggy font tag, other proprietary
tags and attributes, and adds many other ways to style a document. Its most
common application is to style web pages written in HTML and XHTML, but the
language can also be applied to any kind of XML document.
CSS makes it easier to create and maintain
websites. One style sheet can even be used to style an entire site. By updating
that one file you instantly update your site. The basic purpose of CSS is to
separate the content of a web document from its presentation.
With
CSS you define the colors and sizes in "styles". Then as you write your
documents you refer to the styles. Therefore: if you change a certain style it
will change the look of your entire site. It gives the option of
selecting various style schemes and rules according to your requirements and it
also allows the same HTML or XHTML document to be presented in more than one
varying style.
Basically CSS are three types:
- Inline styles.
- Embedded style.
- External style sheets.
Lets look the example of using CSS, here we use
CSS to change the style of an button:
In the given example we have a button on the
form and we want to change the color and style of the color. So, for this change
we use CSS(Cascading Style Sheets) and from the class name of CSS we can change
any of the button within the application we just need to give the reference of
the CSS class name to that control which we want to modify.
Example
- First create a form and drag three label, three text box and one button from the toolbox:
- You can also create by coding:
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="height: 646px">
<form id="form1" runat="server">
<div style="height: 435px; width: 377px; background-color:Aqua">
<asp:Label ID="Label2" runat="server"
style="z-index: 1; left: 51px; top: 118px; position: absolute" Text="Age"></asp:Label>
<asp:Label ID="Label1" runat="server"
style="z-index: 1; top: 45px;position: absolute; left: 51px" Text="Name"></asp:Label>
<asp:Label ID="Label3" runat="server"
style="z-index: 1; left: 55px; top: 203px; position: absolute" Text="Address"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Submit" />
<asp:TextBox ID="TextBox1" runat="server"
style="z-index: 1; left: 130px; top: 43px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"
style="z-index: 1; left: 129px; top: 117px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"
style="z-index: 1; left: 131px; top: 201px; position: absolute"></asp:TextBox>
</div>
</form>
</body>
</html>
- Now to change the color and style of submit button create an CSS file:
.ButtonStyle
{
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
border: 0px;
z-index: 1;
left: 138px;
top: 301px;
width: 75px;
height: 30px;
position: absolute;
background-color:Olive;
}
- Add reference in the head section:
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
- Apply the CSS class on button:
<asp:Button ID="Button1" runat="server" CssClass="ButtonStyle" Text="Submit" />
- Run the application and modified button will show on:
Happy Learning