The Bits and Bytes That Make Up a Style Sheet

The Bits and Bytes That Make Up a Style Sheet

A Cascading Style Sheet is greatly used in web design as it lets the developer compartmentalize website content and its appearance into two different sections. Firstly, the HTML/XHTML takes care of populating the website with information, while everything else related to the presentation of the site is handled by CSS.

Further, a number of other components are responsible for the smooth functioning of CSS.

Components that work together to give that perfect look to a website

There are many elements such as the CSS rule, selector, declaration, property, and value that form part of a usual Cascading Style Sheet. A CSS rule is the combination of a selector and a declaration.

For instance- H1 {color: red;}

Selector {declaration;}

As seen in the above example, that part of the rule which lies within the curly braces is known as the ‘declaration’. It defines a specific style effect needed, such as “color: red”. The selector determines the elements that effect due to its declaration. Moreover, there are various kinds of selectors, one of them being the ‘type selector’ that can refer to an HTML element in CSS.

A declaration commonly has 2 components- property and value separated by a colon:

Selector {property: value}

A web designer can insert as many declarations as he requires inside the curly braces. He should take care to put a semi-colon between two declarations, except the last one.

Selector {property: value; property: value}

Another interesting part is that more than one selector can be grouped together by simply separating them with a comma. When you do this, one rule will apply to various selectors.

For instance- H1, H2, H3 {}

In the above example, we have used the font-family property. A property in CSS is a characteristic element that can be managed through CSS, such as WIDTH or Font. The above declaration implies that the first font will be used in case it is installed on the site visitor’s computer and if not, Helvetica will be displayed. In an event that neither of them is available, the default font (sans-serif) will display. Arial/ Helvetica/sans-serif are known as the values for the font-family property above.

So now we know about the tiny bits that make the CSS-based web design work. It should be noted, however, that though CSS takes care of the appearance of a website, it needs a strong support of HTML code to make it rich in content. Time is greatly saved when CSS is used and it can be out to good use for enriching the content and implementing all the fantastic features that CSS has to offer.

Source by Rashmi R Yadav

Leave a Reply

Your email address will not be published.