|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Home | Computers & Technology | Web When ever we start designing a web page, CSS gives us his hand to make the design in a structured manner. So, what is CSS? CSS known as Cascade Style Sheets, which acts a major role in web page designing, it gives new feature to HTML, which helps the web developers and users more control over how pages are displayed. CSS designing provides style sheets, which defines how the objects or elements appear on the page. You can define the list of styles for elements in the HEAD part of a HTML page or you can use the style sheets(having file extension “.css”). 1 – When you define your list in the head part, you need to put inside the style tag as follows: -------------------------------------------------------------------------------- <style type="text/css"> </ style > --------------------------------------------------------------------------------- 2 – When you want to put your list of styles in a style sheet then you need to give a link to the css fyle in the head part as follows: ------------------------------------------------------------------------------- <link rel="stylesheet" href="style.css"> ------------------------------------------------------------------------------ There are three ways to define the style of a HTML element. You can define the using either by selector or by Class or by Id. *************** By Selectors *************** When you use the selectors, means the element name, then you need to define as follows: --------------------------------------------------------------------------------- TD {background-color: #666600 ; Font: Arial, Helvetica, sans-serif } -------------------------------------------------------------------------------- Above, TD is the selector, background-color is the property name and the value of the property is assigned by a “:” separator. You can assign values to any number of properties by the semicolon (“;”) separator. ********** By Class ********** Sometimes we need different styles for more than one element of same class. At that time the class definition in CSS will help us. We have to create a class with some properties which should be relevant to certain HTML element, then using the class name with the elements, we can display the effects. Ex – Define a class for a TD element. --------------------------------------------------------------------------------- .ClassTr {background-color: #666600; Font: Arial, Helvetica, sans-serif} --------------------------------------------------------------------------------- To define a class, it should start with a “.”, followed with the class name. Then the property values can be placed with in the bracket as we have done with the selector. After defining the class, you can assign the class name to the element in HTML as follows : <TD class=”ClassTr” > Mindfire Solutions </TD> ********* BY ID ********* Sometimes, even if there are more than one objects present of same type of element; we require different style of display for each objects. At that time, we can create our list of style using the id of the element. Let’s there is a textbox present as follows: -------------------------------------------------------------------------------- <input type=”text” id=”FirstName” value=”Mindfire”> -------------------------------------------------------------------------------- Here the object has the id,”name”. So using this id, we can create a unique class for the above element. -------------------------------------------------------------------------------- # FirstName {background-color: #666600; Font: Arial, Helvetica, sans-serif} --------------------------------------------------------------------------------- While defining this type of classes, we start with the “#” symbol, following the class name. ****************************************** Convert a textarea element to textbox element ****************************************** So this is just a stat for CSS. Now I am going to discuss about one CSS problem that I had, in one of my project. I was forced to use a “textarea” object, but the look and feel; I had to give of a textbox. Because one javascript method ”moveToElementText()” which is applicable to textarea is not applicable for a textbox.This method is generally used to Moves a text range to encompass the contents. So, to convert a textarea to textbox, I had created a class having name Showtextbox . The class has been defined below. -------------------------------------------------------------------------------- .Showtextbox { border-left: 1px inset #000000; border-right: 1px inset #666666; border-top: 1px inset #000000; border-bottom: 1px inset #666666; scrollbar-highlight-color: white; scrollbar-face-color: white; scrollbar-base-color: white; scrollbar-shadow-color: white; scrollbar-darkshadow-color: white; overflow: hidden ; font-family: Arial; color: #000000 } ---------------------------------------------------------------------------------- With the above class, you need to fix the columns of textarea for giving a fix width to the textarea and row to one. So the element now has a definition as follows: ----------------------------------------------------------------------------------- <textarea class=”Showtextbox” wrap=”off” rows=”1” cols=”20”>Mindfire</textarea> ----------------------------------------------------------------------------------- When you try with the above syntax, you can see, the text area will look similar with the textbox. Now put some text, if your length of text is exceeding the width of textarea then it will break to the second line. So to avoid this, you have to add wrap=”off” with the definition of textarea. So your final syntax will be as follows: ------------------------------------------------------------------------------------ <textarea class=”Showtextbox” wrap=”off” rows=”1” cols=”20”>Mindfire</textarea> ------------------------------------------------------------------------------------- The above one is just an example, I have given to feel you the sense of CSS in web designing. It is always important to maintain CSS in your web pages, which is so handy for giving a rakish look to your application, because the visual impact of any substance gives a sense of its quality and behavior to their spectators. Chandrasekhar Nayak www.mindfiresolutions.com Article Source: http://www.articlewheel.com
|
 RSS Feeds by Category |
|||||||||||||||||||||||||||||||||||||||||||||||||||||
