Here I'm exploring CSS topic.Let's take a look...

What is CSS? 👩‍💻

CSS stands for Cascading Style Sheets.If you are confident in writing HTML tags definitely you can go through CSS world.We can present the web pages more confidently by applying colors, layout, and fonts.Yea,It is totally about the presentation of a document.Let's take a look about Selectors.

Selectors

1.Individual Selector👈

Very Simple We can specify every tags in a document, with same styles to each element with the tag name.

//HTML
<h1>Welcome to CSS</h1>
  <p>Bootcamp</p>

//CSS
h1
{
  color:orange;
}
p{
  color:blue;
}

2.Universal Selector👈

We can reset the default styles of all browsers here.Selects every tags and elements.

//HTML
<body>
  <h1>hello World</h1>
  <p>Bootcamp</p>
</body>

//CSS
*
{
  background-color:orange;
  color:red;
}

3.Class and ID Selectors👈

For Class selectors there is an attribute "class" for every elements,we can give a class name to attribute class and in CSS that class can be styled with '.'

For ID Selectors there is an attribute "id"for every elements,we can give a id and in CSS that class can be styled with '#' .The id of an element is unique within a page, so the id selector is used to select one unique element!

//HTML
<h1>Welcome to <span class="boot-cmp">Bootcamp</span></h1>
<ul>
  <li id="cls">july class</li>
  <li>August class</li>
</ul>

//CSS
.boot-cmp
{
  color:blue;
}

#cls
{
  color:red;
}

4.Combined Selector👈

It is the combination of elements.We can easily seperate with ',' to the elements to perform particular styles.

//HTML
<h1>Welcome to <span>CSS</span></h1>
<ol>
  <li>Javascript</li>
  <li>SQL</li>
  <li>ReactJS</li>
</ol>

//CSS
span,li
{
  background-color:red;
}

5.Chained Selector👈

We can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.Then we can style with the combinations together easily.

//HTML
<ul>
  <li class="bg-black">Java</li>
  <li class="txt-black txt-red">C++</li>
  <li>ASP.net</li>
</ul>
<p>......These are the courses</p>

//CSS
i.txt-black.txt-red
{
  color:red;
}

6.CSS Combinators

Descendant selector👈 The descendant selector is a way to select elements that are located somewhere underneath other elements.This selector represents the ancestor element.

//HTML
<h1>Welcome to Bootcamp</h1>
<div>
<ul>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Java</a></li>
</ul>
<h2>CSS</h2>
</div>
<div>
<h2>C++</h2>
</div>

//CSS
div h2
{
color:red;  
}

child selector👈 This selector selects only the direct child of the selected element .

//HTML
<div>
<ul>
  <li><a href=#>Data</a></li>
  <li><a href=#>CSS</a></li>
  </ul>
</div>
<ul>
  <li><a href=#>cpp</a></li>
  <li><a href=#>ASP.net</a></li>
  </ul>

//CSS
div>ul>li
{
color:red;
}

adjacent sibling selector👈 Selects an element that is directly after another specific element.The elements are preceeded by '+' symbol

//HTML
<div>
  <h1>Bootcamp</h1>
  <ul>
    <li><a href=#>Data</a></li>
    <li><a href=#>CSS</a></li>
    </ul>
</div>
<ul>
    <li><a href=#>Data</a></li>
    <li><a href=#>CSS</a></li>
    </ul>

//CSS
div+ul
{
  color:red;

}

general sibling selector👈 selects all elements that are next siblings of a specified element.The elements are preceeded by '~' symbol

//HTML
<div>
<h1>Bootcamp</h1>
<ul>
  <li>Data</li>
  <li>CSS</li>
  </ul>
<h1>camp</h1>
</div>
<h1>Boot</h1>

//CSS
div~h1
{
color:blue;  
}

7.Pseudo Classes

hover👈 The most commonly used class in a webpage.And This selector is used to select elements when you mouse over them.

//HTML
<p>Would you like to join our quest?</p>
<button class="joinBtn">Confirm</button>

//CSS
.joinBtn:hover
{
  cursor: grab;
}

disabled👈 Like by name An element is disabled then it can't be activated.

//HTML
<input type="text" id="FirstField" value="Lorem">
<input type="text" id="SecondField" value="Ipsum" disabled="disabled">

//CSS
Input:disabled {
  color: blue;
}

8.Pseudo Elements

::selection👈 The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user.

//HTML
<p>Select a fragment of this paragraph, to see how its appearance is affected.</p>

//CSS
p::selection {
    color: red;
    background-color: yellow;
}

::after👈 This creates a pseudo-element that is the last child of the selected element.

//HTML
<p>Some times we use CSS in seperate file as style.CSS.</p>

//CSS
p::after {
  content: " - Remember this";
}

Seethal

Seethal

Here I'm exploring CSS topic.Let's take a look...

THANK YOU FOR READING