css syntax or Rules and Inheritance

CSS syntax or Rules

CSS syntax has been formed some of the rules. The two main parts of a Rule, one of the selectors and the other declaration. Normally selector is an HTML element by which can be styled. Each declaration consists of a property and a value. Properties are the type of the element in which we can change. Every property has a value. Minimum a rule may have in a style sheet, but generally there is more than one rule. When someone will visit your web site to any specific element of your HTML document, how will be displayed to him is defined by each CSS rule. (As have been described below.)

css syntax

A rule can be divided many parts; and in every part of this kind are used for a specific purpose.

1. First, we need to define a selector. Which element of the html document we want to style that is informed by these selectors to the browser.

css rules
2. Property name, is to write separately by a colon (;).

syntax of css

3. Values of properties are written separately by a semi-colon (;).

css declaration

CSS Declaration Block :

The declaration is consist of these two pairs of properties and values. More than one declaration may have in a single rule.

For example:

declaration of css

ā€œ Pā€ element has two properties which are described

In fact, after the last declaration of block the semicolon is not required. But I advise you to give a semicolon at the end of each declaration. It is always will develop a habit of giving a semicolon at the end of your declaration that can give several advantages later.

If you do not give semicolon of the declaration and the next declaration will be canceled.
A second {} brackets and its inside declarations are called declaration block.

declaration block

As CSS does not consider the free space and the number of lines. So I have written each declaration of a block on a separate line that properties are easy to understand separately.

Example :

p{font-size: small; font-family: sans-serif;}

Notice that nothing has been changed a set of second brackets, the semicolon has been given after each declaration everything is all right. The only difference is more than about one line in the Declaration is written and some of the spaces have been given to facilitate the alignment. A CSS declaration will always end with a semicolon and declaration groups will be bound by The second bracket.

For example: p{color: red; text-align: center;}
CSS to make more understandable, per line can be written in one or more of the declaration.

Inheritance

What is the color of your eyes, like your parents? Did you get their hair color? In fact, such as the characteristics of the parent flow into her child, similarly some style properties of the (X) HTML elements are expanding them to the element that is captured.

Document Structure:

There is an implicit structure or hierarchy of the (X) HTML document. For example: The document that we are working with has a root element and the document has a head and body and body to contain inline elements such as – image (img) and emphasized text (em). You can compare that structure to an inverted tree whose roots have come out branches. It is shown in the figure below.

css inheritance

Style Inheritance:

CSS properties being linked to a style via a tag are called Style Inheritance. These properties are also applied to nested tags within this tag. Inheritance is not only used in direct descendants of any tag, but also that tag is implemented in all generations. However, not all CSS properties-in-Inheritable.

There are many CSS properties like – color property, which are not only selected elements with the selectors, but also affect the inherited elements by their descendant. Some properties (such as border, margin, padding, width and height) are not inherited. In this case, the inheritance can be made possible using the special property value inherit.

Example:

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
<style>
body{font-family:verdana; font-size: 1em;}
p{border: 4px solid green;}
.inherit-border{border: inherit}
</style>
</head>
<body>
<p> The <em> border</em> property is not inherited.</p>
<p> The<em class="inherit-border">border</em> property is inherit.</p>
</body>
</html>

Display in Browser:

inheritanceInheritance visible:

The above html is used as a template we can see the effect of inheritance.

Example:

HTML Code:

<!DOCTYPE html > 
<head>
<title>CSS Style Inheritance</title>
<style type="text/css">
body {font: 1.2em "Comic Sans", Georgia, "Times New Roman", Times, serif; background-color: orange; border: 2px solid black;
  padding: 8px;  margin: 8px;}
#div1 {background-color: yellow;}
#img1 {border: 2px solid white;}
#div2 {background-color: olive;}
#div2 p {font: 1.2em Courier, sans-serif;}
</style>
</head>
<body>
<h2>CSS Example- Style Inheritance</h2>
<div>
<h3>A division using inheritance</h3>
<p>
<img id="img1" src="laptop.jpg" width="300" height="200" />
Some paragraph <em>text</em> here.</p>
</div>
<div id="div1">
<h2>A division using an id style</h2>
</div>
<div id="div2">
<h2>Another division using an id style</h2>
<p>Some filler text. Some filler <strong><em>text</em></strong>. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. Some filler text. </p>
</div></body></html>

Display in Browser:

visible inheritance

Leave a Reply

Your email address will not be published. Required fields are marked *