The CSS declaration block is a fundamental part of CSS (Cascading Style Sheets). It is used to style HTML elements. It consists of one or more declarations enclosed in curly braces {}. Each declaration includes a CSS property and a value, separated by a colon : and ending with a semicolon ;.
Below, there is a sample CSS Statement showing a break-down of the syntax and values used. Below that is a table with "Ruleset Terms", which are used in your 'style.css' sheet (name the sheet as you like); and "Inline Style Terms", which can be used in "Inline" styling. Please keep in mind - "Inline" styling is not recommended among the web developer community.
One of the benefits of CSS is about separating presentation from markup.
Also, using a bunch of inline styling can make it a real pain for mainting your website. It's much easier to change an element once in your Stylesheet, than it is to manually go in and update each element's style if you used Inline Styling.
Ruleset Terms (Use in 'style.css') |
Inline Style Terms (Use in 'doc_name.html') |
---|---|
Selector: The beginning of the ruleset used to target the element that will be styled. | Opening Tag: The start of an HTML element. This is the element that will be styled. |
Declaration Block: The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s). | Attribute: The style attribute is used to add CSS inline styles to an HTML element. |
Declaration: The group name for a property and value pair that applies a style to the selected element. | Declaration: The group name for a property and value pair that applies a style to the selected element. |
Property: The first part of the declaration that signifies what visual characteristic of the element is to be modified. | Property: The first part of the declaration that signifies what visual characteristic of the element is to be modified. |
Value: The second part of the declaration that signifies the value of the property. | Value: The second part of the declaration that signifies the value of the property. |
See the Pen Codecad-sample-proj2 by Juss (@juss2c) on CodePen.