HTML5 & CSS3 - Hallo Guys · margin de un elemento En vez de especificar el margin de un elemento...
75
HTML5 & CSS3 Gilberto Ayala
Transcript of HTML5 & CSS3 - Hallo Guys · margin de un elemento En vez de especificar el margin de un elemento...
HTML5 & CSS3Gilberto Ayala
¿Qué es HTML?
¿Qué es HTML?Introducción
HyperText Markup Language (Lenguaje de marcas de hipertexto) Lenguaje de marcado: codificar un documento mediante texto y etiquetas
No es lenguaje de programación No aritmética No variables
¿Qué es HTML?Puntos importantes
Estándar a cargo del World Wide Web Consortium (W3C) Lenguaje más importante en la WWW Language interpretado Adaptación a cambios
¿Qué es HTML?Elementos
Descripción por etiquetas <>/
Elementos Estructura básica de HTML <elemento> </elemento>
Propiedades Atributo: contiene restricciones para validar el documento. Contenidos dentro de la etiqueta. <elemento atributo=“valor”> Contenido</elemento>
¿Qué es HTML?Elementos: ejemplos
<h2>Hola mundo</h2> <b>Negrita</b> <em>Énfasis</em>
¿Qué es HTML?Atributos
Pares nombre=valor Se escriben en la etiqueta inicial Valor entre comillas “” ‘’
¿Qué es HTML?Estructura básica
<html> inicio del documento <head> cabecera del documento <title> título de la página <link> vinculación de documentos externos <style> vinculación con estilos externos <meta> metadatos del documento
<body> cuerpo del documento <h1>-<h6> encabezados <table> tabla
¿Qué es HTML?Estructura básica
<a> hipervínculo <div> división de página <li><ol><ul> etiquetas para listas
¿Qué es HTML?DOCTYPE
<!DOCTYPE> deberá ser la primera línea que se declare en el documento html. No es una etiqueta html. Es una instrucción para el navegador sobre la versión del documento HTML que está siendo interpretado. HTML5 no está basado en SGML, de ahí que no requiera ninguna otra referencia. <!DOCTYPE html>
¿Qué es HTML?DOCTYPE
No es case sensitive HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd">
Contiene todos los elementos y atributos html, incluyendo elementos de presentación y elementos obsoletos.
Validador
Práctica 1Seleccionar radio buttons y checkboxes por default
Puedes establecer un elemento radio button o checkbox de manera predeterminada, para hacerlo, sólo agrega la opción
checked al final de la etiqueta de apertura de tu input.
1. Establece el primer elemento tanto del checkbox como del radio button como seleccionado utilizando el atributo checked.
Práctica 2Anidar varios elementos en un contenedor
El elemento div, también conocido como elemento división, es un contenedor de propósito general para otros elementos.
Es uno de los más usados. Es útil para añadir características CSS a todos los elementos que están contenidos dentro de estos.
Es un elemento con etiqueta de apertura y cierre.
1. Anida tu grupo de listas y etiqueta p dentro de un contenedor div.
Práctica 3Cambiar el color de fondo
Puedes establecer el color de fondo con la propiedad background-color, por ejemplo si quieres cambiar el color de fondo para algún elemento de manera genera, puedes usar un estilo similar al siguiente:
.green-background { background-color: green; } 1. Crea una clase llamada silver-background con el color plateado
como asignación de color.
2. Asigna dicha clase a tu elemento div.
Práctica 4Establece el identificador de un elemento
Además de clases, cada elemento HTML puede tener a su vez un atributo identificador.
Deben ser únicos.
Ejemplo:
<h2 id=“cake-photo-app”> 1. Agrega a tu formulario el identificador “cake-photo-form”.
Práctica 5Usar un atributo ID para estilizar un elemento
Una de las características más interesantes de los identificadores, es que podemos estilizarlos usando una clase CSS, la única diferencia es que la declaración de los estilos para el atributo debe comenzar con el símbolo #, sustituyendo al tradicional “.”.
1. Agrega un background color verde a tu formulario mediante un estilo aplicado a su identificador.
Práctica 6Ajustando el padding de un elemento
Todos los elementos HTML son esencialmente rectángulos.
Existen 3 propiedades importantes para controlar los espacios alrededor de cada elemento HTML:
padding
margin
border
El padding de un elemento controla la cantidad de espacio entre el elemento y su borde.
Práctica 6Ajustando el padding de un elemento
1. Crear un nuevo documento con la estructura básica de HTML.
2. Agregar como título Padding.
3. Crear un elemento style.
4. Crear una clase box con las siguientes características:
1. Estilo del borde: solid.
2. Color de borde: negro.
3. Anchura del borde: 5px.
4. Alineación del texto: centrado (text-align:center).
Práctica 6Ajustando el padding de un elemento
1. Crear una nueva clase yellow-box:
1. Color de fondo: amarillo.
2. Padding de 10 pixeles.
2. Crear clase red-box:
1. Color de fondo: rojo.
2. Padding 20 pixeles.
3. Crear clase green-box:
1. Color de fondo: verde.
2. Padding 10 pixeles.
Práctica 6Ajustando el padding de un elemento
1. Crear una clase injected-text con las siguientes características:
1. margin-bottom: -25 pixeles.
2. Alineación de texo: centrado.
2. Dentro de body crear una etiqueta h5 y con Margen como contenido. Agregar la clase injected-text.
3. Crear un contenedor y asignar las clase box y yellow-box.
4. Crear dos etiquetas más h5 y anidar dentro del contenedor creado anteriormente, añadir como contenido en cada etiqueta “Padding”.
5. Asignar la clase box clase a cada etiqueta h5 dentro del contenedor.
6. Asignar a una etiqueta dentro del contenedor la clase red-box, y a la otra la clase green-box.
Práctica 7Ajustando el padding de un elemento
1. Ajusta el padding de la clase green-box, para que sea similar a la de la clase red-box.
Práctica 8Ajustando el margin de un elemento
El margin de un elemento controla la cantidad de espacio entre los bordes del elemento y los demás elementos de su alrededor.
En la práctica anterior podemos ver el que cuadro verde y el rojo están anidados dentro del cuadro amarillo.
Puedes notar que el cuadro rojo tiene más margen que el verde, haciéndolo parecer más pequeño.
Cuando incrementas el margin del cuadro verde, aumentas la distancia entre su borde y los elementos de alrededor.
1. Agrega un margen de -15 px a la clase red-box.
Práctica 8Agregar un margin negativo a un elemento
El margin de un elemento controla la cantidad de espacio entre el borde y los elementos a su alrededor.
Si tú estableces un margen con un valor negativo, el elemento será más largo.
1. Cambia el margen del cuadro verde a -15 pixeles, y verifica los cambios.
2. Agrega la clase box a los elementos h5 anidados dentro del contenedor.
3. Comenta el elemento h5 con el contenido “Margen”.
4. ¿Qué cambios percibes?
Práctica 9Agregar un padding diferente a cada lado de un
elemento
Algunas veces querrás personalizar un elemento de tal manera que cada lado tenga un padding distinto, CSS te permite hacerlo mediante las propiedades:
padding-top, padding-bottom, padding-left, padding-right.
1. Agrega a las clases green-box y red-box un padding superior e izquierdo de 40 px, y al lado inferior y derecho un padding de 20 px.
2. Elimina el comentario que realizaste en la práctica anterior sobre el elemento h5.
3. ¿Qué cambios observas?
Práctica 10Agregar un padding diferente a cada lado de un
elemento
1. Elimina el padding de la clase green-box.
2. Cambia los valores de la clase green-box por los siguientes:
Margen superior e izquierdo en 40 pixeles.
Margen inferior y derecho en 20 pixeles.
¿Qué diferencias observas?
Práctica 11Usando la notación clockwise para especificar el
padding de un elemento
En vez de especificar el padding de un elemento de manera individual (padding-left, padding-right, etc.), puedes especificar todos en una sola línea de esta manera:
padding: 10px 20px 10px 20px;
Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán el mismo resultado que estableciendo el padding de la manera tradicional.
1. Usa la notación clockwise para establecer los siguientes valores en la clase green-box y red-box: padding de 40px superior e izquierdo, y 20 pixeles en inferior y derecho. Elimina primero el padding anterior.
Práctica 12Usando la notación clockwise para especificar el
margin de un elemento
En vez de especificar el margin de un elemento de manera individual (margin-left, margin-right, etc.), puedes especificar todos en una sola línea de esta manera:
margin: 10px 20px 10px 20px;
Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán el mismo resultado que estableciendo el padding de la manera tradicional.
1. Usa la notación clockwise para establecer los siguientes valores en la clase green-box y red-box: margin de 40px superior e izquierdo, y 20 pixeles en inferior y derecho. Elimina primero el padding anterior.
Práctica 13Estilizar el elemento body
Cada página HTML tiene su elemento body.
Dicho elemento puede ser personalizable, de manera similar a cualquier otro elemento.
1. Crea un nuevo documento con la estructura básica html.
2. Crea un elemento style, agrega un background color negro al elemento body.
Práctica 14Heredar estilos desde el elemento body
Ahora que hemos probado que cualquier página HTML tiene un elemento body, y el cual puede ser estilizado por medio de CSS.
1. Crea una etiqueta h1 con el texto Hello World.
2. Agrega el color de fuente verde a tu elemento body.
3. Agrega a tu elemento body la familia de fuente Monospace.
4. Tu elemento h1 debe heredar los estilos de tu elemento body.
Práctica 15Priorizar un estilo sobre otro
Algunas veces tus elementos HTML recibirán múltiples estilos que entren en conflicto con otro.
Por ejemplo tu elemento h1 no puede ser verde y azul al mismo tiempo.
1. Crea una clase que haga tu texto azul blue-text y asigna esa clase a tu elemento h1.
Práctica 16Sobreescribir un estilo CSS subsecuente
Nuestra clase blue-text sobreescribió nuestra declaración CSS dentro del elemento body.
1. Crea una nueva clase red-text después de haber declarado la clase blue-text.
2. Agrega la clase blue-text a tu elemento h1 y verifica cuál clase es la que predomina.
3. Nota: no importa el orden de la clase en la definición.
¿Cuál será la clase que predomine?
Práctica 17Sobreescribir una declaración de clase estilizando
los atributos ID
Se comprobó que los navegadores leen los estilos CSS de arriba hacia abajo. Eso significa que, en un evento en conflicto el navegador usará la última declaración CSS.
Existen otras maneras de sobre escribir un estilo CSS. Y es mediante el atributo ID.
1. Agrega un identificador a tu elemento h1 llamado orange-text.
2. Crea una declaración CSS para el identificado creado en el punto anterior.
3. Verifica los cambios.
Práctica 18Declaraciones con estilos inline
Existe otra manera de sobre escribir estilos CSS, y es mediante el estilo inline, por ejemplo:
<h1 style="color: green”>
1. Agrega un estilo inline a tu elemento h1 y asigna el color blanco al texto.
Práctica 19Sobre escribir estilos usando important
La última opción y más poderosa es important.
En muchas situaciones querrás usar librerías CSS, las cuales pueden accidentalmente sobre escribir tus propios estilos CSS.
Se utiliza cuando necesites estar absolutamente seguro que quieres un elemento tenga ciertas especificaciones, la sintaxis es:
!important
1. Agrega la indicación important a tu estilo red-text, de tal manera que dicho estilo sea el predominante.
Práctica 19Usar el código hex para especificar colores
Existen otras maneras de representar colores en CSS.
Una de ellas es mediante el código hexadecimal, o hex.
Usualmente se usan decimales, o números base 10, del 0-9.
Hexadecimal son base 16, usan número del 0-9 además de 6 letras: ABCDEF, y en conjunto representan valores.
En CSS podemos usar dígitos hexadecimales para representar los colores, dos para cada color base: rojo (R), verde (G), y azul (B).
Por ejemplo ¿qué color será #000000?
1. Cambia el fondo de tu elemento body por el código hexadecimal descrito.
Práctica 20Usar código hex para mezclar colores
De los tres colores base (rojo, verde, azúl), podemos crear variaciones de la cantidad de cada color y de esta manera crear alrededor de 16 millones de otros colores.
Por ejemplo, naranjo es rojo puro mezclado con un poco de verde y nada de azúl. En código hexadecimal esto se traduce de esta manera: #FF4500.
El dígito 0 es el número más bajo en el código hexadecimal, y representa una completa ausencia de color. El dígito F es el número más alto en el código hexadecimal y representa la cantidad de luz máxima posible.
1. Crea 4 estilos y agrega sus códigos de color en hexadecimal:
1. Azúl: #2998E4
2. Verde: #00FF00
3. Naranja: #FFAA00
4. Rojo: #FF0000
Práctica 20Usar código hex para mezclar colores
Agrega 4 elementos h1 y asigna cada una de ellos la clase correspondiente.
Cada elemento h1 deberá contener el nombre de color de referencia.
Práctica 21Usar código hex abreviado
Puedes abreviar el código hexadecimal de tus colores, por ejemplo el color rojo, escrito como #FF0000 puede ser abreviado como #F00, esta forma abreviada indica un dígito para color rojo, uno para el verde y otro para el azúl. Esto reduce la cantidad de colores a 4000.
Se interpretan los colores de la misma manera.
1. Crea 2 nuevas clases y establece el color que se muestra a continuación:
1. Cyan #0FF
1. Fuchsia #F0F
2. Agrega dos nuevos elementos h1 y asígnales las clases creadas.
Práctica 22Usar códigos RGB para colorear elementos
Otra manera de representar colores es mediante los códigos de color RGB, un código RGB es similar al siguiente:
rgb(0,0,0) Sustituye los dígitos del código hexadecimal, con la especificación de la cantidad de color que quieres.
1. Crea un nuevo documento con la estructura básica html.
2. Crea un elemento style.
3. Establece el color de fondo del elemento body con el color del ejemplo.
CSS
CSS¿Cómo describimos CSS?
Cascading Style Sheets (hojas de estilos en cascada).
Es un lenguaje de hojas de estilos.
Describe la presentación de un documento escrito en un lenguaje de markup (marcado).
Además de HTML se puede aplicar en documentos XML y SVG.
Es una tecnología muy importante en el diseño de páginas web creativas e interfaces para aplicaciones web.
Está diseñado para permitir la separación del contenido del documento de la presentación.
Permite mejorar la accesibilidad al mejorar la flexibilidad y control en la especificación de la presentación de un documento.
Permite reusar clases en múltiples sitios.
CSSSintaxis y selectores
Una regla CSS consiste de un selector y un bloque de declaración:
h1 {color:blue; font-size:15px;}
¿Cuál sería el selector y cuál sería el bloque de declaración?
CSSSintaxis y selectores
El selector apunta al elemento HTML que quieres estlizar.
El bloque de declaración contiene una o más declaraciones separadas por “;”.
Cada declaración incluye una propiedad CSS, nombre y valor, separado por “:”.
Los selectores son usados para seleccionar los elementos HTML basados en su nombre, id, clase o atributo.
h1 {color:blue; font-size:15px;}
selector
bloque de declaración
CSSSintaxis y selectores
El selector id usa el atributo id de un elemento HTML para seleccionar un elemento especifico.
El id de un elemento inicia con el caracter #.
El selector clase, selecciona los elementos con un atributo de clase especieico.
Comentarios en CSS:
/* */
CSSHojas de estilo externas
Con una hoja de estilos externa, puedes cambiar la apariencia de un sitio web completo, para realizar debes enlazar a un archivo .css.
Una hoja de estilos externa se declara de la siguiente manera:
<link rel="stylesheet" type="text/css" href=“mystyle.css">
Debe declararse dentro del elemento head.
Orden de cascada
Se dice así, ya que todos los estilos se agruparán en un nuevo estilo “virtual”mediante las siguientes reglas:
1. Estilos inline.
2. Estilos externos e internos.
3. Estilos predeterminados del navegador.
Mejores prácticas
CSS1. Hazlo legible
¿Por qué?
Facilidad de mantenimiento en el futuro.
Facilidad para encontrar elementos rápidamente.
Flexibilidad para personas externas.
Prácticas aceptables:
CSS2. Mantenlo consistente
¿Cómo?
Desarrolla tu propio “sub-lenguaje” CSS que te permita rápidamente nombrar cosas.
Piensa en cosas como:
Siempre o nunca usar underscores en los nombres de mis id o claes.
Qué clases pueden usarlos.
Crea tu propio estándar.
CSS3. Organiza la hoja de estilos con una estructura
top-down¿Cómo?
1.Clases genéricas (body, a, p, h1).
2. #header
3. #nav-menu
4. #main-content
¡No olvides comentar cada sección!
CSS4. Combina elementos
¿Cómo?
Combina elementos que comparta propiedades, en vez de re escribir cada elemento por separado.
Por ejemplo:
CSS5. Crea tu documento HTML primero
¿Por qué?
De esta manera conocerás todos los elementos de tu layout.
Permite visualizar la página completa como un todo.
Te permite pensar de una manera más eficiente, y de una manera top-down.
CSS6. Usa múltiples clases
¿Por qué?
Algunas veces es mejor agregar múltiples clases a un elemento.
Por ejemplo:
CSS7. Usa el Doctype adecuado
¿Por qué?
La declaración DOCTYPE importa demasiado, ya que según se establezca, será la manera en que el navegador interpretará nuestras hojas de estilo y las propiedades que puede interpretar, tanto así que toda la apariencia puede cambiar si no se declara el DOCTYPE adecuado!
CSS8. Usa los shorthand
¿Por qué?
Para elementos como margin, padding, puedes usar las versiones de escritura corta, por ejemplo:
CSS9. Complementa tus estilos
¿Cómo?
Comenta tu código, establece secciones.
CSS10. Diferencia entre elementos block e inline
¿Cómo?
Los elementos block son elementos que naturalmente despejan cada línea después de que son declarados, ocupando toda la anchura del espacio disponible.
Los elementos inline toman tanto espacio como necesitan, y no fuerzan una nueva línea después de ser utilizados.
Elementos que son tanto inline como block.
CSS10. Diferencia entre elementos block e inline
Elementos block.
CSS10. Diferencia entre elementos block e inline
Ejemplo: elemento span
Es un contenedor genérico inline para contenido de texto, el cual inherentemente no representa nada.
Puede ser usado para agrupar elementos.
Con propósitos de estilizado.
Slo debe ser usado cuando ningún otro elemento semántico es apropiado.
Es muy parecido al elemento <div>, pero la diferencia es que <div> es un elemento de nivel de block (block element).
Ejemplo: <p><span>Some text</span></p>
Práctica 2410. Diferencia entre elementos block e inline
1. Crea los siguientes elementos p y span en un nuevo documento html.
¿Cuál será el resultado?
CSS11. Alfabetiza tus propiedades
Ejemplo:
CSS12. Usa compresores CSS
¿Por qué?
Ayudan a disminuir la dimensión del archivo, eliminando saltos de línea, espacios en blanco y combinando elementos.
La reducción del archivo puede acelerar la carga de navegación.
Desventaja
Pierdes legibilidad.
¿Qué herramientas utilizar?
CSS Optimizer CSS Compressor
CSS13. Utiliza clases genéricas
¿Cómo?
Identifica qué estilos aplicas una y otra vez.
Sustituye estilos particulares por los estilos genéricos.
Crea clases gen´ricas y agrégalas a los id o a otras clases CSS.
Ejemplo:
CSS14. Utiliza Margin: 0 auto para centrar layouts
¿Cómo?
Puedes utilizar dicha propiedad para centrar objetos, es decir, párrafos, contenedores u otros elementos en tu layout.
CSS15. Utiliza text-transform
¿Cómo?
Text-transform es una propiedad CSS muy utilizada que permite estandarizar cómo el texto es transformado en tu sitio. Por ejemplo, ¿qué ocasionará si establecemos la siguiente propiedad a un elemento?
Práctica 2515. Utiliza text-transform
1. Crea un documento html con el nombre de la práctica.
2. Escribe un párrafo lorem ipsum.
3. Crea un estilo inline para cambiar el texto a mayúsculas utilizando la propiedad text-transform.
Hint: utiliza uppercase.
CSS16. Valida tu CSS
¿Por qué?
Validar te ayuda a detectar rápidamente errores en tu código.
¿Dónde validar?
CSS Validator
CSS17. EMS vs Pixels
¿Qué?
Siempre ha habido un debate entre qué es mejor, si utilizar pixeles o em cuando se define el tamaño de fuente.
Los pixeles es una manera más estática de definir tamaños de fuente.
ems es una medida más escalaba con diferentes dimensiones para navegadores de escritorio y móviles.
Con la llegada de múltiples dispositivos, el uso de ems ha aumentado considerablemente.
CSS17. EMS vs Pixels vs %
¿Qué?
em: es una unidad escalable. Es 1em es igual al tamaño de fuente actual. Son escalables, de ahí que 2em sería equivalente a 24px.
Pixeles: son unidades fijas. Un pixel es igual a un punto sobre la pantalla de la computadora. El inconveniente es que no es escalable según la dimensión de la pantalla.
Porcentaje: es unidad de medida muy similar al em, sin embargo se utiliza para establecer una medida de acuerdo a un porcentaje establecido, usando como base la medida de fuente actual.
Práctica 2617. EMS vs Pixels vs %
1. Crea un nuevo documento html.
2. Crea 4 párrafos con texto loores ipsum.
3. Crea un estilo inline para cada párrafo.
1. El primero tendrá un tamaño de fuente de 10px.
2. El segundo tendrá un tamaño de fuente de 150%.
3. El cuarto tendrá un tamaño de fuente de 1em.
4. El cuarto tendrá un tamaño de fuente de 2em.
Práctica 2717. EMS vs Pixels vs %
1. Agrega un estilo al body, desde un elemento style y establece el tamaño de la fuente en 18 pixeles. ¿Qué cambios se observaron?
2. Ahora cambia el tamaño de fuente del body a 8px. ¿Qué cambios se observaron?
3. Cambia el estilo del párrafo a 150%.
4. ¿Cuál unidad de medida usarían?
CSS18. No desestimes las listas
¿Por qué?
Son una excelente manera de presentar datos estructurados.
Es fácil modificar el estilo.
Son usadas para crear menús de navegación y ordenar cosas.
CSS19. Usa múltiples hojas de estilos
¿Por qué?
Es más fácil hacer hojas de estilo pequeñas, en vez de una sola lista gigante.
Permite usar estilos sólo en las páginas que lo requieren.
CSS20. Verifica que los elementos estén cerrados
¿Por qué?
Si ves que la apariencia no es la que esperas, busca elementos que no tengan su etiqueta de cierre. Puedes usar el siguiente validador para comprobar.
CSS Validator
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, by Gilberto Ayala.
openmasterproject.org
http://creativecommons.org/licenses/by-nc-sa/4.0/
BibliografíaJames H. Coombs, Allen H. Renear, Steven J. DeRose (1995). «Markup Systems and the Future of Scholarly Text Processing». Detroit, Estados Unidos: Universidad de Michigan. Consultado el 10 de Octubre 2016.
A. Fernández-Valmayor, A. Navarro, B. Fernández-Manjón y J. L. Sierra. «Lenguajes de programación, lenguajes de marcado y modelos hipermedia: una visión interesada de la evolución de los lenguajes informáticos». Madrid: Universidad Complutense de Madrid. ISSN 1139-8736. Consultado el 10 de Octubre 2016.
Carolina García Cataño y David Arroyo Menéndez (2002). «Biblioteca Digital y Web Semántica» (BiblioWeb de SinDominio edición). Consultado el 10 de Octubre 2006.. Aplicación de los lenguajes de marcas para una biblioteca digital. Disponible bajo GFDL.
Goldfarb, Charles F. (1996). «The Roots of SGML -- A Personal Recollection». Consultado el 10 de Octubre 2016.
Goldfarb, Charles F. The SGML Handbook. Oxford University Press. ISBN 0-19-853737-9.
HTML5. (2016, 21 de diciembre). Wikipedia, La enciclopedia libre. Fecha de consulta: 21:19, diciembre 29, 2016 desde https://es.wikipedia.org/w/index.php?title=HTML5&oldid=95754034.
Freecodecamp. https://freecodecamp.com
Mozilla developer. https://developer.mozilla.org
HTML5. (2016, 21 de diciembre). W3schools. Fecha de consulta: 21:19, diciembre 29, 2016 desde http://www.w3schools.com/html/default.asp
30 CSS Best Practices for Beginners. (2009, 16 de septiembre). Tutsplus. Fecha de consulta: 11:19, diciembre 29, 2016 desde https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741
