Advance CSS?

This contains flex, grid, and much more...

Project One – Blog Template?

Project One - Blog Template
Syntax & Selectors

 449 total views,  1 views today

Syntax and Selectors

CSS Syntax

  • A CSS rule-set comprises of a selector and an announcement block.
  • The selector points to the HTML component you need to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Every 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:

h1 {
    font-size:12px;
}

Example Explained:
h1 is the selector in this CSS .
{ font-size:12px } is declared in this CSS.
font-size is a property, and 12px is the property value.

CSS Selectors

CSS selectors are used to “find” (or select) the HTML components you need to style. They are are divided into five categories:

  1. Simple selectors 
    Selects elements based on name, id or class.
  2. Combinator selectors 
    A combinator is something that clarifies the connection between the selectors.
  3. Pseudo-class selectors
    A pseudo-class is used to define a special state of an element.
  4. Pseudo-element selectors
    A CSS pseudo-element is used to style specified parts of an element.
  5. Attribute selectors 
    The attribute selector is used to select elements with a specified attribute.

1. Simple Selectors

a) Element selector
The element selector chooses HTML elements dependent on the element name.

Example:
Here,  <h1> element on the page is center-aligned, with a blue text color.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Element selectors</title>
	<style>
		h1{
		    text-align: center;
		    color: blue;
		}
	</style>
</head>
 <body>
        <h1>CSS element Selector</h1>
</body>
</html>


b) ID Selector
The id selector utilizes the id attribute of a HTML element to choose a particular element. The id of an element is special within a page, so the id selector is used to choose one of a kind element.

To select an element with a specific id, write a hash (#) character.

Example:
Here the id=”main-header” is applied to the html element h1 .

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS ID selectors</title>
	<style>
		#main-header{
		    text-align: center;
		    color: blue;
		    font-weight: bold;
		}
	</style>
</head>
 <body>
        <h1 id="main-header">CSS ID Selector</h1>
</body>
</html>

c) Class Selector
The class selector chooses HTML element with a particular class property.
To choose element with a particular class, write a period (.) character.

Note: A class name cannot start with a number

Example:
In this example, the color of the html element with the class=”main-title” is blue, the font is bold and the text is in the center .

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Class selectors</title>
	<style>
		.main-header{
		    text-align: center;
		    color: blue;
		    font-weight: bold;
		}
	</style>
</head>

 <body>
        <h1 class="main-header">CSS id Selector</h1>
</body>

</html>

d) Universal Selector
The universal selector (*) selects all HTML elements on the page. Universal Selector affects every element of the html.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Class selectors</title>
	<style>
		*{
		    text-align: center;
		    color: blue;
		    font-weight: bold;
		}
	</style>
</head>
 <body>
    <h1>CSS Universal Selector</h1>
    <h2>sub title</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing  it. Fugit, distinctio.</p>
</body>

</html>


e) Group Selector
The group selector chooses all the HTML elements with a similar style definitions. It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Class selectors</title>
	<style>
		h1, h2, p{
		    text-align: center;
		    color: blue;
		    font-weight: bold;
		}
	</style>
</head>

 <body>
    <h1>CSS Grouping Selector</h1>
    <h2>CSS Grouping Selector 2</h2>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam,
        nobis!
    </p>

</body>

</html>


2. Combinator Selectors

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. We can include a combinator between the simple selectors.

The four different combinators in CSS are as below:

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

Descendant Selector
The descendant selector will match all elements that are descendants of a specified element.

The example below selects all <span> elements inside <div> elements: 

div span {
  background-color: blue;
}

Child Selector

The child selector will select all elements that are the children of a specified element.

The example below selects all <span> elements that are children of a <div> element:

div > span {
  background-color: blue;
}

Adjacent Sibling Selector

The adjacent sibling selector will select 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 example below selects all <span> elements that are placed immediately after <div> elements:

div + span {
  background-color: blue;
}

General Sibling Selector

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

The example below selects all <span> elements that are siblings of <div> elements: 

div ~ span {
  background-color: blue;
}

3. Pseudo Class Selectors

A pseudo-class is used to define a special state of an element.

It can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes
Links can be displayed in different ways:

Below are the examples.

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

4. Pseudo Element Selectors

5 – Attribute Selectors