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

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

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.