Html, CSS, Programming language, Web Page, Programming

CSS

CSS

Cascading style sheets (CSS) are a graphic design language for defining and creating the presentation of a structured document written in a markup language, typically web pages written in HTML or XHTML; the language can be applied to any XML document, including XHTML, SVG, XUL, RSS, etc. It also allows you to apply non-visual styles, such as auditory style sheets

A style sheet is nothing more than a text file with a .css extension. Although style sheets were defined in the mid-1990s, they have had a special impact since their latest release (CSS3), in combination with HTML5

Different style sheets can be applied depending on the device on which we display our website (a large screen, a mobile, printed paper, etc)

Integration of styles in a page

There are several ways to integrate styles into a page. But normally we'll use one of these two:

  • Included as a label that is part of the HTML

    The problem with this option is pretty obvious. If in the future we would like to change the color of the paragraphs containing the text, we would have to search one by one for all occurrences and change them manually

  • Defined as a style rule in the header

    On a real web page we'll use more than one style rule, so it won't be a good option to add them one by one in the header

  • Defined with the label <link> to an external file

    Normally we will use more than one style rule, so it will be a good option to add them from an external .css extension file and link them in the HTML header with the tag <link>

Structure of a style sheet

A style sheet defines one or more rules that are applied to items that meet this rule

Each rule consists of two parts:

  • Selector: indicates which elements we're going to apply the rule to. More than one selector can be written for the same rule separated by commas
  • List of statements: the styles to apply to items that comply with the rule. They correspond to a couple property:value, separated by semicolons

The example defined a rule that applies to all paragraph p-elements in the HTML. In addition, the text has been set red, its font as Verdana, and its paragraph alignment is centered

Additionally, we can add comments, which will be written between /* and */

You can also add at directives (which start with a button), which change the way you apply the rules

DOM tree

The document object model (DOM) is the structured, tree-shaped representation of all elements written in an HTML document

For example, any HTML document starts with the tag , also containing the labels and , with their respective closing labels

On the other hand, within the header (label <head>) will in turn contain elements with labels <meta>, <link>, <title>, etc

And the body (label <body>), will in turn contain more elements and so on until it reaches its closing labels

The hierarchical structure resulting in computing is called a tree

Specifically, the tree that represents the structure of an HTML document is DOM

Thanks to this tree-shaped structure, we can uniquely identify each element of the HTML document, depending on how those elements are related to each other, we will be able to apply different style rules to them

The relationships we can identify are:

  • Descendants: are all elements contained (directly or indirectly) by an element

    For example, <head>, <meta> or <body> they are descendants of <html>

  • Direct Son: they are the descendants of first level

    For example, <head> he is the son of <html>

  • Brothers: descendants who have a common father

    For example, all the elements <meta> are brothers if

Thanks to these relationships within the DOM, in the example we used earlier that affected only the elements <p>, we could also apply it to the elements contained in a division <div> that contains a class or an id specific

Or we could create rules for siblings that share a node

By relying on the JavaScript language and the DOM, you can modify the content of the elements once the website is loaded into the browser

Cascading style

Thanks to DOM we can identify the specific elements of an HTML document, and therefore we can apply the style sheets

A style sheet can contain different rules that configure the same element, we can even have multiple style sheets with conflicting rules

In this example, our rules say that for every element of the <body>, including its descendants, will be applied to it the black background color and the red text color

In the following rule, we tell you that in the element <p> paragraph, the text must be blue

The final document will have all the black background color elements and the red text, but in addition the paragraphs will have blue

The rules have been applied to each other, in the form of a waterfall. That's why they are called Cascading style sheets (CSS)

In general, styles are inherited. First they set the property of the parent element and their descendants inherit them, to finally apply their own, which in turn are inherited by their descendants, until they reach the last descendant node of the style sheet

In the event that we have two elements that are brothers and there is conflict to see who inherits which property, the most specific one is applied and if they have the same properties, the last style defined will be applied

That is, if a rule is defined in two external style sheets, the sheet rule that was later included in the HTML document will be applied. That's why the order in which we include them is very important

First we will include the leaves, more general, and then those that are more specific

If you have embedded a rule in the HTML, the style that has been defined will be the one that will have the highest priority than the rule that is included in the HTML header

In short, the following priorities will apply when applying a rule to a particular item:

  1. Finds all the statements that apply to the item
  2. If there are no rules, the inherited value will be used

    If there is no inherited value, the browser will apply the default value

  3. If there are rules, the highest priority will be applied according to the following criteria:

    • A weight is assigned according to its origin: author, user or browser style sheet
    • Attributes with the !important keyword: will have higher priority
    • Specific selectors: will have higher priority
    • Two rules with the same priority: applies the indicated in last place

CSS Reset

Each browser has its own style sheet by default

This implies that the default style of some elements can be different for each browser

For this reason it is advisable to restart the styles applied to the elements by adding a special CSS (the CSS Reset) at the beginning of our web pages

There are multiple CSSs that perform this task (such as those used in frameworks Yahoo YUI, HTML5 BoilerPlate or Normalize), but one of the most popular is Eric Meyer considered as one of the gurus of the CSS

To add it you only have to save the file in the css folder contained in the root of your web site and define it with the tag <link> in the header of your HTML: