CSS 101

Short for Cascading Style Sheets according to abbreviationfinder, CSS is a style sheet language created to control the appearance or presentation of electronic documents defined with HTML and XHTML. CSS is the best way to separate content and its presentation and is essential to create complex web pages Separating the definition of the content and the definition of its appearance has many advantages, since it requires creating well-defined HTML / XHTML documents with full meaning (also called “semantic documents”). In addition, it improves the accessibility of the document, reduces the complexity of its maintenance and allows the same document to be viewed on countless different devices.When creating a web page, the HTML / XHTML language is first used to mark the contents, that is, to designate the function of each element within the page: paragraph,

Brief history of CSS

Style sheets appeared shortly after the SGML tagging language, around the year 1970. Since the creation of SGML, there was a need to define a mechanism that would allow different styles to be applied consistently to electronic documents. The big push for stylesheet languages ​​came with the boom of the Internet and the exponential growth of the HTML language for creating electronic documents. The browser wars and the lack of a standard for defining styles made it difficult to create documents with the same appearance in different browsers, the W3C body (http://www.w3.org/) (World Wide Web Consortium), in charge of creating all web-related standards, proposed the creation of a specific style sheet language for the HTML language and nine proposals were submitted. The two proposals that were considered were the CHSS (Cascading HTML Style Sheets) and the SSP (Stream-based Style Sheet Proposal). The CHSS proposal was made by Håkon Wium Lie and SSP was proposed by Bert Bos. Between the end of 1994 and 1995 Lie and Bos came together to define a new language that took the best of each proposal and called it CSS (Cascading Style Sheets). In 1995, the W3C decided to go for the development and standardization of CSS and added it to its HTML working group. At the end of 1996, the W3C published the first official recommendation, known as “CSS level 1”. Introduction to CSS Chapter 1. Introduction www.librosweb.es 5 At the beginning of 1997, the W3C decided to separate the work of the HTML group into three sections: the HTML working group, the DOM working group and the CSS working group. On May 12, 1998, the CSS working group publishes its second official recommendation, known as “CSS level 2”. The version of CSS used by all browsers today is CSS 2.1, a revision of CSS 2 that is still in development (last update is July 19, 2007). At the same time, the following CSS recommendation, known as “CSS Level 3”, has been under development since 1998 and only drafts have been published so far. The adoption of CSS by browsers has taken a long time. The same year that CSS 1 was published, Microsoft launched its Internet Explorer 3.0 browser, which had a fairly reduced CSS support. The first browser with full CSS 1 support was the Mac version of Internet Explorer 5, which was released in 2000. At the moment, no browser has full CSS 2.1 support.

Utilization

Separate the structure of a document from its presentation. Older versions of HTML allowed extra attributes within the open tag for formatting (such as Font size or color). However, each tag <H1>had to have the information if a consistent design for a page was desired and, furthermore, a person who reads that page with a browser totally loses control over the display of the text.

When using CSS, the tag <H1>should not provide information about how it will be displayed, it only marks the structure of the document. The style information separated in a style sheet, specifies how it is to be displayed <H1>: color, font, text alignment, size and other non-visual characteristics such as defining the volume of a speech synthesizer (see Speech synthesis), for example.

The style information can be attached either as a separate document or in the same HTML document. In the latter case, general styles could be defined in the header of the document or in each particular tag by means of the “style” attribute.

The three types of styles

CSS provides three different ways to apply style rules to a web page:

1. An external style sheet, which is a style sheet that is stored in a different file than the file where the HTML code for the Web page is stored. This is the most powerful way of programming, because it completely separates the formatting rules for the HTML page from the basic structure of the page.
2. An internal style sheet, which is a style sheet that is embedded within an HTML document. (It goes to the right inside the <head> element). In this way, you get the benefit of separating the style information from the HTML code itself. You can choose to copy the embedded style sheet from one page to another, (this possibility is difficult to implement if you want to keep the copies synchronized). In general, the only time an internal style sheet is used is when you want to provide some feature to a web page in a simple file, for example if you are submitting something to the web page.
3. An inline style, which is a method of inserting the page style language directly into an HTML tag. This way of proceeding is not entirely adequate. Embedding the description of the formatting within the document of the Web page, at the code level, becomes a long, tedious and inelegant task of solving the problem of programming the page. This working mode could be used occasionally if you want to apply formatting in a hurry, on the fly. It’s not as clear, or structured, as it should be, but it works.

Advantages of using style sheets

The advantages of using CSS (or another style language) are:

• Centralized control of the presentation of a complete website, which considerably speeds up its updating.
• The Browsers allow users to specify their own local style sheet to be applied to a website, which considerably increases accessibility. For example, the visually impaired can set up their own style sheet to increase the size of the text or make links more prominent.
• A page can have different style sheets depending on the device that displays it or even the user’s choice. For example, to be printed, displayed on a mobile device, or “read” by a speech synthesizer.
• The HTML document itself is clearer to understand and can be significantly reduced in size (as long as inline styling is not used).

CSS page layout

Before CSS was available, the only way to spatially compose a page was to use tables. Although it is a comfortable and versatile technique, an element is being used with a particular semantics, which is to express tabular information, only for its effect on the presentation.

The introduction of CSS has made it possible in many cases to replace the use of tables. However, CSS still does not allow the versatility that tables offered, achieving a complex page layout is usually a difficult task in CSS and the differences between browsers make the task even more difficult. Future developments in CSS3 are expected to address this deficiency and make CSS a more suitable language for describing the spatial structure of a page.

W3C Recommendations

Cascading Style Sheets, Level 1 (CSS1), December 1996

• Font properties
• Color and background properties
• Text properties
  • word spacing
  • alignment
• Box Properties
  • Margin
  • Edge
  • Filling
• Classification properties
  • display
  • lists

Illustration of box properties:

If a box is defined with the width attribute, it is interpreted by the W3C box model as the width of the content. The width of the fill and border are added to the total width of the element.

In the model, you cannot specify the margin, padding, or border, on the same label, as the width of the content. Another possibility is to use a hack.

• A demonstration of what can be achieved visually using CSS
• Web application for selecting fonts and colors Allows you to quickly view combinations of fonts, styles and sizes in real time. It is very useful for choosing the main font for our website. Additionally, there are comments on problematic style combinations following the W3C Accessibility recommendations.