CSS Selector

Posted on Updated on

CSS Selector

Before learn the css selector we all know there are three type of CSS :-

Inline CSS[ high priority ]

Internal CSS [ less than inline priority ]

External CSS [ less than internal priority ]

Lets now move on the selectors:

Selector means to select the tag like think we are in room we change the position of the things to make a design of the room. CSS exactly do the same thing it coloring and changing the place for design the page. back to our example how we know what we have to move or change the position of the think. We can communicate with name , appearance , color etc these are the attribute of the thing with help we can select lets think how we can say to move a thing we don’t know which thing we selecting for the change the position that’s why we use name of the thing color of the thing same as we use to make change into the website we use the tag’s attributes and known as selectors.

Now what kind of selectors we have in css html

 Id is denoted in css with # and in html id=”some unique value”.

 Class is denoted in css with (.) and in html class=”some unique value”.

 Element or tag name is denoted with the name of the tag.

 (*) star is use for all tags it effect on all tags.

Now we are moving on how we can coding into the CSS…

First we use selector like we define.

Let use id

#id_unique_value

{

// code here

}

Code:

Property:value;

Property-subproperty:value;

Example

#ps

{

Color:red;

}

#pss

{

Background-color:red;

}

If we want to change on the multiple tags you can write the tags with comas.

Syntax:

H1,h3,p

{

Color:red;

}

Back ground:

Background properties use to set the background of the tag and the content we can set the background image color. With the use of the background we can make the website attractive.

Background types:

 Background-color

 Background-image

 Background-repeat

Background-color is use to set the background color of the webpage content or any thing.

Syntax:

Background-color:value;

Here we use the sub property of the background which is color and we fill the value in the form of alphabetic or hash code or rgb ().

Example :

#div_id

{

Height:400px;

Width:300px;

Background-color:red;

Background-color:#b2c5de;// hash code

Background-color:rgb(222,0,4);// RGB colors

}

Here we use the property height and width which provide the width and height to the div create a box fill with red color. We give the height and width in pixels but we can give the width and height in % also.

Note: if you want a responsive site you have to give the width in % instead of pixels because its adjust the width according to device.

Background image:

We set the background color of the div or body or anything now the next step is to set the background- image of the div or body with help of the background-image tag.

Syntax

Background-image:url(‘path if any have+image name.ext’);

If the file you want to attaché is in same folder with your css page then you don’t have give the path else its in another folder then you have to give the name of than folder like: folder_name/image_name.ext

Ext stands for extension which tell the browser which type of the file format like jpg,.jpeg,gif etc.

Example:

Background-image: url(‘folder_name_if any_have/image_name.jpg’);

When you set the image background it repeat automatically means horizontal and vertically we can set it with the repeat property of the background.

Background-repeat: no-repeat;

It show only one Image at a time on the background.

Background-repeat: repeat-x;

Its repeat on the x-excise. If we wirte y the background image repeat on y excise.

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s