For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Machine Learning Engineering (16 weeks)
Full-Stack Software Developer
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
Completing a stylesheet is like having a little war between selectors, you are constantly overriding previously defined styles with new ones:
This happens all the time and, at some point it, can be challenging to override previous styles. You must organize your styles properly and start from the least specific to the most specific.
This "very specific" selectors will help you a lot. They will be your best weapon when fighting your styles war!
This statement takes the paragraph tags that are children of the
div and turns them blue. Note that it only works for the children of that div, not necessarily for all of the descendants. Let’s explore this further with the following example.
We used the adjacent sibling selector to change the second and third paragraph to red. This seems very tricky, doesn’t it? Instinctively, we would expect the first paragraph to be red as well. After all, the first paragraph is on the same level as the next two, and, has siblings.
However, this selector only applies to elements that are preceded by something else. In this instance, only the paragraphs preceded directly by a sibling paragraph will be targeted.
The first paragraph in the list is preceded by the
div, so it remains unchanged.
The previous CSS code turns red every element inside a specific div, this includes items such as links, that have a default color set to something else and wouldn’t be affected by simply targeting the div.
You can take this as far as you want; the following targets the "grandchildren" of the div. You will find this chaining method used frequently in CSS debugging tricks.
If we want to change the font color of the "Design Shack" link, we could use :pseudo selectors. However, doing so would assume that the list stays in that order, and, browser support isn’t the best.Instead, what we can do is use an attribute selector to target the specific
href that we’re interested in.
The following code targets any
div with the word "section" in the title. It can be "section3" or "section-Four", it doesn’t matter. As long as it contains the indicated string, the subsequent styles will apply.
You can assign a different color to any link on the website, depending on its status:
:link default color, before clicking on it.
:visited after clicking the link.
:hover when the cursor is over the link.
:active when the cursor is clicking on the link.
It is very important to take enough time to style our forms. Styling is the best way to tell the user that one input is either disabled, checked, or that the cursor is over a particular input.
You can apply styles to elements based on their position.
|:active||a:active||Selects the active link|
|:checked||input:checked||Selects every checked |
|:disabled||input:disabled||Selects every disabled |
|:empty||p:empty||Selects every |
|:enabled||input:enabled||Selects every enabled |
|:first-child||p:first-child||Selects every |
|:first-of-type||p:first-of-type||Selects every |
|:focus||input:focus||Selects the |
|:hover||a:hover||Selects links on mouse over|
|:invalid||input:invalid||Selects all |
|:lang(language)||p:lang(it)||Selects every |
|:last-child||p:last-child||Selects every |
|:last-of-type||p:last-of-type||Selects every |
|:link||a:link||Selects all unvisited links|
|:not(selector)||:not(p)||Selects every element that is not a |
|:nth-child(n)||p:nth-child(2)||Selects every |
|:nth-last-child(n)||p:nth-last-child(2)||Selects every |
|:nth-last-of-type(n)||p:nth-last-of-type(2)||Selects every |
|:nth-of-type(n)||p:nth-of-type(2)||Selects every |
|:only-of-type||p:only-of-type||Selects every |
|:only-child||p:only-child||Selects every |
|:root||root||Selects the document’s root element|
|:target||#news:target||Selects the current active #news element (clicked on a URL containing that anchor name)|
|:valid||input:valid||Selects all |
|:visited||a:visited||Selects all visited links|
🔗 Great reading about CSS Selectors: The 30 CSS selectors you must memorize