Wednesday, January 25, 2012

CSS Basics - Defining Style Rules


You might have read about my earlier post on CSS introduction. This article is a continuation to my earlier article. Without wasting much time, lets have a look at an example of a CSS code and then analyze it.

selector {
property1:value;
property2:value;
property3:value;
}

The relevant parts are as follows:

The Selector

The selector is a part of a CSS that identifies the HTML elements in which the rule will be applied to. Identification is done by the actual element name such as body, sidebar, footer, etc. More details will be discussed later on.

The Curly Braces “{“ “}”

These curly braces envelop the property/value pairs which are separated from one another by semi-colons (;) while the properties are separated from their respective values by colons (:).

The Properties

The properties define what you want to do with the element or elements you have selected and they come in wide varieties. These varieties can affect element color, position, background color, margins, font type, padding, etc.

The Values

The values as in context to CSS are the values that you want to change or assign to each property of the elements selected. Values are dependent on properties. As for instance, properties that affect color can use up hexadecimal colors like #4459ff, color names like red, green, blue, yellow, etc. or RGB values like rgb(132,55,44).

Properties that can change position, borders, height, width, etc. can be measured in pixels, percentages, ems, centimeters, inches, etc.

Here is one example to a CSS code:

p {
margin:4px;
font-family:verdana;
color:green;
}
The HTML element that this rule selected is p i.e. every p element in the HTML document or documents that uses this CSS. All p element in the HTML documents that uses this CSS will have the rule applied to it. If more specific rules are applied to them, the specific rule will overwrite the current rule. As per the rule above, the properties affected are the font inside the paragraphs, margins around the paragraphs and the color of the text. The margins here are set at 25 pixels, font is Verdana and the color of the text is green.

We will be coming back to all these in detail later. To know more about Cascading Style Sheet in detail, keep visiting back. Not only CSS, you can also read about Android application development, iPhone application development, etc. from my article section.

1 comments:

serviced apartments in koramangala said...

Princess Square in Koramangala - Serviced Apartments in Bangalore

With over 40 years of experience in the Service Industry all of us at princess square Service Apartments personally know caring for the guest and It is our goal to make sure you, your family and friends the guest enjoy a carefree vacation or Superior business class experience.

We have a small quality driven collection of hotels & hotel apartments within one of the world's most modern and fastest growing city of Bangalore.

Welcome to the Garden city - Welcome to Princess square Service Apartments Hospitality, where our promise of pure value, pure quality and pure service is delivered.

An essential attribute of all our properties are our convenience and central locations within the city of Bangalore.

At princess square Service Apartments we provide a wonderful choice. Whether you are a discerning budget traveler or just looking for that element of luxury of a 5 star business hotel, we have the accommodation solution to suite you.

Our deluxe hotel apartments offer a choice of both full hotel service operations as well as self catering facilities. We have an extensive choice of accommodations to choose from and our portfolio includes standard hotel rooms, deluxe hotel suites, studios, One, Two & Three Bedroom suite apartments, Royal Suites, Executive & Privilege Floors.

We are ideal for leisure, corporate travelers, stopovers & long stays.

All our hospitality establishments provide only the highest levels of comfortable quality accommodations and we are the perfect choice for your next city break, business meeting or special family occasion.

Post a Comment

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons