CSS Class Selector and CSS Properties ~ Online Quiz in IT

CSS Class Selector

Introduction to Class
Introduction to ID
Introduction to Universal selector
Introduction to Group selector

Class Attribute:

The classes are used for applying styles to the identical sections of html document. The class attribute specifies the style class to which the element belongs. The classes could be referenced in html with the class attribute.

A class always starts with a period character "." followed by the class name.

e.g. .sample{color:green;left-margin:20px}

<h3 class="sample">This class selector example.</h3>

Example with sample class.

<!DOCTYPE html>

<html>

<head>

<style>

.sample{color:green;left-margin:20px}

</style>

</head>

<body>

<h3 class="sample">This heading is red and left margin is 20 pixel</h3>

<p class="sample">This paragraph is red and left margin is 20 pixel</p>

</body>

</html>

Output-

Class selector for specific element:

Use element name with class selector then only one specific element is affected.

e.g. p.sample{color:green;left-margin:20px}

Example :

<!DOCTYPE html>

<html>

<head>

<style>

p.sample{color:green;left-margin:20px}

</style>

</head>

<body>

<h3 class="sample">This heading is not affected red and left margin is 20 pixel</p>

<p class="sample">This paragraph is red and left margin is 20 pixel</p>

</body>

</html>

Note-

Only change takes place with specific element paragraph <p> tag because class is applied with it i.e.p.sample{color:green;left-margin:20px}

ID Attribute:

The ID attributes function is same as class attribute. An id attribute is used for a unique style for an element i.e.html tag. The id starts with a Hash Character(#),followed by id name.

e.g. #sample{color:green;left-margin:20px}

Example

<!DOCTYPE html>

<html>

<head>

<style>

#sample{color:green;left-margin:20px}

</style>

</head>

<body>

<h3 id="sample">This heading is red and left margin is 20 pixel</h3>

<h3>This heading is not affected by red and left margin is 20 pixel</h3>

</body>

</html>

Note:

Only change will takes place where id attribute is applied affected on same element because here it not id applied.

Output-

Universal Selector:

Using this selector,all the elements on the web pages are selected. The universal selector is used as a wildcard character (*).

e.g. *{color:green;left-margin:15px}

Example:

<!DOCTYPE html>

<html>

<head>

<style>

*{color:green;left-margin:15px}

</style>

</head>

<body>

Using this selector,all the elements on the web pages are selected.

<h3 id="sample">This heading is red and left margin is 15 pixel</h3>

<h3>This heading is not affected by red and left margin is 15 pixel</h3>

<p>This is paragraph tag.</p>

</body>

</html>

Output-

Group Selector:

When we want to apply same style to different elements, we have to write code as follows.

e.g.h1{text-align:center;color:red}

h2{text-align:center;color:red}

p{text-align:center;color:red}

so to avoid such situation, we use group selector. By using group selector, we apply same name style definitions to the all elements.This selector is used to minimizes code.

To separate each selector in grouping commas are used.

e.g.h1,h2,p{text-align:center;color:red}

Example-

<!DOCTYPE html>

<html>

<head>

<style>

h1,h2,p{color:green;left-margin:15px}

</style>

</head>

<body>

<h1>By using group selector, we apply same name style definitions to the all elements.</h1>

<h2>This selector is used to minimizes code.</h2>

<p>This heading is not affected by red and left margin is 15 pixel</p>

</body>

</html>

Output-

CSS Properties:

1.Color: Changes the color of the text

Value=color name eg.h1{color:maroon}

2.Background-color:To set the background color in your webpage.

Value=color name eg.body{background-color:yellow}

3.Font-weight:Used to bold text.

Value=bold or 100,200..900 eg.p{font-weight:300}

4.Font-style:Used to italicize text.

Value=italic,oblique or normal eg.p{font-style:italic}

5.Text-decoration:This property is used to add

1.strike-through marks 2.underline 3.overstrike 4.to remove underlines from links. Value=line-through,underline,overline,none

eg.p{text-decoration:underline}

6.Text-align: This property is use to control the horizontal alignment of any block-level text that are paragraphs,tables and other elements.

Value=left,right,center,justify eg.h1{text-align:center}

7.Font-family:This is used to control the fonts.

Value=font name eg.p{font-family:arial}

8.Font-size:This property allows you to control the size of the font.

Value=px,in,mm,cm,pt eg.p{font-size:10px}

9.Letter-spacing:This helps in controlling the horizontal spacing between characters of text.

Value=px,in,mm,cm,pt eg.h1{letter-spacing:5pt}

10.Padding:This property is used when you want to add padding(blank space around) the content of an element.

Value=Pixel eg.h1{padding:30px}

11.Border:This property adds border to a webpage element.

Value=Solid,double,groove,ridge,inset,outset dotted,dashed eg.h1{border:green}

12.Background-image:To set an image as the background of your webpage.

Value=url("X") where X is the path of image file eg.body{background-image:url("background.jpg")}

13.Margin-left: Sets margin area on the left side of the element. Eg.h1{margin-left:10px}

Example-

<!DOCTYPE html>

<style>

h1{color:green;border:dashed}

body{background-color:yellow}

p{font-weight:bold;border:double}

h2{font-style:italic;text-decoration:underline;text-decoration:line-through}

h3{letter-spacing:5pt;border:dotted;padding:30px}

</style>

</head>

<body>

<h1>This css style will be applied on entire page.It does not check tag or plain text.<br></h1>

<p>This paragraph tag</p>

<h2>Italiac and underline</h2>

<h3>Letter spacing</h3>

</body>

</html>

About itquizcontent.blogspot.com

Visit here and learn new trends and technologies everything.

Online Quiz in IT

CSS Class Selector and CSS Properties

About itquizcontent.blogspot.com

Related Post