¿Qué es css?
sintaxis básica
Básicamente, es un lenguaje que maneja el diseño y presentación
de las páginas web, es decir, cómo lucen cuando un usuario las
visita. Funciona junto con el lenguaje HTML que se encarga del
contenido básico de los sitios.
La sintaxis es permitir al motor del navegador pintar elementos de la
página con características específicas, como colores, posición o
decoración. La sintaxis CSS refleja estas metas y estos son los
bloques básicos de construcción.
¿cómo aplicar css interna y externamente?
selectores,elemento,clase,ID,propiedades como
color,fuente y margen
Internamente:
Abre tu página HTML y localiza la etiqueta de apertura <head>.
● Pon el siguiente código justo después de la etiqueta <head>:
<style type="text/css">
● Añade las reglas CSS en una nueva línea. Aquí hay un
ejemplo:
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
● Escribe la etiqueta de cierre:
</style>
Externamente:
Crea un nuevo archivo .css con el editor de texto y añade las
reglas de estilo. Por ejemplo:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
● En la sección <head> de tu documento HTML, añade una
referencia a tu archivo .css externo justo después de la
etiqueta <title>:
<link rel="stylesheet" type="text/css"
href="[Link]" />
No olvides cambiar [Link] por el nombre de tu archivo .css.
Selectores:
Por ejemplo, si quieres cambiar el color de fondo de todos los
títulos <h2> en tu página web, puedes utilizar un selector CSS
para apuntar a todos los elementos de (<h2>) y luego aplicar el
estilo deseado, como cambiar el color de fondo a azul.
Supongamos que tenemos el siguiente elemento HTML:
<h2>Título de ejemplo</h2>
Ahora, para aplicar estilos que cambien la apariencia de dicho
título (como el color), primero debemos seleccionar ese
elemento HTML (con un selector CSS), y después especificar las
reglas CSS que le den el estilo que deseamos. Por ejemplo:
h2 { color: blue }
En este caso, usamos un selector por tipo de etiqueta (<h2>)
para llamar al elemento que queremos cambiar la apariencia, y
luego introducimos las reglas siguiendo la sintaxis para
aplicar CSS. Y tendremos como resultado, un título que se
visualizará en el navegador en color azul.
Elemento:
Un elemento es parte de una página web. En XML y HTML, un
elemento puede contener un elemento de datos o un fragmento de
texto o una imagen, o tal vez nada. Un elemento típico incluye una
etiqueta de apertura con algunos atributos, contenido de texto
cerrado y una etiqueta de cierre.
Clase:
Los selectores de clase buscan un elemento basado en el
contenido de su atributo class. El atributo class está definido
como una lista de elementos separados por espacio, y uno de esos
elementos debe coincidir exactamente con el nombre de clase
dado en el selector.
Sintaxis
.classname { style properties }
Tenga en cuenta que esto es equivalente al siguiente selector
de atributo:
[class~=classname] { style properties }
ID:
El atributo ID del elemento seleccionado debe coincidir
exactamente con el valor dado en el selector.
css
Copiar al portapapeles
/* El elemento con id="demo" */
#demo {
border: red 2px solid;
}
Sintaxis
#id_value { style properties }
Tenga en cuenta que esto es equivalente al siguiente attribute
selector:
[id=id_value] { style properties }
PROPIEDADES
Color:
La propiedad de CSS color selecciona el valor de color de primer
plano del contenido de elemento de texto y decoraciones de texto.
Tambien establece el valor <currentcolor> que se puede usar
como un valor indirecto en otras propiedades, y es el valor
predeterminado para otras propiedades de color, como border-
color
Fuentes:
Las propiedades CSS de las fuentes son las que permiten controlar
el tamaño, el tipo, el grosor o el estilo de las letras, entre otras
cosas. En la siguiente tabla se muestran las propiedades de las
fuentes más destacadas.
Propiedades de las fuentes
Font-family
{ font-family: "Times New Roman", Times,
serif; }
Font-style
{ font-style: normal; }
Font-variant
{ font-variant: normal; }
Font-weight
{ font-weight: normal; }
Font-size
{ font-size: 20px; }
Margen:
La propiedad CSS marginestablece el margen para los cuatro
lados. Es una abreviación para evitar tener que establecer cada
lado por separado con las otras propiedades de margen: margin-
top, margin-right, margin-bottomy margin-left