Conceptos básicos sobre el CSS: Síntaxis y selectores

Conceptos básicos sobre el CSS: Síntaxis y selectores

Ya vimos anteriormente distintas formas de incluir el css en nuestro html en Incluir CSS en html.

Ahora veremos la sintaxis adecuada para escribirlo.

Para empezar debemos indicar a que lugar de nuestra parte del html nos estamos refiriendo para editar y entre corchetes los cambios estéticos que deseamos que lleve, por ejemplo:

h1{

color: blue;

font-size: 15px;

}

Esto hará que todos nuestros títulos h1 tengan una letra de color azul y un tamaño de 15.

Como podemos ver, la síntaxis usada es primero selector (en este caso h1) y entre corchetes la propiedad, dos puntos y el valor que tomará esta propiedad, seguido de un punto y coma

Si lo que deseamos es seleccionar un elemento único de nuestra página, al que previamente le hemos dado una id, podemos indicarlo poniendo # seguido por el nombre id dado, por ejemplo:

#nuestroid{

text-align: left;

}

Si tenemos clases y queremos seleccionarlas para editarlas le añadimos un punto delante al nombre, por ejemplo:

.nuestraClase{

background-color: black;

}

Si lo que deseamos es escoger todos los titulos h2 dentro de una clase concreta:

h2.nuestraClase{

}

 

Si queremos darle el mismo formato de estilo a varias cosas podemos ahorrarnos repetir lineas seleccionandolas todas, en vez de repetir que quiero que el titulo h1, el h2 y el h3 vayan en color amarillo puedo indicarlo junto en vez de separado.

h1, h2, h3{

color: yellow;

}

 

Incluir CSS en html

Incluir CSS en html

Para empezar, el css no tiene sentido sin su correspondiente html. Con él conseguiremos dar estilo a nuestra página indicando las caracteristicas de cada parte de la web.

Hay distintas formas de incluir css a nuestro html.

La primera es en el mismo html. Para hacer esto debemos incluirlo dentro de la parte head de nuestro html:

<html>

<head>

<style type="text/css">

h1{
color: blue; font-family: Arial;
}

</style>

</head>

<body>

<h1>Nuestro título con estilo</h1>

</body>

</html>

 

Normalmente para un pequeño retoque se puede usar, pero si vamos a tener muchos cambios sobre los estilos de nuestro html es más conveniente hacerlo en de forma externa.

Por lo tanto, la segunda forma que vamos a ver de incluir un css es en archivo externo .

Debemos empezar por crearnos nuestro archivo en el que pondremos:

h1{
color: blue; font-family: Arial;
}

Y lo guardaremos como “nombre_archivo.css”

Para enlazarlo con nuestro html iremos a nuestro documento html e incluiremos dentro del head la etiqueta <link>

<html>

<head>

<link rel="stylesheet" type="text/css" href="nombre_archivo.css" media="screen"/>

</head>

<body>

<h1>Nuestro título con estilo</h1>

</body>

</html>

Dentro de la etiqueta link deberemos incluir los atributos rel, type, media y href, en esta última es donde le diremos la ruta donde se encuentra nuestro css, si está en la misma carpeta solo poniendo el nombre del archivo nos funcionará.

 

Crear nuestro css de forma externa es lo más lógico si lo vamos a usar en varias páginas dentro de nuestra web o si es muy amplio, queda todo mucho más ordenado y limpio.

 

Estructura básica de tablas en html

Estructura básica de tablas en html

Hola muy buenas a tod@s.
Hoy hablaremos sobre como crear tablas básicas en html para nuestras webs.

La etiqueta que se usa para crearlas es table. <table></table>
Para la insercción de columnas usaremos tr <tr></tr> y para la insección de filas <td></td> (más…)

Enlaces básicos en html

Enlaces básicos en html


Muy buenas a tod@s otra vez. Hasta ahora hemos visto desde cual es la síntasix básica para empezar a crear nuestras páginas con html en Conceptos básicos de html, hasta distintos manuales de como insertarles formularios Creacion de formularios en HTML: algunas opciones de la etiqueta input. También listas y alguna cosita mas. Aún faltan muchas cosas importantes y necesarias para poder dejar bonitas nuestras páginas y que tengan todos los componentes necesarios. Hoy veremos como insetar enlaces y los distintos enlaces. (más…)

Formularios en HTML: Input type button, radio button, checkbox y text con lista desplegable

Formularios en HTML: Input type button, radio button, checkbox y text con lista desplegable

En la guia anterior sobre formularios en HTML hablabamos sobre el input de tipo texto, numero y contraseña Formularios en HTML:input type text, number y password.

Hoy vamos a seguir viendo los distintos tipos que puede ser un input dentro de nuestros formularios.

Empezaremos por el tipo botón. Con este tipo de input podremos generar los botones en nuestra página web.

Para escribirlo se le dice que es de type button

<input type=”button”> (más…)

Advertisment ad adsense adlogger