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>
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
.content:first-letter {
color: red;
}
So we have a child and a letter. Why not a:first-line pseudo-element selector too.
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
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 : https://specificity.keegan.st/
–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.