Select Page

INTRODUCCION HTML Y CSS

CSS

CSS (Cascading Style Sheets) es un lenguaje que se usa para dar estilo y diseño a las páginas web.
Mientras que HTML define la estructura y el contenido (como títulos, párrafos o imágenes), CSS se encarga de cómo se ven esos elementos.

Debes tener claro un concepto clave: una página web es realmente un documento de texto. En dicho documento se escribe código HTML, con el que se que crea el contenido de una web. Por otro lado, existe el código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a un documento web.

La idea de CSS es la de utilizar el concepto de separación de presentación y contenido. Este concepto se basa en que, como programad

ores, lo

ideal es separar claramente el código que escribimos. ¿Por

qué? Porque con el tiempo, esto hará que el código sea más fácil de modificar y mantener.

La funcion de cada uno

es:

  • Los documentos HTML (contenido) incluirán sólo información y datos, todo lo relativo a la información a transmitir.
  • Los documentos CSS (presentación) inclurán sólo los aspectos relacionados con el estilo (diseño, colores, formas, etc…).

Por ejemplo, con CSS puedes cambiar:

  • 🎨 Colores de texto o fondo.

  • 🔠 Tamaño y tipo de letra.

  • 📏 Espaciado y márgenes.

  • 📱 Diseño adaptable a pantallas de distintos tamaños.

Archivos de CSS externos

En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>, podemos incluir una etiqueta <link> con la que establecemos una relación entre el documento HTML actual y el archivo .css que indicamos en el atributo href.

Veamos el código de nuestro index.html:

<link rel="stylesheet" href="index.css" />

De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css que está junto al documento index.html actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la página está en blanco y no ha sido cargada por completo.:

Archivos de CSS externos

En primer lugar, recuerda que debemos tener el documento .css enlazado desde nuestro documento .html, preferiblemente desde una etiqueta <link rel="stylesheet">. En su atributo href colocaremos el nombre del documento .css que contiene los estilos:

<!DOCTYPE html>
<html>
<head>
  <title>Título de página</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="page">
    <h1>Título de la página.</h1>
    <p>Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.</p>
  </div>
</body>
</html>

Sintaxis

CONCEPTO

Selector

Propiedad

Valor

Comentario

Regla

DESCRIPCIÓN

Elemento o elementos del documento que vamos a seleccionar para aplicarle un estilo concreto.

Característica principal que vamos a definir con el valor indicado a continuación.

Cada propiedad tiene una serie de valores asignables, con los que tendrá uno u otro comportamiento.

Fragmento de texto entre /* y */ con anotaciones para el desarrollador (el navegador los ignorará).

Par de propiedad y su respectivo valor asociado.

Así pues, tras aprender estos conceptos, la estructura de un documento .css se basaría en organizar el código siguiendo el formato del siguiente bloque:
<div class="page">
  <h1>Título de la página.</h1>
  <p>Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.</p>
</div>
p {
  color: red;   /* Color de texto */
}

Título de la página.

Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.

En este caso, estamos seleccionando todas las etiquetas <p> del documento HTML (en este ejemplo es una sola, pero si existieran más se aplicaría a todas), y les aplicaremos las reglas que contenga, en este caso una regla que define el color de texto rojo. Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente regla. El último punto y coma es opcional y se puede omitir si se desea.

Colores RGB
Las siglas RGB significan Rojo (red), verde (green) y azul (blue) y es un modelo para representar colores basados en la combinación de estos tres colores primarios. La idea es sencilla: dependiendo de la cantidad de cada color, obtendrás otro color diferente.

La forma de indicar colores en CSS mediante el modelo RGB es utilizar la función rgb(). Para ello, tenemos que conocer la sintaxis, que no es más que lo siguiente:

FUNCIÓN RGB

rgb(r g b)

Propiedad

DESCRIPCIÓN

Valores numéricos números  o porcentajes percent  separados por espacio.

Se añade un valor correspondiente al grado de transparencia, separado por /

Para especificarlo se puede hacer de dos formas:

  •  Como números, desde el 0 al 255. El 0 es el más oscuro y el 255 el más claro.
  •  Como porcentajes, desde el 0% al 100%, siendo 0% el más oscuro y el 100% el más claro.

Como se puede ver en la siguiente imagen, donde utilizamos el formato de , si utilizamos una cantidad rgb(0 0 0) de cada canal, obtenemos el color negro (todos los canales están en su valor menos intenso).

Centrado de CSS
Existen una serie de propiedades que se pueden utilizar para colocar y ajustar nuestra cuadrícula grid o ajustar los ítems a lo largo de ella, de forma sencilla y cómoda. Algunas de estas propiedades probablemente ya las conocerás del módulo CSS flex, sin embargo, en grid pueden tener un comportamiento diferente.

PROPIEDADES

justify-items

