CSS

CSS (abbreviations in English of Cascading Style S sheets), in Spanish «Hojas de cascading style", is a graphic design language for defining and creating the presentation of a structured document written in a markup language. It is widely used to establish the visual design of web documents, and user interfaces written in HTML or XHTML; the language can be applied to any XML document, including XHTML, SVG, XUL, RSS, and so on. Along with HTML and JavaScript, CSS is a technology used by many websites to create visually appealing pages, user interfaces for web applications, and GUIs for many mobile applications (such as Firefox OS).

CSS is mainly designed to mark the separation of the content of the document and the way it is presented, characteristics such as layers or layouts, colors and fonts. This separation seeks to improve the document accessibility, provide more flexibility and control in specifying presentational features, allow multiple HTML documents to share the same style using a single, separate style sheet in a .css file, and reduce complexity and code repetition in the document structure.

Separation of format and content makes it possible to present the same marked-up document in different styles for different rendering methods, such as on-screen, in print, by voice (using a voice browser or screen reader), and devices. tactile based on the Braille system. A web page can also be displayed differently depending on the size of the screen or type of device. Readers can specify a different style sheet, such as a CSS style sheet saved on their computer, to override the designer's style sheet.

The CSS specification describes a precedence scheme for determining which style rules apply if more than one rule matches for a particular element. These rules are applied with a system called cascading, so that priorities are calculated and assigned to the rules, so the results are predictable.

The CSS specification is maintained by the World Wide Web Consortium (W3C). The MIME type text/css is registered for use by CSS described in RFC 2318. The W3C provides a free CSS validation tool for CSS documents.

Syntax

CSS has a simple syntax and uses a set of English keywords to specify the names of various style properties. A style sheet consists of a series of rules. Each rule, or set of rules, consists of one or more selectors, and a declaration block.

Selectors

Selectors declare which tags are applied to styles that match the tag or attribute specified in the rule.

Selectors can be applied to:

• All elements of a type, such as paragraphs

  .

• Elements followed by an attribute, in particular:
  • id: identifier, a unique identifier for the label.
  • class: class, an identifier to score multiple elements.

Classes and identifiers are case sensitive, begin with letters, and can include alphanumeric characters and underscores. A class applies to any number of elements. An identifier applies to a single element.

Pseudoclasses are used in CSS selectors to allow formatting using information that is not included in the document. An example of a widely used pseudoclass is :hover, which identifies content that is being pointed to by a pointer, such as the mouse cursor. This name is added to the selector, like this: a:hover or #elementid:hover. A pseudo-class classifies elements, such as :link or :visited, while a pseudo-element does a selection of partial elements, such as ::first-line or ::first-letter.

Selectors can be combined in many ways for greater flexibility and precision. Multiple selectors can be joined on a single line to specify elements by their location, element type, identifier, class, or any combination of these. The order of the selectors is important. For example, div.myClass {color: red;} applies to all <div> elements with class myClass, while .myClass div {color: red;} applies to all <div> elements inside any element with class myClass.

The following table provides a summary of the syntax of the various selectors, indicating their manner of use and the CSS version in which they were introduced:

Statement block

A statement block consists of a list of joined statements. Each declaration consists of a property, a colon (:), and a value. If there are many declarations in a block, a semicolon (;) is inserted to separate each declaration.

