Basic CSS , Introduction to properties

CSS is a stylesheet language which runs in users browser to give a rich and decorative user-experience.Currently the latest version available of CSS is 3 and CSS4 is going to arrive with many new features.

CSS3 brought many new features like Animations , transforms etc.
Today here we are gonna cover all the basic properties used in CSS , which you are gonna use most of the time.

The colors supported in CSS can be written in the form of hsba() or hsb() or rgb() or rgba() or hexadecimal or in color names.

• Color
• Opacity
• Background
• Border
• Box-shadow
• Height and Width
• Position
• Margins and paddings
• Display
• Text-Align
• Font

---

Properties :

---

Color

The color property sets color of the text inside the selector.

CSS

p {
 color:red;
}
//produces

Hello world!

CSS

p {
 color:rgb(38,98,67);
}
//produces

Hello world!

---

Opacity

The color property sets opacity of any selected element. It varies from 0 (invisbile) to 1(fully visbile)

CSS

p {
 color: red;
 opacity:0.5;
}
//produces

Hello world!

CSS

p {
 color:rgb(38,98,67);
 opacity:0.2;
}
//produces

Hello world!

---

Background

A shorthand property for setting all the background properties in one declaration

CSS

p {
 background: yellow;
}
//produces

Hello world!

CSS

p {
 background: url(assets/img/css.jpg) no-repeat;
}

//produces

hello world
hello world
hello world
hello world
hello world
hello world
hello world
hello world
hello world
hello world

As told above it is an shorthand property for all backgrounds , so the syntax looks like

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

---

Height and width

Sets height and width of an selected element.

CSS

p {
 height:90px;
 width:200px;
 background:blue;
 color:#fff;
}

//produces

Hello world

Min-width , min-height and max-widtg and max-height
As directed by the name they provide minimum and maximum values of width and height for an element.

---

Border

A shorthand property for border.

CSS

p {
 border:2px solid steelblue;
}

//produces

Hello world!

The syntax contains

border: border-width border-style border-color|initial|inherit;

There are many properties related to border , by reading the name you will understand them

• border-style
• border-left
• border-right
• border-bottom
• border-top
• border-radius
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-bottom-right-radius
• border-width
• bordet-color

and many more...

Always use shorthand properties , such that your code consumes less data , and easier for you to type ;)

border-style: solid | dotted | dashed | double | groove | ridge | inset | outset;

Border-radius

A shorthand property for border radius is

border-radius:top-left top-right bottom-left bottom-right | all;

CSS

p {
border:2px solid red;
border-radius : 8px 30px 20px 2px;
}

//produces

hello world

---

Box-shadow

This property adds shadow to an element.

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

CSS

p {
 box-shadow:2px 5px 8px 4px #aaa;
}

//produces

Hello world

CSS

p {
 box-shadow:3px 3px 5px red;
}

//produces

Hello world again

Inset example

CSS

p {
 box-shadow:inset 3px 3px 5px blue;
}

//produces

Hello world again and again

---

Position

The position of an element is set by position property.

position: absolute | fixed | static | relative ;

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
An element with position: relative; is positioned relative to its normal position.

CSS

p {
 position: relative;
 left: 20px;
 border: 2px solid green;
}

I contain relative position ;)

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
The example is the header of my blog , even if you scroll down its position is fixed.

CSS

p {
 position: fixed;
 left:0;
 bottom:0;
 border:2px solid blue;
}

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

CSS

div.relative {
 position: relative;
 width:400px;
 height:400px;
 background:green;
}
div.absolute {
 position:absolute;
 width:200px;
 height:200px;
 left:90px;
 top:50px;
 background:red;
 color:#fff;
}

I am relative.

Hey i am absolute

Z-INDEX is used to create stack of elements. This property's value can be neagative or positive to make stacks.

CSS

p{
 background:blue;
 position:absolute;
 z-index:5;
}

---

Margins and paddings

With the help of this image you can understand the mechanism of paddings and margins.

margin: top right bottom left | top-bottom right-left | all ;

padding: top right bottom left | top-bottom right-left | all ;

---

Display

The inline value is default value for display property.
The block value displays an element like a block element like (div).

display : inline | inline-block | block | none | inherit | flext ;

CSS

span {
 display:block;
}

---

Text-align

This property aligns the text in a container.

text-align:center | right | left ;

CSS

p {
 text-align:right;
 border:2px solid blue;
}

//produces

Hello world

---

Font

These properties defines the style of fonts.
font-family:
This property tells yhe name of font to be used.

CSS

body {
  font-family:sans-serif;
 }

font-style:
This property specifies style of font.

CSS

body {
 font-style: italic;
}

It can also contain values like normal and oblique.
font-size:
This property specifies the size of font

CSS

div {
 font-size: 40px;
}

font-weight:
It contains values like bold , bolder , normal , lighter and numeric values.

CSS

p {
 font-weight:500;
}
div {
 font-weight:bolder;
}

//produces

Hello world

Hello world