Today was all about deepening my understanding of CSS, focusing on pseudo-classes, specificity, and the cascade. Here's a breakdown of what I learned and practiced:
Pseudo-Classes:
:first-letter: Targets the first letter of an element. This is useful for styling the initial letter of a paragraph or block of text.
:first-line: Applies styles to the first line of an element. This can help in creating distinctive headings or introductory sections.
:last-child: Selects the last child element of its parent. I learned how to use this to apply styles specifically to the last item in a list or container.
/* :first-letter */
p:first-letter {
font-size: 2em;
color: red;
}
/* :first-line */
p:first-line {
font-weight: bold;
color: blue;
}
/* :last-child */
ul li:last-child {
background-color: lightgrey;
font-style: italic;
}
The Cascade in CSS:
The cascade is the process by which browsers determine which CSS rules apply when multiple rules could apply to the same element. Understanding this helps in resolving conflicts and ensuring styles are applied as intended.
/* External or internal styles */
p {
color: black;
}
/* More specific rule */
p.special {
color: green;
}
/* Inline style (highest specificity) */
<p style="color: blue;">This is a paragraph.</p>
Selector Specificity:
Specificity Hierarchy: ID > Class > Element More specific selectors override less specific ones. For instance, IDs are more specific than classes, and classes are more specific than element selectors.
Equal Specificity: If two selectors have the same specificity, the cascading algorithm determines which one is applied, usually based on the order in which they appear in the CSS.
/* Element selector */
div {
color: gray;
}
/* Class selector */
.container {
color: darkgrey;
}
/* ID selector */
#main {
color: black;
}
/* Example HTML */
<div class="container">
<div id="main">This text will be black.</div>
</div>
Inline Specificity:
Inline styles have higher specificity than any other style rules. This means that styles added directly to an element via the style attribute will override those set in external or internal stylesheets.
The Importance of !important:
Using !important in CSS can force a style to override all other styles, regardless of specificity. While powerful, it should be used sparingly to avoid making the CSS difficult to manage.
/* Stylesheets */
p {
color: orange !important;
}
/* Inline style (highest specificity) */
<p style="color: purple;">This text will be purple.</p>
Inheritance in CSS:
Inheritance allows child elements to inherit styles from their parent elements. This can simplify the styling of nested elements and ensure consistency across a webpage.
/* Parent element */
.container {
color: green;
}
/* Child element */
.container p {
font-size: 1.2em;
}
/* Example HTML */
<div class="container">
<p>This text is green and larger due to inheritance and additional styling.</p>
</div>
Practice Exercises:
I applied these concepts in various exercises, experimenting with pseudo-classes, selector specificity, and inheritance. This hands-on practice was instrumental in solidifying my understanding.
/* Qs1. Give the h1 header a unique id - “mainTopic” & set its color to blue using the id
selector. */
#mainTopic{
color: blue;
}
/* Qs2. Align all the text in the page to the center using a universal selector. */
*{
text-align: center;
}
/* Qs3.Change the font style of all heading tags in the page to ‘Georgia’ */
h1,h3{
font-family: Georgia, 'Times New Roman', Times, serif;
}
/* Qs4. Set the color of all the paragraphs to white & background color to cornflowerblue.
(Without using the element selector - ‘p’) */
.styled-paragraph{
color: white;
background-color: cornflowerblue;
}
/* Qs5. Select all buttons inside div and change their background color to purple & text
color to azure. */
div button{
background-color: purple;
color: azure;
}
/* Qs6. Change the button background color to yellow & text color to blue when we hover
over it. */
button:hover{
background-color: yellow;
color: blue;
}
/* Qs7. Change the color of every odd numbered paragraph to yellow. (Paragraph 1 & 3) */
.styled-paragraph:nth-of-type(odd){
color: yellow;
}
/* Qs8. Change the color of the first letter of h1 heading to red. */
h1::first-letter{
color: red;
}
input[type="checkbox"]:checked+label{
color: green;
}