CSS Basic Concepts

CSS selector

The First concept of CSS should be selector.

A CSS rule consists of a selector and a declaration block.

CSS selectors are used to ‘find’ the HTML element you want to style.

We can divide CSS selectors into five categories: simple, combinator, pseudo-class, pseuso-elements, attribute selector.

In short, we have following selector:

Simple: name, #id, .class, *, group
Combinator: space, >, +, ~
Pseudo-class: :
Pseudo-elements: ::
Attribute: []

Simple selectors

based on element name,
use element id, call id selector, start with #.
for class selector, start with .
for all the elements, use *
group selector:
```
h1, h2 , p{
color: blue;
}
```

Combinator selectors

Select elements based on a specific relationship between them.

There are 4 combinators:

descendant selector (space) The following example selects all <p> elements inside <div> elements:
```
div p {
  background-color: yellow;
}
```
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:
```
div > p {
  background-color: yellow;
}
```
adjacent sibling selector (+) The adjacent sibling selector is used to select an element that is directly after another specific element. The following example selects the first <p> element that are placed immediately after <div> elements:
```
div + p {
  background-color: yellow;
}
```
behinding sibling selector (~) The general sibling selector selects all elements that are next siblings of a specified element. The following example selects all <p> elements that are next siblings of <div> elements:
```
div ~ p {
  background-color: yellow;
}
```

Pseudo-class selectors

Select elements based on a certain state. For example, it can be used to

Style an element when a user mouses over it: a:hover, Selects links on mouse over.
Style an element when it gets focus. input:focus Selects the <input> element that has focus

Syntax like this:

selector:pseudo-class {
  property: value;
}

There are around 30 Pseudo-class. Some popular are:

:hover        a:hover        Selects links on mouse over
:active       a:active       Selects the active link
:root         root           Selects the document's root element
:focus        input:focus    Selects the <input> element that has focus
:visited      a:visited      Selects all visited links
:not(...)     :not(p)        Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent

Example1: (link and visited are pseudo-class)

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

Example2: (first-child is pseudo-class)

The selector matches any <p> element that is the first child of any other element:

p:first-child {
  color: blue;
}

the selector matches the first <i> element in all <p> elements:

p i:first-child {
  color: blue;
}

