AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

ID y Clase, Diferencias entre Class e Id


Next Page >>
HTML images

CSS Tutorial » ID y Clase, Diferencias entre Class e Id

La diferencia entre ID y Clase es que se puede usar un selector de ID para identificar un elemento, pero el selector de clase se puede usar para identificar más de un elemento.

En CSS, el selector de clases comienza con "." seguido del nombre del selector y el ID del selector comienza con "#" seguido del nombre del selector

Sintaxis selector de clase (Class):

.class_nombre {
/* Definir propiedades aquí */
}

Sintaxis selector de ID :

#id_nombre {
/* Definir propiedades aquí */
}

 

Selector ID de CSS

Un selector de ID es un identificador único del elemento HTML al que se debe aplicar un estilo en particular. Se usa solo cuando un solo elemento HTML en la página web debe tener un estilo específico.

Tanto en las hojas de estilo internas como en las externas, usamos hash (#) para un selector de id.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#tope {
color: #1c87c9;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
background-color: #CADFFF;
height: 60px;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: 10px;
}
#container {
color: #333;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
background-color: #E1E1E1;
height: auto;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 6px;
padding: 10px;
}
</style>
</head>
<body>
<div id="tope">LOGO - Titulo.</div>
<div id="container">
<h2>Titulo </h2>
<p>El primer párrafo, tu texto aquí.</p>
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p> </div>
</body>
</html>

Etiquetas: Clase e ID CSS, La diferencia entre ID y Clase, ID and Class, Diferencias entre el selector Class y el selector Id, diferencia entre un id y una clase, diferencia entre id y clase
como se le llama al conjunto de elementos que agregan estilos a etiquetas de html,

 

Selector de clases (class) CSS

Se utiliza un selector de clase cuando se debe aplicar el mismo estilo a varios elementos HTML en la misma página web.

Tanto en las hojas de estilo internas como en las externas, utilizamos un punto (.) Para un selector de clases.

Ejemplo de un selector de clases:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#tope {
color: #1c87c9;
font-family: "Comic Sans MS", cursive;
font-size: 18px;
background-color: #9DFFDF;
height: 60px;
width: 90%;
margin-right: auto;
margin-left: auto;
padding: 10px;
}
.caja_div {
color: #333;
font-family: "Comic Sans MS", cursive;
font-size: 16px;
background-color: #FFB9B9;
height: auto;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 6px;
padding: 10px;
}
</style>
</head>
<body>
<div id="tope">LOGO - Titulo.</div>
<div class="caja_div"><h2>Titulo </h2></div>
<div class="caja_div"> <p>El primer párrafo, tu texto aquí.</p></div>
<div class="caja_div">
<p>El segundo párrafo.</p>
<p>El tercer párrafo.</p>
<p>mas párrafo.</p>
</div>
</body>
</html>

En nuestro ejemplo, un selector de clase .caja_div se usa tres veces, en el encabezado y en el párrafo.

Etiquetas: ¿cuál es la diferencia entre una clase y un id de css?, ejemplos de div, clase o id, class y id javascript, cuál es la diferencia entre selectores de id y selectores de clase css, ¿cuál es la diferencia entre normalizar y anular el css?, ¿cuál usarías y por qué?, diferencia entre codigo y id, ¿Qué es un div class?, ¿Qué es un selector de ID?, ¿Qué diferencia existe entre id y class al momento de aplicar un estilo CSS?

 

La diferencia entre el selector de clase y de ID

La diferencia entre ID y clases es que la primera es única y la segunda no.

Esto significa que cada elemento puede tener solo un ID y cada página puede tener solo un elemento con este ID.

Cuando se usa el mismo ID en varios elementos, el código no pasará la validación. Pero como las clases no son únicas, la misma clase puede usarse en varios elementos y viceversa, puede usar varias clases en el mismo elemento.

El siguiente código demuestra la diferencia entre los selectores de clase e ID y cómo establecer sus propiedades individuales. El código establece una clase para el div y, por lo tanto, todos los elementos dentro del div tendrán esta clase.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main {
background-color: #FFAFA4;
}

#demo {
background-color: #DEDAF7;
padding-top: 8px;
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="main">
<h3>Bienvenido a Educativo! Párrafo class</h3>
<p id="demo">Párrafo de muestra con una identificación ID</p>
<p> Ejemplo de párrafo sin identificación (sin ID)</p>
</div>
</body>
</html>

 



Etiquetas: Clase e ID CSS, La diferencia entre ID y Clase, ID and Class, Diferencias entre el selector Class y el selector Id, diferencia entre un id y una clase, diferencia entre id y clase como se le llama al conjunto de elementos que agregan estilos a etiquetas de html
ID y Clase, Diferencias entre Class e Id - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...