 |
| The concept and basic use of CSS |
This tutorial is intended to introduce the concept and basic use of CSS. In its pages, I'll try to cover the basics of style sheets, allowing you to continue learning with more specific resources.
CONCEPT
CSS is a standard designed primarily to separate presentational attributes (such as background color, font size, or indentation) from the content. Although it can work with many types of documents, it is mostly used as a way to provide presentational information on web pages.
The separation between content and presentation improves flexibility, allowing authors to define a single set of styles that thousands of documents will use, thus reducing the time and work that must be invested in each update. Likewise, the CSS implementation allows a document to be exclusively semantic, by freeing it from the need to use presentational elements.
DECLARATIONS, PROPERTIES, AND VALUES
The declaration is the basic unit of CSS, which means that you can't use anything smaller than this in your documents. A declaration basically consists of assigning a value to a property.
In other words, a statement is an answer to a question. How wide should this table be? How thick is this edge? What color should this background be? How big is the font in this paragraph? And this is exactly how you define the look of your document: setting declarations, one for each property you need to define.
But CSS has a specific format that every declaration must follow. This consists of the name of the property followed by a colon (":") and the value that will be assigned to it. When more than one declaration is provided in the same block, each declaration must be separated from its next one by a semicolon (";"). This is the reason why authors typically use a semicolon at the end of each statement, regardless of the presence of subsequent statements. The next schematic describes the parts of a CSS declaration.
color: red;
In the following example, a set of declarations are presented using this format. Here an additional line break is added at the end of each statement, in order to improve readability.
background-color: green; font-size: 16px; margin-top: 40px; font-weight: bold;
SELECTORS
With what we have seen so far we can construct declarations, but how do we indicate which elements in the document should be affected by them? This is where CSS selectors come into the picture. A selector is the means of making a reference to a group of one or more HTML elements, in order to apply a set of CSS declarations to it.
There is a structure that you must comply with to use a selector and it is composed of the selector followed by the set of declarations enclosed by braces ("{}"). The following example, in which spaces and line breaks have been added to improve readability, reflects this structure.
[selector] { background-color: green; font-size: 16px; margin-top: 40px; font-weight: bold; }
There is an extensive set of selectors available, resulting in exceptional flexibility for property manipulation. In the following sections, we will look at some of the more basic selectors, as these will present the ideas upon which other selectors will build.
THE UNIVERSAL SELECTOR
The universal selector corresponds to all elements in the document. This is kind of a wild card that makes the most sense when used in combinations. The following code sets a property pair for all elements in the document.
* { font-size: 1.5em; color: #444; }
TYPE SELECTORS
The type selector corresponds to all elements in the document that have the specified type. With this selector, you can apply declarations too, for example, all paragraphs ( elementsp ), all list items ( elementli ) or all links ( elementsa ) of a document. The following example provides declarations for all ordered lists ( itemsol ) in the document.
ol { margin-left: 0; padding-left: 2em; }
ID SELECTORS
The ID selector corresponds to all elements that have the specified value in their attribute id. Since, by definition, the values of idmust be unique, this selector can affect only one element in the document. In its declaration, the specified ID must be preceded by the pound sign ("#").
The following example shows a set of declarations that are being applied to an element that has the value "title1" in the attribute id.
#titulo1 { font-size: 4em; color: blue; text-decoration: underline; }
To be absolutely clear, the above statements would affect an item like the following.
<h1 id="titulo1">Abrazando las posibilidades</h1>
CLASS SELECTORS
A class is a concept introduced by CSS for the purpose of grouping declarations and applying them to a custom set of elements, regardless of their type or nature. From another point of view, a class is one or more CSS declarations, grouped under a name that elements can use to access their definitions and be affected by them.
That said, a class selector applies a set of declarations to all elements that have the specified class name in their attribute class. In your construction, a period (".") Must precede the class name. The following example shows a set of declarations for the class called "important".
.importante { font-size: 1.2em; font-weight: bold; color: red; }
And these statements would affect items like the following.
<h3 class="importante">Cuidado</h3> <p class="importante">No abra la escotilla durante viajes interestelares!</p>
ADVANCED SELECTORS
CSS allows you to make combinations with the four basic selectors described above, referring to the relationships between parents, children, siblings, descendants, and more. With some of these tools you could, for example, apply declarations to all the paragraphs that are direct children of the body ( body). Furthermore, it provides other selectors based on the composition of the attributes or the states that an element presents, allowing authors to apply declarations too, for example, all elementsinput that are of type "radio" (attribute type).
Despite some of the newer ones being poorly supported, these advanced selectors are extremely useful in complex website development. However, they will not be covered in this tutorial due to their occurrence. This section is for informational purposes only.
0 Comments