CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

EXAMPLE:-

color:red;

text-align:center;

}

Example Explain-

P is a selector in CSS (it points to the HTML element you want to style: <p>).
Color is a property, and red is the property value.
Text-align is a property, and center is the property value.

CSS SELECTORS

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors(simple selector based on name, id, class)
Combinator selector (Combinator selector based on a specific relationship between them) .
Pseudo-class selectors (Pseudo-class selector based on a certain state) .
Pseudo-element selectors (select and style a part of an element).
Attribute selectors (select elements based on an attribute or attribute value)

1. CSS Element Selector

The element selector selects HTML elements based on the element name.

Example-

Here, all <p> elements on the page will be center-aligned, with a red text color:

color:red;

text-align:center;

}

2. CSS ID Selector -

The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The id selector use the id attribute of an HTML element to select a specific element

Example-

he CSS rule below will be applied to the HTML element with id="shiva":

#shiva {

color:red;

text-align:center;

}

3. CSS Class Selector -

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.

Example-

In this example all HTML elements with class="shiva" will be red and

center-aligned:

. shiva {

color:red;

text-align:center;

}

HTML elements can also refer to more than one class.

In this example the <p> element will be styled according to class="center" and

to class="large":

<p class="center large">This paragraph refers to two classes.</p>

1 . center {

color:red;

text-align:center;

}

2 .large{

color:red;

text-align:center;

}

Note: A class name cannot start with a number!

4. CSS Universal Selector -

The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>

<html>

<head>

<style>

* {

text-align: center;

color: blue;

}

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

</body>

</html>

5. CSS Grouping Selector -

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

here you can see the all the tags h1,h2,and p tag know have same css but there is no grouping

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

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

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

here you can see the grouping all the tags and apply CSS

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

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

</body>

</html>

CSS Combinators

A CSS selector can contain more than one simple selector. Between the

simple selectors, we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

First we describe the descendant selector

1. Descendant Selector- The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

<!DOCTYPE html>

<html>

<head>

<style>

div p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

<section><p>Paragraph 3 in the div.</p></section>

</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

</body>

</html>

2. Child Selector- The child selector selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a <div>element:

<!DOCTYPE html>

<html>

<head>

<style>

div > p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

<p>Paragraph 4 in the div.</p>

</div>

<p>Paragraph 5. Not in a div.</p>

<p>Paragraph 6. Not in a div.</p>

</body>

</html>

3. Adjacent Selector-The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means"immediately following".

The following example selects all <p> elements that are placed immediately after<div>elements:

<!DOCTYPE html>

<html>

<head>

<style>

div + p {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<p>Paragraph 1 in the div.</p>

<p>Paragraph 2 in the div.</p>

</div>

<p>Paragraph 3. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>

</body>

</html>

4. General Sibling Selector-

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of

<div> elements:

<!DOCTYPE html>

<html>

<head>

<style>

div ~ p {

background-color: yellow;

}

</style>

</head>

<body>

<p>Paragraph 1.</p>

<div>

<p>Paragraph 2.</p>

</div>

<p>Paragraph 3.</p>

<p>Paragraph 4.</p>

</body>

</html>

Shiwani Tiwari

Thursday, September 24, 2020

CSS Syntex And Selectors

CSS Syntax

CSS SELECTORS

1. CSS Element Selector

3. CSS Class Selector -

4. CSS Universal Selector -

5. CSS Grouping Selector -

CSS Combinators

No comments:

Post a Comment

Jquery Hide,Show,Toggel Effects

Search This Blog