CSS Basic Property

0
Share

What is CSS ?

  • CSS stands for Cascading Style Sheets.
  • CSS basically used in designing the web tags & pages.
  • CSS is the most popular used language in world wide.
  • HTML, CSS and JavaScript are used for web designing. It helps the web designers to add different style on HTML tags.

What are the CSS Basic Property that a developer must be known ?

Universal Property

 *{
     margin: 0;
     padding: 0;
  }

Background Property

background-color :-It is basically used to add the background colour on the web page.
Example - body {background-color: aqua;}

background-image :- It is used to add an image on the web page , it may be local stroge image or online .
Example - body {
 background-image: url("logo.png");
 background-color: #cccccc;
}

background-position :- It can used to set the starting position of a image on the web page.
Example - body {
  background-image: url('logo.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

background-size :- It can specify the size of the image on the web page.
Example - image{
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

background-repeat :- The background-repeat property sets that a background image will be repeated.By default, a background-image is repeated both vertically and horizontally.

Note :The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element's top left corner.
Example -body {
  background-image: url("paper.gif");
  background-repeat: repeat-x;
}

background-attachment :- The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Example - body {
  background-image: url("logo.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

background-size :- It can specifies the background size of the image .

Example - p{
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

Font Property

font-family :- It specify the style of the font.
Example - p.a {
  font-family: "Times New Roman", Times, serif;
}

font-style :- It define/specify the font style of a text.
Example - div {
  font-style: normal;
}

font-variant :- It defined the type of the font , it may be uppercase, lowercase or small-cap etc.
Example - p{
    font-variant: small-caps;
    font-variant: uppercase;
    font-variant: lowercase;
}

font-weight :- It specify the or  sets how thick or thin characters in text should be displayed.
Example - div.normal {
  font-weight: normal;
}

div.thick {
  font-weight: bold;
}

div.thicker {
  font-weight: 900;
}

font-size :- It define the size of the font.
Example - div.a {
  font-size: 15px;
}

line-height :-It specify the height of a line.
Example - div.a {
  line-height: normal;
}

CSS Text Property

text-align :- It define the alignment of the text.
Example - h1 {
              text-align: center;
              }  

decoration :- It define the decoration of the text.
Example - h1 {
  text-decoration: underline;
}

text-transform :- It define the used to specify uppercase and lowercase letters in a text.
Example - p{
  text-transform: uppercase;
}

text-indent :- It define to specify the indentation of the first line of a text:
Example - p {
  text-indent: 50px;
}

word-spacing : It can specify the distance between one word to another word.
Example - p{
        word-spacing: 5px;
        }
letter-spacing :- It can define the space between the letter to letter in a word.
Example - p{
            letter-spacing:2px;
        }

CSS Link Property

link :- It define the unvisited hyperlink.

active :- It defines an element on which the user is currently clicking.

visited :- It signifies the visited hyperlink.

hover :- it simplifies an element that currently has the user mouse pointer hovering over it.

Example -

        a:link{
            color: red ;
        }
        a:active{
            color: green ;
        }
        a:visited{
            color: yellow;
        }
        a:hover{
            color:black;
            font-variant: u;
        }



CSS Border Property

CSS Border properties allow you to specify how the border of the box representing an element to look.

border-color :- It specifies the colour of the border.

border-style : - It define wheather the border should be solid, dashes, double link                          or any other possibles.

border-width :- It can define the border width.

border-radius :- It can specifies the radius of the border.

Example -

        p{
            border-color: pink;
            border-style: dotted;
            border-width: 2px;
            border-radius: 13px;
        }

Some Other Property

display :- It specifies the display behaviour of an element.

Example -         p{
            display: inline-block;
            display: inline;
        }

cursor :- it define the mouse cursor to be displayed when pointing over an element.

Example - .alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}

Padding :- The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Example - div {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 20px;
}

Float :- The float property defined whether an element should float to the left, right, or not at all.

Note: Absolutely positioned elements ignore the float property!

Example - div  {
  float: right;
}

Position :- This position property define the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Example - h1 {
  position: absolute;
  left: 10px;
  top: 50px;
}

z-index :- This property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

Example - p {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
%d bloggers like this: