Everyday we view many websites and pages.
Have you ever thought how come they look so good and attractive or how the images are appeared, text are colored and styled???
I will show a short description about them!!!


Css stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on page on other media. It can control the layout of multiple web pages all at once.
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Syntax

A css rule set consists of a selector and declaration block:

Three Ways To Insert Css

There are three ways to insert a style sheet:
a. Inline Css
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Css Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers. A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Css Color

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Example: Tomato, Orange, Violet, etc.
Css color values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
Same as color name “Tomato”:

Css Background

The CSS background properties are used to define the background effects for elements.
Here, are some CSS background properties:
a. Css Background-color
The background-color property specifies the background color of an element.

Css Borders

The CSS border properties allow you to specify the style, width, and color of an element’s border.
Here, are some css border properties:

Css Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Css Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Css Height & Width

The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Css Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Css Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.

Css Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.
Here, are some css font properties:
a. Font Family: The font family of a text is set with the font-family property.
b. Font Style: The font-style property is mostly used to specify italic text.
c. Font Size: The font-size property sets the size of the text.
Being able to manage the text size is important in web design.
Always use the proper HTML tags, like <h1> — <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size.
d. Font Shorthand Property: To shorten the code, it is also possible to specify all the individual font properties in one property.

Css Links

With CSS, links can be styled in different ways.

Css Lists

a. Set different list item markers for ordered lists.
b. Set different list item markers for unordered lists.
c. Set an image as the list item marker.
d. Add background colors to lists and list items.

Css Tables

The look of an HTML table can be greatly improved with CSS .
We can do it by using the following css properties:

Css Units

CSS has several different units for expressing a length.
Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.

Css Max-width

Using max-width will improve the browser’s handling of small windows. This is important when making a site usable on small devices.

Css Position property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

Css Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
We can use different owrflow properties like- visible, hidden, scroll, auto.

Css Float

The CSS float property specifies how an element should float.

Css Selectors

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
a. Descendant selector (space)- The descendant selector matches all elements that are descendants of a specified element.
b. Child selector (>)-The child selector selects all elements that are the children of a specified element.
c. Adjacent sibling selector (+)-The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.
d. General sibling selector (~)-The general sibling selector selects all elements that are siblings of a specified element.

Css Pseudo classes

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
a. Style an element when a user mouse over it.
b. Style visited and unvisited links differently.
c. Style an element when it gets focus.

Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
a. Style the first letter, or line, of an element.
b. Insert content before, or after, the content of an element.
selector::pseudo-element {
property: value;


The opacity property specifies the opacity/transparency of an element.
The opacity property can take a value from 0.0–1.0. The lower value, the more transparent:

Css Image Gallery

CSS can be used to create an image gallery.

Css Forms

The look of an html form can be greatly improved by using css.

Website Collage

Here, are few examples of how websites actually looks:

Team of young and enthusiastic individuals who are focused on solving business problems through niche technologies in innovative manner