align-items

justify-content

align-content

VALORES

start | end | center | stretch

start | end | center | stretch

start | end | center | stretch | space-around | space-between | space-evenly

start | end | center | stretch | space-around | space-between | space-evenly

Si quieres conocer más informacion acerca de varias definicion que contiene CSS y seguir practicando, te recomiendo visites la pagina deManz.DEVM  creador contigo acerca de CSS y HTML, hace stream educativos sobre como crear una página web

INTRODUCCION HTML Y CSS

CSS

CSS (Cascading Style Sheets) es un lenguaje que se usa para dar estilo y diseño a las páginas web.
Mientras que HTML define la estructura y el contenido (como títulos, párrafos o imágenes), CSS se encarga de cómo se ven esos elementos.

Debes tener claro un concepto clave: una página web es realmente un documento de texto. En dicho documento se escribe código HTML, con el que se que crea el contenido de una web. Por otro lado, existe el código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a un documento web.

La idea de CSS es la de utilizar el concepto de separación de presentación y contenido. Este concepto se basa en que, como programad

ores, lo

ideal es separar claramente el código que escribimos. ¿Por

qué? Porque con el tiempo, esto hará que el código sea más fácil de modificar y mantener.

La funcion de cada uno

es:

  • Los documentos HTML (contenido) incluirán sólo información y datos, todo lo relativo a la información a transmitir.
  • Los documentos CSS (presentación) inclurán sólo los aspectos relacionados con el estilo (diseño, colores, formas, etc…).

Por ejemplo, con CSS puedes cambiar:

  • 🎨 Colores de texto o fondo.

  • 🔠 Tamaño y tipo de letra.

  • 📏 Espaciado y márgenes.

  • 📱 Diseño adaptable a pantallas de distintos tamaños.

Archivos de CSS externos

En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>, podemos incluir una etiqueta <link> con la que establecemos una relación entre el documento HTML actual y el archivo .css que indicamos en el atributo href.

Veamos el código de nuestro index.html:

<link rel="stylesheet" href="index.css" />

De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css que está junto al documento index.html actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la página está en blanco y no ha sido cargada por completo.:

Archivos de CSS externos

En primer lugar, recuerda que debemos tener el documento .css enlazado desde nuestro documento .html, preferiblemente desde una etiqueta <link rel="stylesheet">. En su atributo href colocaremos el nombre del documento .css que contiene los estilos:

<!DOCTYPE html>
<html>
<head>
  <title>Título de página</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div class="page">
    <h1>Título de la página.</h1>
    <p>Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.</p>
  </div>
</body>
</html>

Sintaxis

Así pues, tras aprender estos conceptos, la estructura de un documento .css se basaría en organizar el código siguiendo el formato del siguiente bloque:
<div class="page">
  <h1>Título de la página.</h1>
  <p>Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.</p>
</div>
p {
  color: red;   /* Color de texto */
}

Título de la página.

Me encanta Manz.dev. Lo veo en Twitch o Youtube todos los días.

En este caso, estamos seleccionando todas las etiquetas <p> del documento HTML (en este ejemplo es una sola, pero si existieran más se aplicaría a todas), y les aplicaremos las reglas que contenga, en este caso una regla que define el color de texto rojo. Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente regla. El último punto y coma es opcional y se puede omitir si se desea.

Colores RGB
Las siglas RGB significan Rojo (red), verde (green) y azul (blue) y es un modelo para representar colores basados en la combinación de estos tres colores primarios. La idea es sencilla: dependiendo de la cantidad de cada color, obtendrás otro color diferente.

La forma de indicar colores en CSS mediante el modelo RGB es utilizar la función rgb(). Para ello, tenemos que conocer la sintaxis, que no es más que lo siguiente:

Para especificarlo se puede hacer de dos formas:

  •  Como números, desde el 0 al 255. El 0 es el más oscuro y el 255 el más claro.
  •  Como porcentajes, desde el 0% al 100%, siendo 0% el más oscuro y el 100% el más claro.

Como se puede ver en la siguiente imagen, donde utilizamos el formato de , si utilizamos una cantidad rgb(0 0 0) de cada canal, obtenemos el color negro (todos los canales están en su valor menos intenso).

Centrado de CSS
Existen una serie de propiedades que se pueden utilizar para colocar y ajustar nuestra cuadrícula grid o ajustar los ítems a lo largo de ella, de forma sencilla y cómoda. Algunas de estas propiedades probablemente ya las conocerás del módulo CSS flex, sin embargo, en grid pueden tener un comportamiento diferente.
Si quieres conocer más informacion acerca de varias definicion que contiene CSS y seguir practicando, te recomiendo visites la pagina deManz.DEVM  creador contigo acerca de CSS y HTML, hace stream educativos sobre como crear una página web
Agrega tu comentario