Sunday, September 7, 2014

DEVELOPING CSS


A style sheet contains a set of statements that specify the presentation of a document.These statements are called css rule sets.The syntax to write a statement /css rule is [selector{declaration;declaration;-------}]
The css rule set also called rule consists of a selector followed by declaration block.a declaration block starts with left curly brace and ends with matching right curly brace in between there must be a list of 0 or more semi colon seperated declarations.a declaration is either empty or consist of a property name, followed by a colon , followed by a value i.e,selector{font-size:20px;color:green;}.

Different types of selectors:
The element selector
The element selector selects elements based on the element name.
You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)
eg:-<html>
<head>
<style>
p {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

The id selector
The id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":

eg:- <html>
<head>
<style>
#para1 {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>

</html>
The class selector
The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed by the name of the class:
eg:-
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

In the example below, all HTML elements with class="center" will be center-aligned:
These are basic selectors and there are lot more are present. In the next posts you will get more details about css.

No comments:

Post a Comment