CSS RULES:-
Once CSS styles are sent from server to the client, the browser is responsible for parsing the styles and applying them to the appropriate HTML elements in the Web page. If a styles is stored either in external and internal style sheet, the styles will be defined as a CSS rule.
In shorts word CSS Rules means that what the browser uses to determine what styling to apply, and to what HTML elements it should.
Inline styles do not need to be defined as a rule because the are automatically applied to the element they are included with. The browser does not need to select the elements to apply it to.
Below figure shows an example of CSS rule:-
In shorts word CSS Rules means that what the browser uses to determine what styling to apply, and to what HTML elements it should.
Inline styles do not need to be defined as a rule because the are automatically applied to the element they are included with. The browser does not need to select the elements to apply it to.
Below figure shows an example of CSS rule:-
Selectors :-
The Selectors is the portion of the rule that decides exactly how the Web browser should select the elements to apply the style to. CSS includes a variety of types of Selectors, each of which defines a different element selection technique.
Some of the techniques that are used as follows:-
Some of the techniques that are used as follows:-
Universal Selectors:
The Universal Selector indicates that the style should apply to any element in the Web Page. The sample that follows shows a Universal Selector, which would change the font of any element that supports the font-family to Arial.
*
{
font-family: Arial;
}
Type Selectors:
The Type Selector allows you to create a style that applies to a specific type of HTML element. The style will then be applied to all elements of that type in the Web page. The following sample shows a Type Selector configured for the HTML paragraph tag, which will change the font family of all <p> tags in the Web page to Arial.
p
{
font-family: Arial;
}
Class Selectors:
Class Selectors are a special type of CSS Selector that allow you to apply a style to any element with a specific Class name. The Class name is defined in HTML using the class attribute, which is present on almost every element. Class Selectors are distinguished from other Selector types by prefixing with a single period (.).
.tittle
{
font-size: larger;
font-weight: bold;
}
This CSS Rule would than be applied to any element whose class attribute value matched the rule name, an example of which is shown below:
<div class="tittle">How are you</div>
When creating Class Selectors, note that the class name may not begin with a numeric character.
.tittle
{
font-size: larger;
font-weight: bold;
}
This CSS Rule would than be applied to any element whose class attribute value matched the rule name, an example of which is shown below:
<div class="tittle">How are you</div>
When creating Class Selectors, note that the class name may not begin with a numeric character.
ID Selectors:
ID Selectors are another type of CSS Selector that allows you to create styles that target elements with specific ID values. ID Selectors are distinguished from other Selector types by prefixing them with a hash mark (#).
#tittle
{
font-size: larger;
font-weight: bold;
}
This CSS Rule would be applied to any element whose id attribute value matched the Rule name, an example of which is shown below:
<div id="tittle">How are you</div>
