Posts Tagged ‘css selector’

CSS ID Selector and Class Selector

Friday, September 25th, 2009

In addition to the standard way of writing CSS style or giving properties inherent in the HTML selector, we can also provide their own name on a particular element by making the ID selector and Class selector.

ID Selector is a selector that can be used only once in an element, while the Class Selector can be used several times on an element.
Writing ID Selector in CSS begins with the symbol # (octothorpe), while writing the CSS class selector begins with a dot (.)
Example:

<html>
<head>
<title>CSS ID Selector</title>
<style type=”text/css”>
#header_title {
font-size:24px; font-weight:bold; color:#CC0000;}
#header_desc {
font-size:18px; font-weight:bold; color:#000066;}
.main {
font-family:Arial, Helvetica, sans-serif; line-height: 9px; }
</style>
</head>
<body>
<div>
<p id=”header_title”>CSS Syntax<br/><span id=”header_desc”>About CSS Id Selector and Class </span></p>
</div>
<div>
<p>Fill Your Stuff here</p>
<p>Fill Your Stuff here 2</p>
</div>
</body>
</html>

When viewed in a browser will be like this:
css-id-selector-result

Tags: , , , ,
Posted in CSS Basic | 1 Comment »

CSS Syntax

Monday, September 14th, 2009

What is CSS Syntax ?

A CSS rule has two main parts: a selector, and one or more declarations…

The syntax for CSS is different than that of (X)HTML markup.
Though it is not too confusing, once you take a look at it.

There are 3 important part of syntax or in writing to the CSS are:

Selector {property1: value1; property2:value2;}

  • Selector,is an HTML tag like (div, p, div, table, td, th, and so on ..)
    This tags will be given effect by the property and its value so that any format that we want can be achieved with CSS.
    Try to note the example below:
<style type="text/css">
    p: {color:red;}
</style>

From the example above, the selector is the Tag P, Tag P are HTML tag that make up a paragraph on a Web browser, so when Tag P given a property (color) and  value (red), and then if we look on the browser, will display Text with Red color.

  • Property:Value, is the essence of style that determine the effects of the selector, if you want to have a selector that background color?, background image?, underlined?, or a striped top?.
    From the example above, which is color property, property should be placed amid signs that the {…} while value is red.
    Among properties with values separated by a colon (:) while to obtain the property in a style definition, we use a dot coma (;) as Value.
    Example:
p {color:#FFFFFF;
   padding-top:10px;
   font-size:12px;
   }

Tags: , , , , , , ,
Posted in CSS Basic | No Comments »