<style>
.showupwhenhover {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover .showupwhenhover {
  display: block;
}
</style>
<div>Hover over this div element to show the p element
  <p class='showupwhenhover'>Tada! Here I am!</p>
</div>

Pseudo-elements selectors

Select and style a part of an element. For example, it can be used to

Style the first letter, or line, of an element;
Insert content before, or after, the content of an element.

There are totally 6 pseudo-elements:

::after	       p::after	        Insert something after the content of each <p> element
::before       p::before        Insert something before the content of each <p> element
::first-letter p::first-letter  Selects the first letter of each <p> element
::first-line   p::first-line    Selects the first line of each <p> element
::marker       ::marker         Selects the markers of list items
::selection    p::selection     Selects the portion of an element that is selected by a user

Example1: (The `::first-line` is Pseudo-element)

The ::first-line pseudo-element is used to add a special style to the first line of a text. The following example formats the first line of the text in all <p> elements:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Example2: (The `::before` is pseudo-element)

The ::before pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before the content of each <h1> element:

h1::before {
  content: url(smiley.gif);
}

Example3

The ::marker selects the markers of list items. the marker will go to ‘red’ color for list below:

<style>
::marker { 
  color: red;
}
</style>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Attribute selectors

Select elements based on an attribute or attribute value. The following example selects all <a> elements with a target="_blank" attribute:

a[target="_blank"] {
  background-color: yellow;
}

We also have: [attribute~=”value”], [attribute|=”value”] ,[attribute^=”value”] , [attribute$=”value”], [attribute*=”value”]

Variable

CSS support variable.

Define variables in the :root pseudo-class:

:root {  
  --red: #ff6f69;  
  --beige: #ffeead;  
  --yellow: #ffcc5c;  
}

Then youcan use them:

html, body {  
  background: var(--beige);  
  color: var(--red);  
}
h1, p {  
  color: var(--red);  
}

CSS Keywords

“Initial”, “Inherit” and “Unset”

Initial

The initial keyword tells the browser to use the CSS default value of the given property.
But HTML elements do not have initial style values! The basic styles of an HTML element, such as the <h1> tag for example, comes from the browser user agent stylesheet.
User-agent styles are the basic styles that the browser applies to HTML elements in the browser.
For example: The color property’s initial value will always be black

Inherit

The keyword value of inherit tells the browser to search for the closest parent element’s value and let the current element inherit that value.

Unset

In CSS, there are two types of properties: Inherited properties and Non-inherited properties.
The unset keyword is unique in that it works differently on different types of properties.
The unset value works the same as inherit for inherited properties types.
For non-inherited properties, the unset will work the same as the initial value, that is, apply the CSS default value

Why Use Unset if it Works Exactly the Same as Inherit and Initial? Nowadays we have a new property called all which brings with it a new capability: to reset both all of the inherited properties and the non-inherited properties at once! Applying the unset value to the all property will reset all the inherited properties to inherit and all of the non-inherited properties to initial.

Length unit

height, width can be:
```
750%,
80px,
auto
inherit
```

also, we have:

max-width: 100%;
max-height: 90px;
min-width
min-height

relative length unit
- em, relative to the font-size of element.
- rem, relative to the font-size of root element. em, rem are practical in creating perfectly scalable layout.
- vw, relative to 1% of the width of viewport;
- vh, relateive to 1% of the height of viewport; the funny part of vw, vh is that , they will change when viewport change.
- vmin relative to 1% of the smaller dimension. (if width is smaller, then relative to width)
- vmax relative to 1% of the larger dimentsion
- % relative to the parent element.
absolute length unit cm, mm, in, px, pt, pc

At-rules

At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, ‘@’ (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ‘;’ (U+003B SEMICOLON), or the next CSS block, whichever comes first.

/* General structure */
@identifier (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";

There are several regular at-rules, each with a different syntax:

@charset — Defines the character set used by the style sheet.
@import — Tells the CSS engine to include an external style sheet.
@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

@media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
@scope - A conditional group rule that will apply its content if the device meets the criteria of the given condition.
@starting-style - A conditional group rule that will apply starting transition if the browser meets the criteria of the given condition.
@supports — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
@page — Describes the aspect of layout changes that will be applied when printing the document.
@font-face — Describes the aspect of an external font to be downloaded.
@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.
@counter-style — Defines specific counter styles that are not part of the predefined set of styles.
@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — Define common names in font-variant-alternates for feature activated differently in OpenType.
@property — Describes the aspect of custom properties and variables.
@layer – Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.

CSS Basic Concepts

CSS selector

Simple selectors

Combinator selectors

Pseudo-class selectors

Example1: (link and visited are pseudo-class)

Example2: (first-child is pseudo-class)

Example3: Simple Tooltip Hover

Pseudo-elements selectors

Example1: (The `::first-line` is Pseudo-element)

Example2: (The `::before` is pseudo-element)

Example3

Attribute selectors

Variable

CSS Keywords

Initial

Inherit

Unset

Length unit

At-rules

There are several regular at-rules, each with a different syntax:

More

Post Detail

CSS Basic Concepts

CSS selector

Simple selectors

Combinator selectors

Pseudo-class selectors

Example1: (link and visited are pseudo-class)

Example2: (first-child is pseudo-class)

Example3: Simple Tooltip Hover

Pseudo-elements selectors

Example1: (The ::first-line is Pseudo-element)

Example2: (The ::before is pseudo-element)

Example3

Attribute selectors

Variable

CSS Keywords

Initial

Inherit

Unset

Length unit

At-rules

There are several regular at-rules, each with a different syntax:

More

Post Detail

Example1: (The `::first-line` is Pseudo-element)

Example2: (The `::before` is pseudo-element)