CSS

Introducción

CSS es el acrónimo de Cascading Style Sheets. Ayuda a definir la presentación de elementos HTML como un archivo separado conocido como archivo CSS que tiene .css extensión.

CSS ayuda a cambiar el formato de cualquier elemento HTML con solo realizar cambios en un lugar. Todos los cambios realizados se reflejarían automáticamente en todas las páginas web del sitio web en el que apareciera ese elemento.

Reglas CSS

Las reglas CSS son los estilos que tenemos que crear para crear hojas de estilo. Estas reglas definen la apariencia del elemento HTML asociado. La forma general de sintaxis CSS es la siguiente:

Selector {property: value;}

Key Points

  • El selector es un elemento HTML al que se aplica la regla CSS.

  • Propiedad especifica el atributo que desea cambiar correspondiente al selector.

  • La propiedad puede tomar un valor especificado.

  • La propiedad y el valor están separados por dos puntos (:).

  • Cada declaración está separada por punto y coma (;).

Los siguientes son ejemplos de reglas CSS:

P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

Incrustar CSS en HTML

A continuación se muestran los cuatro métodos para agregar CSS a documentos HTML.

  1. Hojas de estilo en línea

  2. Hojas de estilo incrustadas

  3. Hojas de estilo externas

  4. Hojas de estilo importadas

Hojas de estilo en línea

Inline Style Sheetsse incluyen con el elemento HTML, es decir, se colocan en línea con el elemento. Para agregar CSS en línea, tenemos que declarar un atributo de estilo que puede contener cualquier propiedad CSS.

Syntax:

<Tagname STYLE = “ Declaration1 ; Declaration2 “>  …. </Tagname>

Consideremos el siguiente ejemplo usando hojas de estilo en línea:

<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>

Output −

Hojas de estilo incrustadas

Embedded StyleLas hojas se utilizan para aplicar la misma apariencia a todas las apariciones de un elemento específico. Estos se definen en el elemento <head> utilizando el<style> elemento.

los <style> el elemento debe incluir typeatributo. El valor de type El atributo especifica qué tipo de sintaxis incluye cuando lo representa el navegador.

Syntax

<head> <title> …. </title>
   <style type =”text/css”>
      …….CSS Rules/Styles….
   </style>		
</head>

Consideremos el siguiente ejemplo usando hojas de estilo incrustadas:

<style type="text/css">
   p {color:green; text-align: left; font-size: 10pt}
   h1 { color: red; font-weight: bold}
</style>

Hojas de estilo externas

External Style Sheets son los separados .cssarchivos que contienen las reglas CSS. Estos archivos se pueden vincular a cualquier documento HTML mediante la etiqueta <link> con atributo rel.

Syntax:

<head> <link rel= “stylesheet”  type=”text/css” href= “url of css file”>
</head>

Para crear CSS externo y vincularlo a un documento HTML, siga los siguientes pasos:

  • En primer lugar, cree un archivo CSS y defina todas las reglas CSS para varios elementos HTML. Nombramos este archivo como external.css.

p{ 
   Color: orange;     text-align:  left;        font-size: 10pt;
}
h1{ 
   Color: orange;      font-weight: bold;
}

  • Ahora cree un documento HTML y nómbrelo como externaldemo.html.

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <link rel="stylesheet"  type="text/css" href="external.css">
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>

Hojas de estilo importadas

Imported Style Sheetsnos permite importar reglas de estilo de otras hojas de estilo. Para importar reglas CSS tenemos que usar @import antes de todas las reglas en una hoja de estilo.

Syntax:

<head><title> Title Information </title>
   <style type=”text/css”>
      @import URL (cssfilepath)
      … CSS rules…
   </style>
</head>

Consideremos el siguiente ejemplo usando hojas de estilo en línea:

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <style>
         @import url(external.css);
      </style>
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>