What is css? the visual style system
Fredy Polania
Founder & Principal Strategist
Definition and Function
CSS (Cascading Style Sheets) is the standard language that allows visual attributes to be given to HTML elements. The W3C defines it as a simple mechanism for adding style (fonts, colors, spacing) to documents. MDN Web Docs adds that it is the language that describes how elements should be represented on screen, paper, or voice assistants.
1. Anatomy of a CSS Declaration
The rules for writing CSS consist of a selector (an HTML element name, id, or class) and a series of declarations that define the visual styling of the selected element. In the following example, we see the color property assigned the value red:
Anatomy of a CSS declaration
As shown in the image above, the selector (as the first element) indicates that the styles declared will apply to all <h1> tags in our HTML document. The second element consists of the declarations contained within curly braces {}. Declarations consist of property-value pairs that assign visual characteristics to the designated selector. It is possible to declare multiple properties within a single block, separating them with a semicolon:
Anatomy of a CSS declaration with two properties
In addition to assigning the color red, we can also designate the typography font size as 18px.
Critical Selector Types
Selectors are patterns used to select the elements we want to style. The selector in the previous examples targets all <h1> tags in the HTML document. It is also possible to target multiple HTML elements by separating selectors with commas:
Anatomy of a CSS declaration with two selectors
In the declaration above, the CSS styles will apply to all <h1> and <p> elements.
Class Selectors are another way to target elements. Their main advantage is that the styles apply only to the HTML elements marked with that specific class. We write class selectors by prefixing a dot . to the class name:
Class CSS selector
The declared styles will affect all elements identified with this class:
HTML element identified with class ‘titulo’
ID Selectors are another way to target elements in CSS. Similar to class selectors, the styles apply only to the HTML element designated with that specific ID. It is considered best practice to use an ID selector for a single, unique element, unlike classes which can identify multiple HTML elements. ID selectors are written by prefixing a hash # symbol to the ID name:
ID CSS selector
The declared styles will affect the unique element identified with this ID:
HTML element identified with ID ‘encabezado’
Element, class, and ID selectors are the basic building blocks for styling HTML documents. There are more advanced ways to combine selectors to be highly specific. A detailed reference can be found on W3Schools.
2. Dependency Relationship: CSS and HTML
The primary goal of CSS is to provide visual style to HTML documents (colors, sizes, positioning, etc.). This means that for any CSS rule to take effect, a corresponding HTML element must exist. The dependency relationship between both languages is direct.
You may also like to read: What is HTML? The Structure of Information.
There are three ways to link a CSS stylesheet to an HTML document:
-
Inside a
<style>tag in the<head>of the HTML file:
HTML code with CSS styles inside tag -
In an independent stylesheet within the project with a
.cssextension, linked with the<link>tag. This is the most scalable and professional way:
Link to an external CSS stylesheet -
Inline styles directly inside the
styleattribute of the HTML element:
Inline CSS styles inside the style attribute of HTML element
The choice of how to link CSS styles with HTML depends on the project’s architecture and the content delivery strategy.
Mastering CSS is mastering the presentation of authority. A well-structured style system ensures that the brand is consistent, fast, and visually flawless on any medium.