The properties are inserted into the CSS standard. Each property has a set of possible values. Some properties affect any element, others only a particular group of elements. Values can be keywords, such as "center" or "inherit", or numeric values, such as 200px (200 pixels) or 80% (80 percent of the window width). Color values are specified by means of a keyword (eg "red"), hexadecimal values (eg #FF0000, which can be abbreviated as #F00), RGB values on a scale from 0 to 255 (eg rgb(255, 0, 0)), RGBA values same as RGB values but with alpha channel support for transparency (eg rgba(255, 0, 0, 0.8)), and HSL or HSLA values (eg hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%) ).

Use

Before the development of CSS, all presentational information in HTML documents was included in the HTML code. Font colors, background styles, element alignment, borders, and sizes were all described explicitly, sometimes redundantly, within the HTML. CSS allows designers to move all presentational information to another file, the style sheet, resulting in remarkably simpler HTML code.

For example, headers (h1), sub-headers (h2 eg network), sub-sub-headers (h3), etc., are defined structurally using HTML. In print and displays, the choice of font, size, color, and emphasis for those elements is presentational.

Before CSS, designers who wanted to assign typographical characteristics, for example, to all h2 elements had to repeat the HTML presentational code for each element to which they wanted to apply that style. This created documents that were more complex, lengthy, more prone to errors, and difficult to maintain. CSS allows for the separation between presentation and structure. CSS can define color, font, text alignment, size, borders, spacing, layers, and many other typographic features, and different print and display styles can be applied. CSS also defines non-visual styles, such as reading speed and emphasis for aural text readers. The W3C has declared the use of HTML presentational tags obsolete.

For example, by styling via HTML presentational tags, an h1 element defined with red text can be rendered as:

.h1▪span style="color:red;"▪ Chapter 1. ”spanΔh1▪

Using CSS, the same element can be written using inline style properties instead of attributes and presentation tags:

.h1 style="color: net;"▪ Chapter 1. ”h1▪

An external CSS style sheet, described below, can be linked to an HTML document using the following syntax:

.link href="hojadestyles.css" rel="stylesheet" type="text/css" / 2005

CSS code can be included in the HTML code in the <style> inside the <head> from the document:

.style▪ h1 {color: network!”style▪

Fonts

CSS styles can be provided from various sources. Those sources can be the web browser, the user and the designer. Designer information can be classified in the following ways: inline, media type, importance, selector specificity, rule order, inheritance, and property definition. The CSS style information can be in a separate document or it can be embedded within an HTML document. Multiple style sheets can be imported at the same time. Different styles can be applied depending on the output of the device used at the time; for example, the monitor version can be different from the print version, so designers can apply different styles depending on the device used.

The style sheet with the highest priority controls the display of the content. Declarations not set in the source with top priority are overridden, just like user agent style sheets. This process is called cascading, or cascade.

One of the goals of CSS is to allow users more control over presentation. Some people who find the red italicized headings hard to read may want to apply a different style sheet. Depending on the browser and the website, a user can choose between various style sheets provided by the designers, or they can remove all added style sheets and view the site using the browser's default styles, or they can override only the style of the red headings in italics without altering other attributes.

Specificity

The specificity refers to the relative weights of various rules. Determines which styles are applied to an element when more than one rule tries to apply styles to it. Based on the specification, a simple selector (h1, for example) has a specificity of 1, class selectors have a specificity of 1.0, and id selectors have a specificity of 1.0,0. Because the specificity values are not carried over as in the decimal system, commas are used to separate the "digits" (A CSS rule that has 11 elements and 11 classes has a specificity of 11.11, not 121.)

Therefore the following rule selectors result in the indicated specificity:

Example

Consider this HTML document:

 html .html▪ .head▪ .goal charset="utf-8"▪ .style▪ #id{property:value; ”style▪ ”head▪ .body▪ .p id="xyz" style="color: blue;"▪To demonstrate the specificity”p▪ ”body▪ ”html▪

In this example, the declaration in the style attribute overrides the declaration in the <style> element because it has higher specificity.

Inheritance

Inheritance is a key feature in CSS; based on the ancestor-descendant relationship to operate. Inheritance is the mechanism by which properties are applied not only to a single element, but also to its descendants. Inheritance is based on the document tree, which is the hierarchy of XHTML elements on a page based on nesting. Descendant elements can inherit CSS property values from an ancestor element. In general, descendant elements inherit text-related properties, but box-related properties do not. Properties that can be inherited are color, font, spacing, line weight, list properties, text alignment, indentation, visibility, and space spacing, and word spacing. Properties that cannot be inherited are background, borders, display, positioning, size, margins, minimum and maximum size, outline, overflow, padding, position, vertical alignment, and z-index.

Inheritance prevents some properties from being declared over and over again in the style sheet, allowing designers to write less CSS code. It improves the fast loading of sites by users, and allows customers to save money on development costs and bandwidth.

Example

You have the following style sheet:

 h1 { color: pink; !

This is a h1 element with an emphasis tag (em) inside:

.h1▪This is for .em▪illustrating”em▪ heritage
”h1▪

If the em element is not assigned a color, the word “illustrate” will inherit the color of the parent element, h1. Then the word “illustrate” will appear in pink. Let's say for example the color gray for the text between the em tags.

em { color: gray;!

Blank Spaces

Whitespace between properties and selectors are ignored. This piece of code:

body{overflow:hidden;background:#000;

is the same as this one:

 body { overflow: hidden; background: #000; !

Although the spacing improves the readability of the code.

Positioning

CSS 2.1 defines 3 positioning schemes:

Normal

The elements inline, or line, are arranged in the same way as the letters in the words of a text, once there is no more space in a line, then a new line is started down. The elements block, or block, are vertically arranged, such as paragraphs.

Fleet

An element float is outside the normal flow and put as much as possible to the right or left in the available space. The other elements flow around the float element.

Absolute

A positioned element absolutely has no place, and does not affect the normal flow of the elements. It occupies the space assigned to it regardless of the other elements.

Positioning properties

There are 4 possible values for the position property. If an element is positioned other than static, there are four sub-properties used to specify positions and offsets: top, bottom, left and right.

Static

The default value to the elements in the normal flow.

Relative

The element positioned in the normal flowand then moved relatively to their normal position. The other elements are independent of the relatively moving element.

Absolute

Specifies the absolute positioning. The element is positioned in relation to its nearest non-static predecessor.

Fixed

The element is positioned Absolutely. in a fixed position of the screen although the rest of the document moves.

Float and clear

The float property can have 3 different values. Absolutely or fixedly positioned elements cannot be applied to this property. Other elements float normally around the floating elements, unless one of the clear properties is set.

left

The elements float float to the left and the other elements flow to the right of this element.

right

The elements float float to the right and the other elements flow to the left of this element.

Clear

Force the element not to flow around the elements that float to the left (clear: left), to the right (clear: rightor both sides (clear: both).

History

Håkon Wium Lie, CTO of the Opera Software Company and CSS cocreator

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the same time, Lie was working with Tim Berners-Lee at CERN. Many other style sheet languages were proposed at the same time, and discussions on the public mailing lists within the W3C led to the first CSS Recommendation by the W3C (CSS1) in 1996. In particular, Bert Bos's proposal was influential; he was the co-author of CSS1 and is recognized as the co-creator of CSS.

Style sheets have been around in one form or another since the inception of the Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. A requirement for a web style sheet language was for style sheets to come in different styles on the web. Therefore, existing style sheet languages such as DSSSL and FOSI were not suitable. CSS, on the other hand, allows the document to be influenced by multiple style sheets through "cascading" styles.

As HTML grew, it came to encompass a wide variety of design capabilities to meet the demands of web designers. This evolution gave the designer more control over the appearance of the site, at the cost of more complex HTML. Variations in web browser implementations, such as ViolaWWW and WorldWideWeb, made consistency of website appearance more difficult, and users had less control over how web content was displayed. The browser/editor created by Tim Berners-Lee had style sheets that were built into the program. Style sheets were therefore not linked to documents on the web. Robert Cailliau, also at CERN, wanted to separate the presentation structure, so that different style sheets could describe different presentations for print, screens, and screens. and publishers.

Improving the presentation capabilities of the web was a topic of interest to many in the web communities, and 9 different style sheet languages were proposed on the www-style mailing list. Of those nine proposals, two they profoundly influenced what would become CSS: Cascading HTML Style Sheets and Stream-based Style Sheet Proposal (SSP). Two browsers were used for testing for the initial proposals; Lie worked with Yves Lafon to implement CSS in the Arena browser created by Dave Raggett. Bert Bos implemented his own SSP proposal in the Argo browser. Lie and Bos have since worked together to develop the CSS standard. The 'H' it was removed from the name because these style sheets can be applied to other markup languages besides HTML.

Lie's proposal was presented at the "Mosaic and the Web" (later called WWW2) in Chicago, Illinois in 1994, and again with Bert Bos in 1995. At this time the W3C was already being established, and was showing interest in CSS development. He organized a workshop for that purpose chaired by Steven Pemberton. This resulted in the W3C giving more CSS work to the results of the Editorial Review Board (ERB). Lie and Bos were the lead technical team on this part of the project, with additional participants such as Microsoft's Thomas Reardon. In August 1996 Netscape Communication Corporation introduced an alternative style sheet language called JavaScript Style Sheets (JSSS). The specification was never finalized and became obsolete. By late 1996, CSS was ready to become official, and the recommendation CSS 1 was published in December.

The development of HTML, CSS, and DOM had been done by a single group, the HTML Editorial Review Board (ERB). Beginning in 1997, the ERB was divided into three working groups: the HTML Working Group, led by Dan Connolly of the W3C; DOM Working group, led by Lauren Wood from SoftQuad; and the CSS Working Group, led by Chris Lilley of the W3C.

The CSS working group began fixing bugs that had not been fixed in CSS 1, resulting in the creation of CSS 2, on November 4, 1997. It was published as a recommendation on May 12, 1998. CSS additions thereafter, collectively known as "CSS3", took on a modular aspect, with each feature being developed independently.

In 2005 the CSS working group decided to improve the requirements of the standards more strictly. This meant that already published standards like CSS 2.1, CSS3 Selectors, and CSS3 Text were regressed from "Candidate Recommendations" to "Working Draft".

Levels

CSS Snapshot 2021

CSS has been created at various levels and profiles. Each CSS level builds on the previous one, usually adding features to the previous level.

Profiles are generally part of one or more CSS levels defined for a particular device or interface. Currently, profiles can be used for mobile devices, printers or televisions.

CSS1

The first official CSS specification, recommended by the W3C, was CSS1, published in December 1995, and abandoned in April 2008.

Some of the features it offers are:

• Properties of sources, such as type, size, emphasis...
• Text color, backgrounds, edges or other elements.
• Attributes of the text, such as spaced between words, letters, lines, etc.
• Aligning texts, images, tables or others.
• Case properties, such as margin, edge, filling or spaced.
• Properties of identification and presentation of lists.

CSS2

The CSS2 specification was developed by the W3C and published as a recommendation in May 1998, and abandoned in April 2008.

As an extension of CSS1, the following were offered, among others:

• The functionalities of the layers (≤3) as relative positioning/absolute/fix, levels (z-indexetc.
• The concept of "media types".
• Support for auditory-style sheets.
• Bidirectional text, shadows, etc.

CSS 2.1

The first revision of CSS2, usually known as "CSS 2.1", fixes some bugs found in CSS2, removes unsupported or inoperable functionality in browsers, and adds some new specifications.

According to the technical standardization system of specifications, CSS2.1 had the status of "candidate" (candidate recommendation) for several years, but the proposal was rejected in June 2005. A new candidate recommendation was proposed in June 2007, and is updated in 2009, but in December 2010 it was again rejected.

In April 2011, CSS 2.1 was again proposed as a candidate, and after being reviewed by the W3C Advisory Committee, it was finally published as an official recommendation on June 7, 2011.

CSS3

Unlike CSS2, which was a single specification defining various functionality, CSS3 is divided into several separate documents, called "modules".

Each module adds new features to those defined in CSS2, so the old ones are preserved for compatibility.

Work on CSS3 began around the time the official CSS2 recommendation was published, and the first drafts of CSS3 were released in June 1999.

Due to the modularization of CSS3, different modules can be in different stages of their development, so that as of November 2011, there are around fifty modules published, three of them became official CSS recommendations. W3C in 2011: "Selectors", "Namespaces", and "Color".

Some modules, such as "Backgrounds and Colors", "Media Queries", or " Multi-column layouts" are in the "candidate" phase, and considered reasonably stable, as of late 2011, and their implementations in different browsers are marked with the browser's engine prefixes.

CSS4

There is no integrated CSS4 specification, as the specification has been split into several separate modules that handle levels independently.

Modules that built on things from CSS Level 2 started at Level 3. Some of them have reached Level 4 or are even approaching Level 5. Other modules that define completely new functionality, like Flexbox, have been designated Level 1 and some of them approach level 2.

The CSS Working Group sometimes publishes "snapshots", which are a collection of entire modules and parts of other drafts that are considered stable enough to be implemented by web browser developers. So far, five of those "best current practice" They have been published as Notes, in 2007, 2010, 2015, 2017, and 2018.

Since these specifications are meant for developers, there has been a growing demand for similar reference documents but aimed at authors, which would present the state of interoperable implementations while being documented by websites such as "Can I Use...&#3. 4; and the MDN Web Docs. A group called the W3C Community Group has been established in early 2020 to discuss and define such resources. The actual type of versioning is also up for debate, which means that the document, once produced, might not be called "CSS4".

Support by web browsers

Every web browser uses a rendering engine to render web pages, and CSS support is not exactly the same across all rendering engines. Since browsers do not apply CSS correctly, many programming techniques have been developed to be applied by a specific browser (commonly known as CSS hacks or CSS filters). Adoption of new CSS functionality is hampered by the lack of support in mainstream browsers. For example, Internet Explorer has been slow to add support for some CSS3 features, which has hindered adoption of these features, and damaged the browser's reputation among developers. To ensure a consistent experience for its users, Internet Explorer Web developers sometimes test their sites on multiple browsers, operating systems, and browser versions. Increasing development time and complexity. Several tools like BrowserStack have been built to reduce the complexity of maintaining web pages.

In addition to the aforementioned testing tools, many sites maintain browser support lists for specific CSS properties, including CanIUse and the Mozilla Developer Network. In addition, CSS3 defines many queries, among which is provided the @supports directive that allows developers to specify browsers that support a specific feature directly in the CSS. CSS code that is not supported By older versions of a browser, it is sometimes provided via JavaScript polyfills. These methods add complexity to development projects, and consequently, companies often define a list of different browser versions that are supported and not supported.

As websites adopt new code standards that are incompatible with older browsers, these browsers are denied access to many of the resources on the web (sometimes intentionally). Many of the most popular sites on the Internet are not only visually ugly in older browsers due to poor CSS support, but they don't work at all, largely due to the evolution of JavaScript and other web technologies.

Limitations

Some of the known limitations of current CSS capabilities are:

The selectors cannot ascend

CSS currently does not offer a way to select the parent from an element that meets any criteria. CSS Level 4 selectors, who are still in the capacity of Working Draft, have proposed a selector, but only as part of another selector. a more advanced selector scheme (such as XPath) could enable more sophisticated style sheets. The biggest reasons for the CSS Working Group to reject proposals for the ascending selectors are related to browser performance and the rendering's increasing flaws.

Dynamic pseudoclas cannot be controlled

Dynamic pseudoclas (such as :hover) cannot be controlled or disabled from the browser, which makes them susceptible to abuse by banner designers or pop-ups.

CSS styles cannot be named

There is no way to name a CSS style, which could allow customer side scripts to refer to the rule even if the selector changes.

Can't include styles of one rule within another

CSS styles should sometimes be duplicated in several rules to achieve the desired effect, causing additional maintenance and requiring further testing. Some CSS features were proposed to solve this, but (in February 2016) nothing has been implemented yet.

You cannot select specific text without altering the mark

In addition to the pseudo-element :first-letter, you cannot select a specific range of text without using labels as .

Resolved Limitations

There are also limitations that have already been resolved:

Vertical alignment

While the horizontal alignment is generally easy to control, the vertical alignment is often non-intuitive, or impossible plane. Simple tasks, such as focusing an element vertically or putting a foot down is very difficult. The Flexible Box Module improves this situation considerably and the vertical alignment is much simpler and supported in all current browsers. Older browsers do not have these features (mainly Internet Explorer 9 and below) and are not currently supported by their manufacturers.

Absence of expressions

There is not even a standard option to specify property values as a simple expression (like margin-left: 10% – 3em + 4px;). This can be useful in many cases, such as calculating the number of columns in a table. Internet Explorer in its versions 5 to 7 support a proprietary extension expression()with similar functionality. expression() is no longer supported by Internet Explorer 8 onwards, except in compatibility modes. This decision was made to improve " compliance with standards, browser performance, and for security reasons." Anyway, a candidate recommendation calc() To overcome this limitation has been published by CSS WG and is now supported by most modern browsers.

Absence of text column statement

Although it is already possible to implement this in the CSS3 specification (using the module column-count), layers with many columns are difficult to implement with CSS 2.1. With CSS 2.1, the process is made using floating elements, which are rendered differently in different browsers, sizes, screen shapes and operating systems. Now, all modern browsers support this CSS3 feature in one way or another.

Advantages

On the other hand, some advantages of using CSS are:

Separation of content and presentation

CSS facilitates the publication of content in multiple presentation formats based on nominal parameters. These include explicit user preferences, different web browsers, the type of device used to view content (a PC or a smartphone), geographical location or other variables.

Consistency of the site

When CSS is effectively used, in terms of inheritance and "cascading", a global style sheet can be used to apply styles to a whole site. If later these styles should be changed, changes can be made only by changing the rules in the global style sheet. Before CSS, this was much more difficult, expensive and slower.

Bandwidth

An internal or external style sheet specifies the style for a set of HTML elements selected by class, type, or heritage. This is more efficient than repeating information for each occurrence of the element. An external style sheet is usually saved in the browser cache, and can be used on multiple pages without being loaded back, reducing data transfer across the network.

Page formatting

With a simple change in one line, you can change the style sheet for the same page. This brings advantages for accessibility, in addition to allowing the site to be adapted to different devices.

Accessibility

Without CSS, web designers typically designed their pages with elements such as boards that made it difficult for other users to access, and that were detrimental to certain uses of the documents, by browsers aimed at people with some sensory limitations.

CSS Framework

CSS frameworks are libraries prepared to allow simplification, and greater compliance with standards in the design of web pages using the CSS language. Some of the most common CSS frameworks are Foundation, Blueprint, Bootstrap, Cascade Framework, and Materialize. As with programming libraries in scripting languages, CSS frameworks are usually incorporated as external CSS style sheets referenced with the <link> tag. This provides a large number of ready options for the design and layout of a web page. Although many frameworks have already been published, some designers use them mostly for rapid prototyping, or for learning purposes, preferring to build their own CSS code by hand.