--- language: CSS contributors: - ["Mohammad Valipour", "https://github.com/mvalipour"] - ["Marco Scannadinari", "https://github.com/marcoms"] - ["Geoffrey Liu", "https://github.com/g-liu"] - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Brett Taylor", "https://github.com/glutnix"] - ["Tyler Mumford", "https://tylermumford.com"] translators: - ["miky ackerman", "https://github.com/mikyackerman"] filename: learncss-es.css --- Paginas web estan contruidas en HTML, lo cual especifica el contenido de una pagina CSS(Hoja de Estilos en Cascada) es un lenguaje separado el cual especifica la **apariencia** de una pagina. codigo CSS esta hecho de *reglas* estaticas. Cada regla toma uno o mas *selectores* y da *valores* especificos a un numero de *propiedades* visuales. Esas propiedades estan entonces aplicadas a los elementos indicados en una pagina por los selectores Esta guia ha sido escrita con CSS 2 en mente, la cual es extendida por una nueva caracterica de CSS 3. **NOTA:** Debido a que CSS produce resultados visuales, para aprenderlo, necesitas Probar todo en un patio de juegos CSS como [dabblet](http://dabblet.com/). El objetivo principal de este artÃculo es la sintaxis y algunos consejos generales. ## Sintaxis ```css /* Los comentarios aparecen dentro de un diagonal-asterisco, justo como esta linea no hay "comentarios en una linea"; este es el unico estilo de comentario.*/ /* #################### ## SELECTORS #################### */ /* el selector es usado para apuntar a un elemento de la pagina. */ selector { property: value; /* more properties...*/ } /* Here is an example element:
*/ /* You can target it using one of its CSS classes */ .class1 { } /* or both classes! */ .class1.class2 { } /* or its name */ div { } /* or its id */ #anID { } /* or using the fact that it has an attribute! */ [attr] { font-size:smaller; } /* or that the attribute has a specific value */ [attr='value'] { font-size:smaller; } /* starts with a value (CSS 3) */ [attr^='val'] { font-size:smaller; } /* or ends with a value (CSS 3) */ [attr$='ue'] { font-size:smaller; } /* or contains a value in a space-separated list */ [otherAttr~='foo'] { } [otherAttr~='bar'] { } /* or contains a value in a dash-separated list, e.g., "-" (U+002D) */ [otherAttr|='en'] { font-size:smaller; } /* You can combine different selectors to create a more focused selector. Don't put spaces between them. */ div.some-class[attr$='ue'] { } /* You can select an element which is a child of another element */ div.some-parent > .class-name { } /* or a descendant of another element. Children are the direct descendants of their parent element, only one level down the tree. Descendants can be any level down the tree. */ div.some-parent .class-name { } /* Warning: the same selector without a space has another meaning. Can you guess what? */ div.some-parent.class-name { } /* You may also select an element based on its adjacent sibling */ .i-am-just-before + .this-element { } /* or any sibling preceding it */ .i-am-any-element-before ~ .this-element { } /* There are some selectors called pseudo classes that can be used to select an element only when it is in a particular state */ /* for example, when the cursor hovers over an element */ selector:hover { } /* or a link has been visited */ selector:visited { } /* or hasn't been visited */ selected:link { } /* or an element is in focus */ selected:focus { } /* any element that is the first child of its parent */ selector:first-child {} /* any element that is the last child of its parent */ selector:last-child {} /* Just like pseudo classes, pseudo elements allow you to style certain parts of a document */ /* matches a virtual first child of the selected element */ selector::before {} /* matches a virtual last child of the selected element */ selector::after {} /* At appropriate places, an asterisk may be used as a wildcard to select every element */ * { } /* all elements */ .parent * { } /* all descendants */ .parent > * { } /* all children */ /* #################### ## PROPERTIES #################### */ selector { /* Units of length can be absolute or relative. */ /* Relative units */ width: 50%; /* percentage of parent element width */ font-size: 2em; /* multiples of element's original font-size */ font-size: 2rem; /* or the root element's font-size */ font-size: 2vw; /* multiples of 1% of the viewport's width (CSS 3) */ font-size: 2vh; /* or its height */ font-size: 2vmin; /* whichever of a vh or a vw is smaller */ font-size: 2vmax; /* or greater */ /* Absolute units */ width: 200px; /* pixels */ font-size: 20pt; /* points */ width: 5cm; /* centimeters */ min-width: 50mm; /* millimeters */ max-width: 5in; /* inches */ /* Colors */ color: #F6E; /* short hex format */ color: #FF66EE; /* long hex format */ color: tomato; /* a named color */ color: rgb(255, 255, 255); /* as rgb values */ color: rgb(10%, 20%, 50%); /* as rgb percentages */ color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 <= a <= 1 */ color: transparent; /* equivalent to setting the alpha to 0 */ color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */ color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */ /* Borders */ border-width:5px; border-style:solid; border-color:red; /* similar to how background-color is set */ border: 5px solid red; /* this is a short hand approach for the same */ border-radius:20px; /* this is a CSS3 property */ /* Images as backgrounds of elements */ background-image: url(/img-path/img.jpg); /* quotes inside url() optional */ /* Fonts */ font-family: Arial; /* if the font family name has a space, it must be quoted */ font-family: "Courier New"; /* if the first one is not found, the browser uses the next, and so on */ font-family: "Courier New", Trebuchet, Arial, sans-serif; } ``` ## Usage Save a CSS stylesheet with the extension `.css`. ```html``` The precedence of style is as follows. Remember, the precedence is for each **property**, not for the entire block. * `E` has the highest precedence because of the keyword `!important`. It is recommended that you avoid its usage. * `F` is next, because it is an inline style. * `A` is next, because it is more "specific" than anything else. It has 3 specifiers: The name of the element `p`, its class `class1`, an attribute `attr='value'`. * `C` is next, even though it has the same specificity as `B`. This is because it appears after `B`. * `B` is next. * `D` is the last one. ## Media Queries CSS Media Queries are a feature in CSS 3 which allows you to specify when certain CSS rules should be applied, such as when printed, or when on a screen with certain dimensions or pixel density. They do not add to the selector's specificity. ```css /* A rule that will be used on all devices */ h1 { font-size: 2em; color: white; background-color: black; } /* change the h1 to use less ink on a printer */ @media print { h1 { color: black; background-color: white; } } /* make the font bigger when shown on a screen at least 480px wide */ @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } } ``` Media queries can include these features: `width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. Most of these features can be prefixed with `min-` or `max-`. The `resolution` feature is not supported by older devices, instead use `device-pixel-ratio`. Many smartphones and tablets will attempt to render the page as if it were on a desktop unless you provide a `viewport` meta-tag. ```html
``` ## Compatibility Most of the features in CSS 2 (and many in CSS 3) are available across all browsers and devices. But it's always good practice to check before using a new feature. ## Resources * [CanIUse](http://caniuse.com) (Detailed compatibility info) * [Dabblet](http://dabblet.com/) (CSS playground) * [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) (Tutorials and reference) * [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) (Reference) ## Further Reading * [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) * [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/) * [QuirksMode CSS](http://www.quirksmode.org/css/) * [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) * [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing * [CSS-Tricks](https://css-tricks.com)