Start CSS with CSS Selector: CSS Basic
Published: 2023-02-03 19:35:01

<h4>This article is very essential for your CSS skill, you know why?</h4><p><strong>because CSS is all about targeting an element from a webpage and styling it. and in this article, we will learn various ways to target/select an element.</strong></p><p><em>hope you are excited enough to read this article now,</em></p><p><strong><em>The Pre-req of this article is you know the basics of HTML. if you don’t know anything about HTML go through the below article first</em></strong></p><p><a href="https://medium.com/@viveksinra/start-web-dev-with-basic-html-4555b3742f59">Start Web Dev With Basic Html</a></p><p>before we begin let’s see where to write CSS.</p><h3>CSS can be added to HTML documents in 3 ways:</h3><ul><li><strong>Inline</strong> — by using the style attribute inside HTML elements</li></ul><pre><h1 style="color:blue;">A Blue Heading</h1><br><br><p style="color:red;">A red paragraph.</p></pre><ul><li><strong>Internal</strong> — by using a <style> element in the <head> section</li></ul><pre><!DOCTYPE html><br><html><br><head><br><style><br>body {background-color: powderblue;}<br>h1   {color: blue;}<br>p    {color: red;}<br></style><br></head><br><body><br><br><h1>This is a heading</h1><br><p>This is a paragraph.</p><br><br></body><br></html></pre><ul><li><strong>External</strong> — by using a <link> element to link to an external CSS file</li></ul><p>An external CSS file is simply a text file with a .css file extension that contains CSS code. To use an external CSS file, you need to link it to your HTML document using the link element, which should be placed within the head section of the HTML document.</p><pre><head><br>  <link href="styles.css" rel="stylesheet"><br></head></pre><p><strong>the complete HTML file will look like this</strong></p><pre><!DOCTYPE html><br><html><br><head><br>  <link rel="stylesheet" href="styles.css"><br></head><br><body><br><br><h1>This is a heading</h1><br><p>This is a paragraph.</p><br><br></body><br></html></pre><p>and<strong> <em>style.css</em> </strong>file will look like this</p><pre>body {<br>  background-color: powderblue;<br>}<br>h1 {<br>  color: blue;<br>}<br>p {<br>  color: red;<br>}</pre><h3>Now we know where to write CSS, let’s start CSS with CSS Selector</h3><p>Let’s Create an index.html and write some HTML below:</p><pre><!DOCTYPE html><br><html lang="en"><br>  <head><br>    <meta charset="UTF-8" /><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge" /><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><br>    <title>CSS Selector</title>    <br>   <br>  </head><br>  <body><br>    <div>let's start CSS with CSS Selector</div><br>    <span>Span is just a span, nothing more</span><br>    <p>We all know paragraph</p><br>    <ul><br>      <li class="bg-black text-white">item1</li><br>      <li >item2</li><br>      <li >item3</li><br>      <li >item4</li><br>      <li>item5</li><br>    </ul><br><br>    <div><br>      <p>lorem</p><br>      <li>awesome</li><br>      <ul><br>        <li>highlight me <a href="#">test</a></li><br>        <li>highlight me</li><br>      </ul><br>    </div><br><br>    <section><br>      <p class="sibling">Test 1</p><br>      <p >Test 2</p><br>      <p>Test 3</p><br>      <p >Test 4</p><br>      <p>Test 5</p><br>    </section><br>  </body><br></html></pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/897/1*lZffGBoT677pyLXeaHTROg.png" /></figure><p><em>for this case, we will use Internal CSS.</em></p><p><strong>Step1: Add Style tag in the head</strong></p><pre><style><br>    <br>   </style></pre><p>now to style any tag we need to first select that element and write the CSS inside style tag, so let’s see the different types of selectors we have for this purpose:</p><p>CSS selectors are used to select the elements on an HTML page that you want to style. There are several types of selectors available, each with its own specific use case. now, we will discuss the following types of selectors:</p><ol><li><strong>Universal selector:</strong> The universal selector, represented by the asterisk (<em>), selects all elements on the page. For example,</em></li></ol><pre>{ background-color: #4d4d4d; }</pre><ul><li>This selector selects all elements on the page and sets the background color to a dark gray (#4d4d4d).</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AnOJjxl_93ZNDxOUsw7N9w.png" /></figure><p><strong>2. Individual selector:</strong> An individual selector selects a specific element on the page. For example,</p><pre>p { background-color: #d1ea76; }</pre><p>This selector selects all <p> tags and sets the background color to a light green (#d1ea76).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Mx7manov0yVMJATUBAHFHQ.png" /></figure><p><strong>3. Class and ID selector:</strong> Classes and IDs are used to select specific groups of elements on the page. Classes are represented by a period (.) before the class name, while IDs are represented by a hash (#) before the ID name. For example,</p><pre>.warning {<br>background-color: #ef9323;<br>color: #FFFFFF;<br>}<br>#danger {<br>background-color: #e93916;<br>color: #FFFFFF;<br>}</pre><p>add below part in HTML body part</p><pre>  <h4 class="warning">with warning class</h4><br>    <h3 id="danger">With danger id</h3></pre><p>This selector selects elements with the class “warning” and sets the background color to an orange (#ef9323) and text color to white, and selects the element with the id “danger” and sets the background color to a red (#e93916) and text color to white.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/742/1*VKOOjCXt0dcJ-2xcV4RFbQ.png" /></figure><p><strong>4. And selector (chained):</strong> The and selector, represented by a space between selectors, selects elements that match multiple selectors. For example,</p><pre>li.bg-black.text-white{<br>background-color: #000;<br>color: #ef9323;<br>}</pre><p>This selector selects <li> elements that have both the class “bg-black” and “text-white” and sets the background color to black (#000) and text color to orange (#ef9323).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/834/1*BkrGjBx2P80EykfIsm_UBg.png" /></figure><p><strong>5. Combined selector:</strong> The combined selector, represented by a comma between selectors, selects elements that match any of the selectors. For example,</p><pre>span, li {<br>background-color: burlywood;<br>}</pre><p>This selector selects <span> and <li> elements and sets their background color to burlywood.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/861/1*Q4AtiqFRcxbnrQCRbRPZCQ.png" /></figure><p><strong>6. Inside an element:</strong> The selector “element1 element2” allows to select element2 that is inside of an element1, For example</p><pre>div ul li {<br>background-color: #4b35f1;<br>}</pre><p>This selector selects <li> elements that are inside of a <ul> element, which is inside of a <div> element, and sets the background color to purple (#4b35f1).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/697/1*M7vgrQ4LChJgW24afRUltQ.png" /></figure><p><strong>7. Direct child:</strong> The selector “element1 > element2” allows to select element2 that is direct child of element1 , For example</p><pre>div > ul > li{<br>background-color: #7667e4;<br>}</pre><p>This selector selects <li> elements that are direct children of <ul> elements, which are direct children of <div> elements and sets the background color to a light purple (#7667e4).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/830/1*yHS9p5Czo6RxKtA7YMs4OA.png" /></figure><p><strong>8. Sibling selector:</strong> The selector “element1 ~ element2” or “element1 + element2” allows to select element2 that is a sibling of element1. For example</p><pre>.sibling + p {<br>background-color: pink;<br>}</pre><p>This selector selects <p> elements that are immediately following a sibling element with class “sibling” and sets the background color to pink.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/693/1*zVJMmzwNB2zmCHuQV-VM4Q.png" /></figure><h4>These are just a few of the many types of CSS selectors available. By understanding the different types and how to use them, you can create powerful and effective styles for your web pages.</h4><p><strong>It’s worth noting that these styles will be applied only to the elements that match the conditions defined in the selectors and will overwrite any previous styles that were applied to them.</strong></p><p><a href="https://github.com/viveksinra/FSJS_LEARNING/blob/master/css/05_css_12_nov/selector.html">GitHub Code Link</a></p><p>CodePen Code —</p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fviveksinra%2Fembed%2Fpreview%2FOJwjNww%3Fdefault-tabs%3Dhtml%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DOJwjNww&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fviveksinra%2Fpen%2FOJwjNww&image=https%3A%2F%2Fshots.codepen.io%2Fviveksinra%2Fpen%2FOJwjNww-512.jpg%3Fversion%3D1673769432&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=codepen" width="800" height="600" frameborder="0" scrolling="no"><a href="https://medium.com/media/ca92966e5932b95091c75e9bf00c948c/href">https://medium.com/media/ca92966e5932b95091c75e9bf00c948c/href</a></iframe><p>GitHub Link for Learning Html: <a href="https://github.com/viveksinra/FSJS_LEARNING/tree/master/html_only">https://github.com/viveksinra/FSJS_LEARNING/tree/master/html_only</a></p><p>GitHub Link for Learning CSS:</p><p><a href="https://github.com/viveksinra/FSJS_LEARNING/tree/master/css">https://github.com/viveksinra/FSJS_LEARNING/tree/master/css</a></p><p>GitHub Link for Learning FSJS:</p><p><a href="https://github.com/viveksinra/FSJS_LEARNING">https://github.com/viveksinra/FSJS_LEARNING</a></p><p>Thank you for reading this blog, hope it’s helped you.</p><p>Please consider following me.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=3f4385f864fd" width="1" height="1" alt=""></br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>