Term and Definitions of CSS That Every Developer Should Know

CSS or the Cascading Style Sheet is one of the most used tools by web developers. A developer needs to be well acquainted with the different terms and terminology relating to CSS. While most of the developers are aware of the common terms and definitions used in CSS they are often at loss with some of the rarely used concepts and definitions in CSS. Here in this article we shall take a look at some of the terms and definitions in CSS that every developer needs to know.

Modern Web Design Trends to Follow

30+ Free HTML Editors for Web Designers

32+ Inspirations for Large-Background Website Design

css terms and definitions

Specificity

This is one of the concepts in CSS that many people have a vague idea about. What specificity does is it determines, which CSS rule is applied by browsers. It is basically a set of rules that impact how your cascading style sheet (CSS) rules are displayed. All the rules here have a specific ratings and hierarchy according to which they are displayed on the web browser. In the below example the text in the box of p elements would appear blue because that rule came last.

Best 5 Blogs for Aspiring Web Designers

5 Web Design Blogs You Must Check Out

33+ Inspirations for Single-Page Web Design

p { color: red }
p { color: blue }

In specificity all the elements are generally assigned a value to determine their hierarchy when it comes to display. Most developers make use of easy to remember value starting with 0.  You can add 1000 for style attribute, 100 for each ID, add 10 for attribute, class or pseudo-class and 1 for each element name or pseudo-element. Such convention makes it easy to identify the specificity of each element in the stylesheet.

Comment

This feature will have no effect on how your page is displayed. It is meant for the developers and allows them to read and understand the code in a better way. This helps different developers work on the same project. They can include CSS elements that you don’t want in the document but want to keep them for reference. Comments are universal cutting across the different programming languages. For instance if we want to specify the width of a page in IE8 we can create a comment “/* this is for IE6 */

80+ Firefox Tools for Web Designers

40+ Examples of Using Typography in Web Design

/* this is for IE6 */

* html #box {
width: 200px;
}

Selector

As the name suggest selector is a part of the CSS code that specifies the element where you want to apply the CSS rules. In short they are patterns used to select the element(s) you want to style. In the below example we are assigning a value to the “#container #box”

How to Improve the Quality of Your Web Design

4 Web Design Trends for Logo Designers

#container #box {
width: 200px;
} 

Rule Set

A rule set which can also be termed as rules comprise a selector and is followed by a declaration block. The rule set applies the declarations listed in the declaration block to all elements matched by the selector. It is a single section of CSS including the selector. In our example below the code comprises of a single rule.

12+ WordPress Plugins for Web Designers

Top 10 Easy to Use Tools for Web Designing

body {
font-family: Arial, sans-serif;
color: #444;
font-size: 16px;
}

Declaration Block

We have discussed about the declaration block in the above example. In simple terms it is a section of CSS where you can see the property/value pairs. In our example you can clearly understand what a declaration block is

15+ Latest Web Design Trends

Beginner’s Guide for Responsive Web Design

body {
font-family: Arial, sans-serif;
color: #444;
font-size: 14px;
line-height: 20px;
}

Declaration

Since we have already seen what a declaration block is, we need to understand what a declaration is. It is a single line of CSS that specifies the properties of an element. If an element has multiple properties you can make use of multiple declarations. In the example below we will take a look at both single and multiple declarations.

30+ Inspirations for Minimalist Web Design

20 Inspirations for Successful Responsive Web Designs

body {
font-family: Arial, sans-serif; (this is a single line declaration)
}

body {
font-family: Arial, sans-serif;
color: #555;   (this is a double line declaration)
}

Property

As the name suggest property defines the property of an element in a stylesheet. It is used in all stylesheet. In our example below we shall specify the height of the element using the property feature in CSS. We have set the height of the element to 300 pixels and height is the property.

20+ Inspirations for Flat Web Design

25 Best Collaboration Tools for Web Designers

box {
height: 300px;

Value

If we are talking about property we cannot ignore on Value. It defines the value of the element in a stylesheet. We shall stick to the same example that we had used to define Property and here the height of the element is specified as 300 pixels and that is the value.

box {
height: 300px; 

Here in this short write-up we have seen some of the basic definitions and elements that are used while coding in CSS. The concept of CSS is large and highly extensible and you can work wonders on your website with the help of this development tool.

Mark Wilston is a Content Writer and marketing professional working with PixelCrayons, a reputed Custom web design & development company India offering offshore cms, ecommerce and mobile apps development services. For more information about PixelCrayons, visit at http://www.pixelcrayons.com/