¿Qué es CSS? Y cuando usarlo con WordPress - Calendae - Calendae | Informática, Electrónica, CMS, Ciberseguridad

¿Qué es CSS? Y cuando usarlo con WordPress – Calendae

Hola, un placer verte por aquí. Yo soy Samuel López y esta vez vamos a hablar sobre ¿Qué es CSS? Y cuando usarlo con WordPress – Calendae

¿Qué es CSS? Y cuando usarlo con WordPress

Con sistemas de gestión de contenido como WordPress, es increíblemente fácil crear sitios web hoy. Ni siquiera necesitas aprender a programar. Simplemente instale un tema de WordPress y personalice su sitio web hasta que se caiga.

Desconocido para mucha gente, los desarrolladores escriben mucho código HTML, CSS, PHP y JavaScript para crear sus temas favoritos de WordPress.

Esto es lo que significan HTML, CSS, PHP y JavaScript:

  • HTML, que es la abreviatura de HyperText Markup Language, proporciona la estructura de una página web. Define todos los elementos que ves en una página, ya sean encabezados, párrafos, menús, etc. Es el lenguaje de marcado estándar y proporciona los componentes básicos para las páginas web.
  • CSS es la abreviatura de Hojas de estilo en cascada. CSS es el lenguaje que utilizan los diseñadores web para diseñar una página web. Controle los colores, estilos de fuente, fondos, tamaños de columna, capacidad de respuesta y todos los demás estilos de una página web. Sin CSS, las páginas web serían aburridas y difíciles de leer.
  • PHP es un acrónimo recursivo de HyperText Preprocessor. PHP es un lenguaje de secuencias de comandos que se ejecuta en el servidor. Se utiliza para desarrollar sitios web estáticos, sitios web dinámicos y aplicaciones web. Todos los sitios web de WordPress dependen en gran medida de PHP para compilar contenido dinámico extraído de una base de datos. Un buen ejemplo de PHP en acción es un sitio de comercio electrónico que se ejecuta en WooCommerce.
  • JavaScript, a menudo abreviado como JS, es un lenguaje de programación del lado del cliente y del lado del servidor que le ayuda a hacer que las páginas web sean interactivas.

En la publicación de hoy, nos centraremos en CSS. Para aprovechar al máximo esta guía, es importante comprender un poco de HTML. Esto se debe a que, como dijimos antes, CSS se usa para diseñar documentos HTML.

Para la mayor parte de la guía, utilizaré el siguiente documento HTML:

<html>

<head>
<title>What is CSS?</title>
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>

</html>

Sin CSS, el documento HTML anterior se ve así en un navegador:

No es bonito, pero la plantilla anterior nos permitirá demostrar cómo funciona CSS. No dude en copiar el código ficticio anterior con fines de experimentación.

Sin más preámbulos, manos a la obra ya que hay mucho que cubrir.

¿Qué es CSS?

Entonces, ¿qué es CSS? Hojas de estilo en cascada (CSS) es una estilismo idioma (no confundir con un Margen lenguaje como HTML o un guion lenguaje como PHP) que permite a los diseñadores y desarrolladores web controlar la apariencia de una página web.

Según el popular sitio web de desarrollo web w3schools.com, «CSS se utiliza para definir estilos para sus páginas web, incluido el diseño, el diseño y las variaciones de visualización para diferentes dispositivos y tamaños de pantalla».

Es un idioma importante que debe aprender si planea desarrollar sitios web desde cero o sumergirse bajo el capó para personalizar el estilo de su sitio web de WordPress. Con algunos trucos de CSS, puede cambiar el aspecto de su sitio web en varios dispositivos.

Pero eso no es todo. CSS ha mejorado significativamente con el tiempo y ahora le permite agregar interactividad e incluso crear animaciones como los ejemplos disponibles en animate.style sitio web. Chris Coyier también ha creado un montón de interesantes Animaciones CSS en CSS-Tricks.com,

Sin CSS, las páginas web serían una monstruosidad. Por ejemplo, así es como se ve una sección de nuestra página de inicio con CSS:

Todo limpio, bonito y hermoso, ¿verdad? Así es como se ve la misma sección sin CSS:

Dios mío, no es un espectáculo agradable de ver. Y esto, señoras y señores, es la razón por la que CSS es importante. Cuando se trata de páginas web, la presentación lo es todo.

CSS fue inventado por Hakon Wium Lie en 1994 y está dirigido por un grupo de personas dentro del World Wide Web Consortium (W3C) llamado Grupo de trabajo CSS.

pero como funciona?

Para usar CSS para diseñar sus páginas, primero debe comprender la sintaxis CSS. No es complicado, así que no se preocupe. Para ayudar a aclarar las cosas, aquí hay un ejemplo de CSS:

body 
background-color: lightblue;


h1 
color: white;
text-align: center;


p 
font-family: verdana;
font-size: 20px;

Como se ve en el ejemplo anterior, CSS tiene varias partes.

  • cuerpo, h1, es pag Se les llama selectoresy ayudarlo a identificar elementos específicos en un documento HTML. Por ejemplo, los selectores anteriores nos permiten apuntar a la sección del cuerpo, encabezados y párrafos en nuestro documento HTML.
  • color de fondo, color, texto alineado, Familia tipográfica, es tamaño de fuente son conocidos como propiedad.
  • azul claro, centrar, Verdana, es 20px Se les llama valores. Adjunta valores a las propiedades y el valor se pasa al elemento HTML en cuestión. En el ejemplo anterior, la sección del cuerpo tendrá un fondo azul claro, los títulos serán blancos y estarán centrados en la página, y los párrafos usarán la fuente Verdana.

Ya sabes, algo como esto:

El código CSS anterior es un ejemplo básico de CSS. CSS complejo está más allá del alcance de la publicación de hoy, pero no se preocupe, ya que agregaremos algunos activos hacia el final.

Cómo agregar CSS en HTML

Agregar CSS a documentos HTML es una operación relativamente simple. Puede agregar CSS a sus documentos HTML de tres formas diferentes.

CSS externo

En el desarrollo web, es una buena idea mantener el HTML y CSS en archivos separados. A continuación, puede vincular al archivo CSS utilizando el elemento que inserta en el archivo sección de su documento HTML.

Primero, necesita crear un archivo CSS para su código CSS. Los archivos CSS suelen terminar con la extensión .css. El mío es style.css, que guardé en la misma carpeta que el documento HTML.

En segundo lugar, agregue el archivo elemento al sección del documento HTML, como se muestra a continuación:

<html> 

<head> 
<title>What is CSS?</title>
<link rel="stylesheet" href="https://www.wpexplorer.com/what-is-css/style.css">
</head> 

<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>

</html>

Tan simple como A, B, C. Cuando carga su página web en un navegador, recupera el archivo CSS y los estilos «… el documento HTML basado en la información de la hoja de estilo».

Usar un archivo CSS externo es la mejor manera de implementar CSS.

CSS interno

Si desea agregar un estilo único a una sola página web, digamos que está creando un sitio simple de una página, puede optar por utilizar una hoja de estilo interna.

Agregue una hoja de estilo interna en el interior