CSS - Cascaded Style Sheet : Part 2 (Selectors)

Hi,

In my previous article, I have written about Introduction of CSS and its basics. In continuation of CSS Tutorial series, this post will help you learning about SELECTOR. We will discuss here for beginners so that they can get maximum and understand the basic difference of their types.

Introduction:

In a embedded or External style sheet, the target element is not fix. Basically we write CSS in embedded or External mode so that we can re-use it when required and can modify whole look of page or website by modifying CSS file only. For using multiple CSS values and properties, we need Identifiers which are called Selector in CSS. Just as In case of C we write a function and use it anywhere, the SELECTOR are same. You will understand more by its example. As per CSS Rule, Selector are divided in three types.

HTML Selector:

HTML Selector are part of HTML Tags. They need not to be used at HTML/XHTML syntax. In short we can define style sheet for any of the markup tags which is used in document but we can not create our own selector of this kind. 

Example:

/* HTML Selectors */
 h1
 {
  font-family: Verdana, Calibry, Tahoma;
  color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:21px;
  text-decoration: bold;
 }
 
 h2
 {
  font-family: Verdana, Calibry, Tahoma;
  color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:18px;
  text-decoration: underline;
  text-align:center;
 }
 
 p
 {
 font-family: Verdana, Calibry, Tahoma;
 text-align:justify;
 padding: 4px 4px 4px 4px;
 }

Class Selector:

Class selector are selectors which need to be used  with class tag in HTML or similar tag in various language. These start with period/dot (.) symbol. These can be used unlimited times in documents and need to be defined each time for markup syntax. You are free to choose name of selector.

