Css - Rule (Set|Declaration)

About

In a CSS stylesheet, your write several rules to define your presentation.

A rule set (also called “rule”) consists of:

Syntax

selectorList { 
         property: value; 
         [more property:value; pairs] 
}

where:

  • selectorList
selector[:pseudo-class] [::pseudo-element] [, more selectorlists]

Example

The CSS rule

 h1 { 
    color: red;
    font: Consolas;
}

where:

The HTML

<h1>This text will be red with the font Consolas</h1>

The result

Property Order

The property may be laid out in any order but from a reading perspective, there is properties that are more important than other.

The code guide proposes an order by type of property:

  • Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles.
  • The box model comes next as it dictates a component's dimensions and placement.
  • Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

How to add programmatically a rule

To add a rule dynamically with javascript, you can just create dynamically a style element that will then add a stylesheet

Demo:

  • The goal is to add dynamically the following rule:
p.steelblue { color: steelblue; }
  • The javascript that adds the below css rule dynamically
let style = document.createElement("style");
style.innerText = `p.steelblue { color: steelblue; }`;
document.head.appendChild(style);
  • The HTML that should be styled
<p class="steelblue">A styleblue pargraph</p>
  • Output:





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute ) CSS absolute positioning is a positioning model that occurs when a box has the absolute value as position property....
CSS - CSS In Js

css in js is the manipulation of css rule completely with the help of javascript. The css is not in a stylesheet but in Javascript code. Css in Js is used mostly to style react components rather than...
CSS - Cascading (style rules priority scheme)

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - Element

Most CSS style sheet rules use the names of elements to specify how the elements (HTML, XML, ...) should be rendered. A replace element has its content outside the scope of the CSS formatting model,...
CSS - Framework

A css framework is a collection of css rule generally based on class that make page layout easy to implement. See bootstrap.
CSS - Image

The image type in CSS is given: a url that specifies: binary / raster image formats (such as gif, jpeg, etc) dedicated markup formats (such as SVG) or a gradient function (such as linear-gradient...
CSS - Left property explained as 1, 2, 3

The left property is an offset from the left edge of the containing block. This article shows you in two simple rules how to determine the containing block.
Boxdim
CSS - Length Value (Size)

Lengths refer to horizontal or vertical measurements. The format of a length value is a number (with or without a decimal point) immediately followed by a unit identifier where: number is positive...



Share this page:
Follow us:
Task Runner