Scribd
Upload
27 views

1) CSS Element Selector

Uploaded by

sumitbagul300
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

1) CSS Element Selector

Uploaded by

sumitbagul300
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id,
class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector


The element selector selects the HTML element by name.

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

OUTPUT:
This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Example with the id "para1".

<!DOCTYPE html>

<html>

<head>

<style>
#para1 {

text-align: center;

color: blue;

</style>

</head>

<body>

<p id="para1">Hello Javatpoint.com</p>

<p>This paragraph will not be affected.</p>

</body>

</html>

OUTPUT:

Hello Javatpoint.com

This paragraph will not be affected.

3) CSS Class Selector


The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.

An example with a class "center".

<!DOCTYPE html>

<html>

<head>

<style>
.center {

text-align: center;

color: blue;

</style>

</head>

<body>

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body>

</html>

OUTPUT:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

4) CSS Universal Selector


The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
OUTPUT:

This is heading

This style will be applied on every paragraph.


Me too!
And me!

5) CSS Group Selector


The grouping selector is used to select all the elements with the same style
definitions.

Grouping selector is used to minimize the code. Commas are used to separate
each selector in grouping.
The CSS code without group selector:

1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;
7. color: blue;
8. }
9. p {
10. text-align: center;
11. color: blue;
12. }

you need to define CSS properties for all the elements. It can be grouped in
following ways:

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

full example of CSS group selector:

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {
text-align: center;

color: blue;

</style>

</head>

<body>

<h1>Hello Javatpoint.com</h1>

<h2>Hello Javatpoint.com (In smaller font)</h2>

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

</body>

</html>

OUTPUT:

Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)

This is a paragraph.

CSS STYLE RULE PROPERTY:


OR

How to add CSS


CSS is added to HTML pages to format the document according to
information in the style sheet. There are three ways to insert CSS in HTML
documents.

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

OUTPUT:

This is a heading
This is a paragraph.

Internal CSS:

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.

Example
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>

body {
background-color: linen;
}

h1 {
color: maroon;

margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
OUTPUT:

This is a heading
This is a paragraph.

External CSS:

With an external style sheet, you can change the look of an entire
website by changing just one file!

Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

</html>
OUTPUT:

This is a heading
This is a paragraph.

An external style sheet can be written in any text editor, and must be
saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

You might also like