CSS Foundations

CSS(cascading style sheet),so what is the use of css?.The answer of this question is we use this for style our pages,add colors i.e it's all about to make our page attractive .

But at first level,it has various rules.These rules are made up of a selector and a semi-colon separated list of declarations, with each of those declarations being made up of a property:value pair.

SELECTORS

It is a advanced way to select things instead of just looking at h1 h2 paragraph.

NOTE- 'div' this is used for making a straight blank line on you text.

Suppose, you wrote many paragraphs and you just wanted to change color of only the first paragraph so, by using 'selectors' you can easily do this.

CLASS SELECTORS

Class selectors is used when you want to add color to the single div.Don't worry we will take an example to clear all these.

  Let's move on to our first example.......

1.first of all u have to create a separate file named"styles.css"

2.use HTML elements

3.go to the style.css file

4.write".box1" now you can add background color etc etc separately into your paragraph.

IMAGES HEIGHT AND WIDTH

If you want to make your image size in your own choice you can do this by using image height and width.

    img{
   width= 50px
   height=auto
   }              

EXTERNAL CSS

     It is the most common method and it involves creating a separate file for the css and linking it inside of an HTML's opening and closing tags with a self-closing <link> element.

INTERNAL CSS

  It adds css with the html file itself instead of creating a completely separate file.

INSPECTING HTML AND CSS

If you have created a webpage,then click on right button of your mouse and go to the inspect option,you can see the entire HTML structure of your page.
Something like this-

THE BOX MODEL

In this section, you will learn how to put your page where you want or at a right place.

                     It includes---

MARGIN
It is a empty space around your element.

PADDING
It is a stroke around your element.

BORDER
It is a empty space with background in your element.

BLOCK V/S INLINE

First I am going to tell you what does block means OK.

##BLOCK##

1.It always starts with a new line.
2.Always takes up the full width available.
3.It has a top and a bottom margin.

INLINE

1.It doesn't start on a new line.
2.It only takes up as much width necessary.
3.It doesn't have top and bottom margin.

thank you