Example:

 /*  Class Selectors */
 .textBox
 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    border: solid 1px black;
    font-size: 13px;
    text-decoration: none;
    margin-left: 0px;
 }
 
 .button
 {
    font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
    border-top: 1px solid #dec227;
    background: #ffd800;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
    background: -moz-linear-gradient(top, #ffd800, #65a9d7);
    background: -ms-linear-gradient(top, #ffd800, #65a9d7);
    background: #ffd800;
    padding: 1px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    -webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 13px;    
    text-decoration: none;
    vertical-align: middle;
    height: 27px;
 }

ID Selector:

ID Selector are based upon ID of element. These are initialized with Pound or Hash (#) sign. These can be used only once in a document as the ID of attribute must be unique as per document markup standard. These need not be assigned with attribute but remember, the ID of document element should be same as ID defined in selector. They typography case (lowercase/uppercase) is sensitive here.

Example:

 /* ID Selectors  */
 
 #footer {
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    font-size: 15px;
    color: red;
    background-color: #ffd800;
	text-align:center;
}

For you, here is the complete code of HTML Page which is as shown in above screenshot.

<html>
<head>
<title>CSS Stylesheets & Selectors </title>
<style>
/* HTML Selectors */
 h1
 {
  font-family: Verdana, Calibry, Tahoma;
  color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:21px;
  text-decoration: bold;
 }
 
 h2
 {
  font-family: Verdana, Calibry, Tahoma;
  color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:18px;
  text-decoration: underline;
  text-align:center;
 }
 
 p
 {
 font-family: Verdana, Calibry, Tahoma;
 text-align:justify;
 padding: 4px 4px 4px 4px;
 }
 
 
 /*  Class Selectors */
 .textBox
 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    border: solid 1px black;
    font-size: 13px;
    text-decoration: none;
    margin-left: 0px;
 }
 
 .button
 {
    font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
    border-top: 1px solid #dec227;
    background: #ffd800;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
    background: -moz-linear-gradient(top, #ffd800, #65a9d7);
    background: -ms-linear-gradient(top, #ffd800, #65a9d7);
    background: #ffd800;
    padding: 1px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    -webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 13px;    
    text-decoration: none;
    vertical-align: middle;
    height: 27px;
 }
 
 /* ID Selectors  */
 
 #footer {
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    font-size: 15px;
    color: red;
    background-color: #ffd800;
	text-align:center;
}
</style>
</head>
<body>
<H1>Types of Selectors in CSS</H1>
<p>In this topic we will be discussing about different types of Selectors in CSS (Cascaded Style Sheets). You will learn about all kind of selectors with examples at the last of this post.</p>
<h2>1. HTML Selector</h2>
<p>As on this line, we did not applied any of stylesheet tags (class or ID). But you will see the changes in style of H1 , H2 and P tag. These are HTML Tags and automatically used by HTTP Web server as they are present in stylesheet.<p>
<h2>2. Class Selectors</h2>
<input type="text" class="textBox" name="FirstName" value="Enter your first Name." />
<input type="button" class="button" name="Submit" value="Click to Submit" />
<p>In above two lines we used class="textbox" and class="button". As in above stylesheet we have created them with period (.) and used with class attribute of HTML element, so these are called Class selectors.</p>
<h2>3. ID Selector</h2>
<p>We will be applying these settings in last of this webpage where we will write footer.</p>
<div id="footer">All Rights are reserved.</div>
</body>
</html>

Thanks for reading. I will be back with another article in CSS series. Your suggestions or feedback are expected and play great role in our development. Keep reading, writing & sharing.
John Bhatt

Read More

CSS - Cascaded Style Sheets : Part 1

Hi,

This time, as we did in beginning for HTML, I am back with CSS Tutorial. This post will contain all information about Cascaded Style Sheets, commonly known as CSS.

Introduction:

CSS is used to decorate HTML elements. This is developed by W3C, Bert Bos, Hakon Wium Lie. In other words it is a scripting language written in any text editor that is used to describe look and formatting of hypertext document. However this is present in all kinds of documents that are written in any markup languages including HTML. Latest version is CSS 4 which is in early stage in current days. CSS Statement is divided in 3 parts in simple.
This is written between STYLE tags or with STYLE attribute if any HTML Keyword. Style tag is container/closed tag of HTML.

Example

text-align : left ;

Property: These are fixed set of keywords which define property of element. In above example text-align is property.
Separator: This separates property and value and always presented by : (colon).
Value: This is the value to property. In above case left is the value of property text-align.

Using Method:

Based on using method, CSS is classified in two parts. One is Internal and other External.

1. Internal: In this method, we write all CSS markup inside the same file where it is applied. This is also done in two methods. 
• Inline CSS: In this method, CSS is written inside the HTML or XHTML statement using STYLE tag. 
• Block CSS: In this method, we write CSS code in HEAD section of HTML document between STYLE tag.
2. External: In this method, we write all CSS markup in another file and insert reference to the file in required HTML file using LINK tag.
   Example:

    <link href="path/to/file.css" rel="stylesheet">

Apart from this, we have another term in CSS which is called SELECTOR.
Selector are simply collection of CSS attributes and their value. Selectors are used in HTML using CLASS or ID or with HTML tag. So further CSS Selector are divided in 3 parts.
We will discuss about all kind of CSS Selector in another post. Before this let me show you an example of CSS used in all methods.

<html>
<head>
<title>Introduction to CSS</title>
<style type="text/css">
h1
{
    font-family: Calibri,Tahoma,Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
</style>

<link href="styles/main.css" rel="stylesheet" />

</head>
<body>
<h1>Introduction to CSS</h1>
<p style="text-align: justify;">This is random text in paragraph.Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.</p>
</body>
</html>

Keep reading for next part.
John Bhatt

Read More

Add SyntaxHighlighter to your blog

Hi,
This post is about all Blogger, who write code and want to share their code on their website of community. If the code is in HTML, JavaScript or other browser understandable language, browser renders and displays output instead of code. Visitor will see nothing instead of garbage while in case of other programming languages, formatting, wrapping, alignment and other styles are lost and user is confused about its actual structure.

To remove this we are going to implement SyntaxHighlighter functionality in our blog. Here we will work with Blogger blog, the method is same for html webpage. SyntaxHighlighter is a JavaScript library written by Alex Gorbatchev in year 2004. Because of its feature, it becomes more famous and still maintained at his website.

Procedure

Include the JavaScript files in head section of your website code using External Script linking method. For blogger, open your Template and search for closing of head tag.

</head>

Then paste these links for including files. You can also download latest version from http://alexgorbatchev.com/SyntaxHighlighter/ and use in your own web host also but blogger does not allow you to upload JavaScript files.

<link href='http://www.johnbhatt.com/SharedResources/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://www.johnbhatt.com/SharedResources/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shCore.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushSql.js' type='text/javascript'/>

You need to include file that you are going to use. Above links are of default CSS style sheets and CSS, JavaScript, XML, CSharp, Php, SQL languages. XML includes HTML, XHTML and XML. Next step is to write a simple JavaScript function and tell browser to run the code.

<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

Now you are all set to write code in your post. Open editor in HTML mode and write code inside HTML pre (Pre formatted) tag with a class attribute (stylesheet identifier) defining its programming language. Lets see below example to get clear view. 

<pre class="brush:html"> // Replace your brush with your own.
<html>
<head>
<title>Adding SyntaxHighlighter to Blogger Blog by John Bhatt</title>
</head>
<body>
Body can contain codes also, that too highlighted and formatted, well aligned. Congrats.
</body>
</html>

</pre>

Important: You may have to change html tags < and > to html ISO codes. Simply open any code editor Notepad will also rock. Open Replace box using Ctrl+H shortcut or from Edit menu and search for < (Less than) and replace with <. Once again search for > (Greater than) and replace with > using Replace all method. This will not produce any error in case of HTML and other html tags.

Output is in your page. We have done this using this plugin. You have many themes (styles) to make it look better. You can include CSS as per your requirement. 

Do not forget to share and post suggestions.
+John Bhatt 

Read More

GridView with Fixed Header & Scroll Bar

Hi,

In previous posts, I have completed two important topics of GridView.

1. Paging in GridView
2. Scroll Bars in GridView

Today, Lets learn another new and important trick with GridView, i.e. Fixed Headers. When we have to scroll through GridView, then there is must have feature that is Fixed Header. On recent post I have written about Fixed Headers in Excel, did you get chance to read them. We are doing exactly same task here. But here we do not have "Fix Pane" as in Excel anywhere. Lets do this with simple CSS and some enhance with code-behind.

Also, Today I am using Manual method of GridView creation, in previous demos and posts, I have used Drag & Dropped GridView control. Today here is manually coded GridView. 

Lets see code for ASPX page.

            <h2 align="center">GridView with Fixed Header</h2>
            <div style="height: 400px; overflow: auto" align="center">
                <asp:GridView ID="gvDistricts" runat="server" HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen" 
                    AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" OnRowDataBound="gvDistricts_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="District ID" HeaderStyle-Width="80px" ItemStyle-Width="80px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistID" runat="server" Text='<%#Eval("DistID")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="District Name" HeaderStyle-Width="120px" ItemStyle-Width="120px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistName" runat="server" Text='<%#Eval("DistName")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="Description" HeaderStyle-Width="200px" ItemStyle-Width="200px">
                            <ItemTemplate>
                                <asp:Label ID="lblDistDesc" runat="server" Text='<%#Eval("DistDesc")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>

In above design, Notable code is style for DIV which will make this GridView scrollable if its height exceeds than 400px. Another notable code is HeaderStyle-CssClass="FixedHeader". This line of code will apply a custom CSS Class named FixedHeader which we will create in while to do the task required. Before doing this lets bind this GridView with Data. Lets move to Back-end.
I am using data from a SQL table, which simply contains, DistrictID, DistName, DistDesc as its field and approx 25 records filled.

We have nothing to do more here. So simply write the databind code inside Page_Load Event.

protected void Page_Load(object sender, EventArgs e)
    {
        string ConStr = "Data Source=.\\sqldb;Initial Catalog=ShikshaNet;Integrated Security=True";
        if (!IsPostBack)
        {
            string Query = "SELECT * FROM Districts";
            SqlConnection con = new SqlConnection(ConStr);
            SqlDataAdapter adp = new SqlDataAdapter(Query, con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            gvDistricts.DataSource = dt.DefaultView;
            gvDistricts.DataBind();
        }
    }

Now lets loot at browser to know how it looked.

 Perfect as designed. Lets scroll it and look for headers.

Oh! no, Headers are not visible. Lets start what we left at beginning. Add some style to GridView. Just navigate inside Head section of HTML and then add below code. This is stylesheet, you can customize as your requirement, but remember to change your Class name in GridView also if you are changing class name here.

<style type="text/css">
        .FixedHeader {
            position: absolute;
            font-weight: bold;
        }      
    </style>

OK, Lets refresh browser to see the changes.

 On scrolling,

Perfect, Headers are on top. But there is some problem. If you noticed, First record of GridView is not visible. It has dis-appeared. To make that record visible. Lets use a trick. Write some code in RowDataBound Event of GridView.

   protected void gvDistricts_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.RowIndex == 0)
                e.Row.Style.Add("height", "50px");
        }
    }

We just told Server to add some space if the RowIndex is 0 means first row of GridView should have atleast double space so that the value can be visible.
Lets see the output.

Bingo! You have created a perfect and complete GridView with Fixed Headers. You can use this code and it works fine even used with Paging across multiple browsers.

Thanks to +Amit Jain for the Top row fix which he has posted in his blog at Scrollable GridView With Fixed Headers Asp.Net.
If you found this post useful or helpful, or you have some suggestions to make, please post as comment or send me message on Google+ also.
+John Bhatt 

Tags: Gridview, ASP.NET, Tutorials by John Bhatt, P.Yar.B Complex, Fixed, Freeze, Headers, CSS, C-Sharp, Scrollbar, Tricks

Read More

Custom WordPress Admin Style

Hello,

If you are a blogger, you must be using WordPress. WordPress is a blogging platform which is widely used a CMS and most used CMS by worlds developers which is downloaded by uncountable times. Latest version of WordPress is 3.7 which is release on Oct 24 2013. As on 28 Oct 11.50 PM IST, it has been downloaded 1.6 Million times.

Definitely, I am not here to define or describe WordPress. We all have used WordPress and its Admin Interface also. Which allows us to change Themes for WordPress created website and many such functionality. But we are going to change Administration Theme without any Theme. We will use a simple Plugin created by the creator of WordPress Matt Mullenberg.

By default It has Admin Theme like below snapshot.

Now search for a plugin in WordPress plugin directory named MP6. For your convenience link for MP6 plugin is http://wordpress.org/plugins/mp6/.
Download and Install MP6 in your wordpress installation. How above page looked after installing MP6 is below.

 Admin Dashboard

Add  New Post 

I just found it very nice and wanted to share with you. I am not affiliated with WordPress in anyway commercially. However I use it and love its feature as Blog engine.

You can add me on +John Bhatt and follow our page at P.Yar.B Complex at Google+

Tags: WordPress, personalize, admin, configuration, plugin, admin-theme 

Read More

GridView with Scrollbars

Hi,

Today I am here to share something to you. This is simpler as never but I bet, you are searching for this since long.

If you have developed any web application using ASP.NET, you must have used GridView, if you are beginner and learning ASP.NET, this will tell you how to make GridView scrollable. As we know, we can Paginate data in GridView, but putting a Scrollbar is really confusing as it is not in default properties of GridView control.

Lets design a web form and insert a GridView. I am using no designs and just a form and dragged and auto formatted GridView control in this tutorial.

Lets see the code for this web form.

 <div align="center">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="DistID" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Height="240px" Width="667px">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <Columns>
                <asp:BoundField DataField="DistID" HeaderText="DistID" InsertVisible="False" ReadOnly="True" SortExpression="DistID" />
                <asp:BoundField DataField="StateID" HeaderText="StateID" SortExpression="StateID" />
                <asp:BoundField DataField="DistName" HeaderText="DistName" SortExpression="DistName" />
                <asp:BoundField DataField="DistDesc" HeaderText="DistDesc" SortExpression="DistDesc" />
            </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>" SelectCommand="SELECT * FROM [Districts]"></asp:SqlDataSource>
    </div>

I have bind data from one of my projects, this is schema of Address and table is District List. Lets run the Web form, our output is:

This is how it will list record and entire page will have GridView data. To fix this, I have added just a style tag to Div and some code inside that tag. Below is code.

..style="height:400px; overflow:auto"..
//You can change overflow:auto to overflow:scroll but that will show both Scrollbar and always. Above will show Vertical Scrollbar only when the Height of GridView exceeds than assigned height.

After adding above code, I refreshed the browser, Now this is the new and required layout of GridView.

You can download the source code from JohnBhatt.com for free.
Enjoy. Till then subscribe our feeds and get updated. You can also drop a comment below to suggest us improving. 

Read More

Accordion Panel with CSS

Greetings from John!,
Hope you all are enjoying.
Friends I am back with a new thing for you. Today I am going to show you, how to make a Good Accordion Panel.

Do you know, what is Accordion Panel? You must have seen some tables or Div's in website, that are collapsing and expanding on just Click. You can also call them Collapsible Div or Table.

ASP.NET Ajax Tools make it so Simpler for ASP.NET. You just need to link AjaxControlToolkit.dll to your bin folder and use it in the Page.
Let's add a new Web Form in Solution, this is the Page, where you want to add your collapsible div or table what may contain anything.

Source Code for Design above is here.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordian with CSS >> P.Yar.B Complex</title>
    <%--<link href="Accordian.css" rel="stylesheet" />--%>
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table width="100%" border="0">
            <tr>
                <td colspan="2" align="center">
                    <h1>Accordian with CSS</h1>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" Width="490px">
                        <Panes>
                            <asp:AccordionPane ID="pane1" runat="server">
                                <Header>Hardwares</Header>
                                <Content>
                                    Mouse<br />
                                    KeyBoard<br />
                                    Monitor
                                    <br />
                                    Printer<br />
                                    CPU<br />
                                    Speakers<br />
                                    Camera
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane2" runat="server">
                                <Header>Operating System</Header>
                                <Content>
                                    MS Windows<br />
                                    Linux<br />
                                    Android<br />
                                    Mac<br />
                                    Unix
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane3" runat="server">
                                <Header>.NET IDE</Header>
                                <Content>
                                    Visual Studio<br />
                                    Visual Web Developer<br />
                                    SharpDevelop<br />
                                    MonoDevelop
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane4" runat="server">
                                <Header>John Bhatt</Header>
                                <Content>
                                    <a href="http://www.johnbhatt.com" target="_blank">Portal Home</a><br />
                                    <a href="http://blog.johnbhatt.com" target="_blank">Blog of P.Yar.B</a><br />
                                    <a href="http://media.johnbhatt.com" target="_blank">Download Center</a><br />
                                </Content>
                            </asp:AccordionPane>
                        </Panes>
                    </asp:Accordion>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now Let's See the CSS, what is on CSS.

.accordionHeader {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeader a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionHeaderSelected {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeaderSelected a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionContent {
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

Now Run the Page again. Lets See, how it looked. Check this at your machine. Best of Luck!

Read More