Skip to content

Instantly share code, notes, and snippets.

@nicolasleal570

nicolasleal570/index.html

Last active September 21, 2021 15:16
Show Gist options
  • Save nicolasleal570/e1fd7c2715b2149c543740db61bc43b3 to your computer and use it in GitHub Desktop.
Save nicolasleal570/e1fd7c2715b2149c543740db61bc43b3 to your computer and use it in GitHub Desktop.
Download ZIP
Selectores básicos de CSS
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Connecting HTML and CSS</title>
</head>
<body>
<h1>Hello world!</h1>
<h2>Using the selectors grouping, I show myself with red text</h2>.
<p>I belong to the red text selector grouping</p>.
<p class="text">I am using the "text" class</p>
<p id="paragraph">I am making use of the ID "paragraph"</p>
<h1>
<em>Hello,</em>
<em>To make use of</em>
<em>of descendant selectors</em>
<em>you need several nested elements</em>
</h1>
</body>
</html>
Raw
styles.css
/* Universal selector */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Prepares HTML elements for the use of padding */
}
/* Element selector */
h1 {
color: gray;
}
/* Grouping of selectors */
h2, p {
color: red;
}
/* Clss selector */
.text {
color: blue;
}
/* ID selector */
#paragraph {
background: purple;
}
/* Selectores Descendientes */
h1 em {
color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment