Scribd
Upload
3 views

HTML

The document contains an HTML structure demonstrating various CSS selectors, including universal, element, class, and ID selectors. It showcases how different selectors can be applied to style elements such as headings, paragraphs, and lists. Additionally, it includes examples of pseudo-classes and pseudo-elements for further styling capabilities.

Uploaded by

jasdeepk531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML

The document contains an HTML structure demonstrating various CSS selectors, including universal, element, class, and ID selectors. It showcases how different selectors can be applied to style elements such as headings, paragraphs, and lists. Additionally, it includes examples of pseudo-classes and pseudo-elements for further styling capabilities.

Uploaded by

jasdeepk531
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

------------------------------------------HTML------------------------------

<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="style.css">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-----------------------CSS----------------->

<h1> CSS SELECTORS DEMO</h1>

<H2>THIS IS A SUBHEADING </H2>

<P>This paragraph comes first after h2 (adjacent sibling) </P>

<p>this paragraph also follows h2 (general sibling)</p>

<div>

<p>this is inside a div (descendent selector) </p>

</div>

<p class="highlight">this paragraph uses a class selector</p>

<p id="unique">This paragraph uses an id selector</p>

<ul>

<li class="item">Item 1</li>

<li class="item">Item 2</li>

<li class="item">Item 3</li>

</ul>

<input type="text" placeholder="This is a text input">

<input type="button" value="Click Me!">

<p>here is a <a href="#">Link</a>to hover over.</p>

</body>

</html>
---------------------------------CSS-------------------------

1. --------Universal Selector-------- */

*{

font-family:sans-serif;

margin: 0;

padding: 10;

box-sizing: border-box;

background-color: #f0f0f0;

color: #462121;

/* 2. --------Element Selector-------- */

h1 {

color: blue;

text-align: center;

p{

color: green;

font-size: 16px;

/* 3. --------.Class Selector-------- */

.highlight {

background-color: yellow;

font-weight: bold;

padding: 5px;

/* 4. --------#ID Selector-------- */

#unique {

border: 2px solid red;

margin: 10px;

padding: 10px;

}
/*----------grouping selectors----------*/

h2,h1,p {

color: darkblue;

text-align: left;

/*----------descendant selector----------*/

div p {

font-style: italic;

margin: 5px 0;

/*----------child selector----------*/

ul > li {

list-style-type: square;

margin: 5px 0;

/*----------adjacent sibling selector----------*/

h1 + p {

color: purple;

font-size: 18px;

/*----------general sibling selector----------*/

h1 ~ p {

color: orange;

font-size: 14px;

/*----------attribute selector----------*/

input[type="text"] {

border: 1px solid black;

padding: 5px;

/*----------pseudo-class selector----------*/

a:hover {

color: red;
text-decoration: underline;

background-color: aqua;

/*----------pseudo-element selector----------*/

p::first-letter {

font-size: 2em;

color: rgb(0, 128, 17);

You might also like