Notes
Notes - notes.io |
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Selectors Demo</title>
<!--Link an external stylesheet called main.css-->
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body>
<h1>CSS Selector's Demo</h1>
<hr>
<h3>An example of using a Id selector:</h3>
<!--Id selector on a paragraph tag-->
<p id="para1">This paragraph has an id of <i>para1</i>. It will be styled using the id attribute and will have styles that are unique to this element alone</p>
<p>This paragraph has no id attribute and does not have any styles applied</p>
<hr>
<h3>An example of using a class selector:</h3>
<!--class selector can be applied to one or many elements-->
<h4 class="subheading">This is a h4 element with the class <i>subheading</i></h4>
<h4 class="subheading">This is another h4 element with the class <i>subheading</i></h4>
<p class="subheading">This is a paragraph with the class <i>subheading</i>. It will have the same styles as the two h4 elements above since the styles are applied to any element that defines the class.</p>
<hr>
<!--Id and class selector can be used on any HTML element including images-->
<h3>Another example of using the id attribute but with images:</h3>
<p>The image below has an id attribute of <i>leaves</i> and we will apply styles to this image using the id selector. The other images on the page will be unaffected.</p>
<img id="leaves" src="images/leaves.jpg" alt="green leaves" />
<p>The other 2 images have a class of 'imgCenter' and we will apply styles to these images using the class selector
</p>
<img class="imgCenter" src="images/flowers.jpg" alt="yellow tulips" />
<img class="imgCenter" src="images/trees.jpg" alt="trees in the forest" />
<hr>
<h3>Some examples of using pseudo-classes: </h3>
<!--This p tag has id=hoverBlue. In our CSS we can use #hoverBlue:after to add styles that will only apply when your cursor is hovering over the element-->
<p id="hoverBlue">This p element uses the <code>:hover</code> pseudo-class combined with an id selector. Try moving your mouse over this text.</p>
<hr>
<p>This link will use the <code>:visited </code>pseudo-class to change the link color to red after the link has been visited
</p>
<!--We can use a:visited in our CSS code to add styles that will only apply if the link has been previously visited by the user-->
<a href="https://www.google.ca" target="_blank">Go to Google</a>
<hr>
<p>Here is an example of using the nth-child selector to apply a style to the 2nd list item</p>
<!--You can use #nthChild li:nth-child(2) to style only the Second Item-->
<ol id="nthChild">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
<li>Fifth Item</li>
</ol>
<hr>
<p>Here is an example of using the nth-child selector to apply different styles to even and odd elements</p>
<!--We can use #evenOdd li:nth-child(even) to apply styles to list items with an even numbered index-->
<!--Or #evenOdd li:nth-child(odd) to apply styles to list items with an odd numbered index-->
<ol id="evenOdd">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ol>
<hr>
<h3>Some examples of using pseudo-elements:</h3>
<!--the ::first-letter pseudo-element applies styles only to the first letter of the paragraph-->
<p id="firstLetter">This is a paragraph. The first letter will be styled differently than the rest. </p>
<!--the ::first-line pseudo-element applies styles only to the first line of the paragraph-->
<p id="firstLine">This paragraph uses the first-line pseudo-element. The first line of the paragraph will be styled differently than the rest. Any text that appears after the second line in the browser will not be styled. Note: this will change based on the size of
the browser window.</p>
<p>These paragraphs use the <code>:before</code> and <code>:after</code> pseudo-elements to add content before and after the element.</p>
<!--the ::before and ::after pseudo-elements are used to insert some content directly before/after the element-->
<p class="beforeAfter">Topic 1</p>
<p class="beforeAfter">Topic 2</p>
<p class="beforeAfter">Topic 3</p>
<hr>
<h3>Let's see an example of CSS Combinators:</h3>
<h4>CSS Combinators:</h4>
<div id="summary">
<p>use the relationship between 2 selectors to apply styles</p>
<p>There are 4 total:</p>
<div>
<p id="child">descendant combinator ( )</p>
<p>child combinator (>)</p>
<p>general sibling combinator (~)</p>
<p>adjacent sibling combinator (+)</p>
</div>
</div>
<br><br>
<!--Demonstrates wildcard selectors-->
<hr>
<h3>Let's see an example of CSS Wildcard characters:</h3>
<div>
<p class="asterisk-one">I am a paragraph with class=wildcard</p>
<a href="#">I am link that is an adjacent sibling to the paragraph above</a>
</div>
<div>
<p class="asterisk-two">I am a paragraph with class=wildcard</p>
<h3>I am a heading that is an adjacent sibling to the paragraph above</h3>
</div>
<br><br>
<div>
<p class="caret-one">I am a paragraph with class caret</p>
<p class="caret-two">I am a paragraph with class caret</p>
</div>
<br><br>
<div>
<p class="one-dollar">I am a paragraph with class dollar</p>
<p class="two-dollar">I am a paragraph with class dollar</p>
</div>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
