What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS - Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

• Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
  

CSS - Inclusion

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax −

CSS - Measurement Units

Before we start actual exercise, we would like to give a brief idea about the CSS Measurement Units.
CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g border = "1px solid red".

CSS - Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

CSS - Background

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element −

• The background-color property is used to set the background color of an element.
• The background-image property is used to set the background image of an element.
  

CSS - Fonts

This chapter teaches you how to set fonts of a content, available in an HTML element. You can set following font properties of an element −

• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
  

CSS - Text

This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −

• The color property is used to set the color of a text.
• The direction property is used to set the text direction.
• The letter-spacing property is used to add or subtract space between the letters that make up a word.
  

CSS - Using Images

Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.
CSS plays a good role to control image display. You can set the following image properties using CSS.

CSS - Links

This chapter teaches you how to set different properties of a hyper link using CSS. You can set following properties of a hyper link −
We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

CSS - Tables

This tutorial will teach you how to set different properties of an HTML table using CSS. You can set following properties of a table −

• The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
  

CSS - Borders

The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border you can change:

• The border-color specifies the color of a border.
• The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
• The border-width specifies the width of a border.
  

CSS - Margins

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

CSS - Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:

CSS - Paddings

The padding property allows you to specify how much space should appear between the content of an element and its border −
The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element.

CSS - Cursors

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand.

CSS - Outlines

Outlines are very similar to borders, but there are few major differences as well −

• An outline does not take up space.
• Outlines do not have to be rectangular.
• Outline is always the same on all sides; you cannot specify different values for different sides of an element.
  

CSS - Dimension

You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this tutorial we will how we can change the dimensions of boxes.
We have the following properties that allow you to control the dimensions of a box.

CSS - Scrollbars

There may be a case when an element's content might be larger than the amount of space allocated to it. For example, given width and height properties do not allow enough room to accommodate the content of the element.

CSS - Visibility

A property called visibility allows you to hide an element from view. You can use this property along with JavaScript to create very complex menu and very complex webpage layouts.
You may choose to use the visibility property to hide error messages that are only displayed if the user needs to see them, or to hide answers to a quiz until the user selects an option.