CSS on Red-bull


Posted By : Sunny

Added :

2 Comments


CSS
Photo by Tracy Adams on Unsplash

So, I know basic HTML and CSS. Can build out basic stuff. Scratched the React domain. Can deliver stuff, not sure if they are ‘the right way’ to get it done. Educative was throwing in a free course https://www.educative.io/courses/the-complete-advanced-guide-to-css/YQ73Mrg3Dz2 and I thought, let’s learn a bit more CSS. Code snippets are inspired by the course. Before we go further, this is not a paid promotion of the course. But, recommended.

<body>
 <div>
 <p>I am a noob</p>
<p>I am not a noob</p>
<p>I am definitely a noob</p>
 </div>
</body>

Rule of firsts

Let’s say we have to highlight the first element “ I am a noob”. If you think in js/react inside your map function may be on index 0 do magic stuff. How about we do it from CSS. 
div p:first-child {
 color: red
}

There is also last-child and only-child

  • Wait there is more, hold your breath for 
    li:nth-child(2) {
     color: black
    }
  • Just when you thought, we are done 
    li:nth-child(2n+1) {
     color: red;
    }

So we have a first-child and we also have first-letter

CSS
.content:first-letter {
 color: red;
}


So we have a child and a letter. Why not a:first-line pseudo-element selector too. 

Attribute Selectors.


Going further, you can style based on Attribute Selectors. Wait what are attribute selectors?

 “ The [attribute="value"] selector is used to select elements with a specified attribute and value” . — https://www.w3schools.com/css/css_attribute_selectors.asp

a[target=”_blank”] {
 background-color: yellow;
}

Check it here in action : https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_attribute_value2

Did you already knew? I was blown away

Before was before after

Then there are ::before and ::after pseudo-elements 

p::before {
 content: “Read this -”;
}
<p>My name is Donald</p>

So what will happen in output, before text will appear automagically

Check this here : https://www.w3schools.com/cssref/sel_before.asp

Give me some css points

  • There is a point system in place to calculate CSS specificity. Points help in deciding what style rule will win the game.
CSS

Check : https://specificity.keegan.st/

More CSS power to you


–Struggling with maintaining aspect ratio of background images. 
background-size: cover is your friend.

— CSS has support for variables also, the variable name must start with two dashes “ — — “ and it is also case sensitive

:root {
 — —
some-color: red;
}
#div1 {
 background-color: var( 
— — some-color);
}

There is a lot more magic to CSS. Leaving you all with a mild googling exercise 
“ box-sizing: border-box;” 

Keep on Learning. 

For any query you can contact us by clicking on this link.

0 0 votes
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Satyendra Gupta
Satyendra Gupta
3 years ago

I just have one query. When we have easy to use and easy to understand Bootstrap, learning CSS concepts form the scratch would be useful or essential?