Basic Pseudo-elements in CSS

Tweet

Pseudo-elements are another CSS selectors that is used to style the HTML elements. It contains pseudo selectors like first-letter, first-line which are used as styles and also :before and :after selectors which are used to insert additional texts into the HTML elements. Note that, this style cannot be applied on inline styles.

1. First-letter

In various newspapers and magazines, you may have come across the typographic effect where the first letter in the starting paragraph would appear bold, big and also with different font style. Similarly, the :first-letter pseudo-element gives you the functionality to style the first or starting letter of the element that is denoted.

#firstpara:first-letter {
    font-size:300%;
    color: orange;
}

You can see that the first letter in the paragraph has changed according to the style applied.

2. First-line

The first-line pseudo element is a style that can be applied to the first line of the element.

#firstpara:first-line {
    font-variant: small-caps;
    color: green;
}

You can see the changes that happened to the first line in the paragraph.

3. Before and After

The :before and :after pseudo elements are used to add texts before or after the specified element. In the course, this is now also used for many style functionalities.

<!-- This is HTML code -->
<p id="para">, your age is </p>

/* This is CSS code */
#para:before {
    content: "Balaji";
    color: green;
}

#para:after {
    content: "21.";
    color: green;
}

You can see from HTML code, where there is only ', your age is ' texts. Then the :before pseudo-element applies the 'Balaji' texts before the HTML content and the :after pseudo-element applies '21.' after the HTML content.

Note that it is mandatory to use the 'content' property in before and after pseudo-elements, or it would have no value in CSS styles.

Basic Pseudo-classes in CSS

Tweet

Pseudo classes are CSS styles that is applied on HTML elements. They give some functionality to the HTML element either statistically or dynamically with or without certain physical movements by using mouse pointers etc. But, you must understand that this style cannot be used as inline styles.

1. Hover

Hover pseudo-class is most popularly used in anchor links. But this pseudo class can also be used in other HTML elements.

p:hover {
    background-color: yellow;
}

The above code explains how a paragraph has a normal state but changes its current state when the mouse pointer hovers or moves around that particular element. This can similarly be applied to other elements in HTML.

2. Focus

Well when hover pseudo class is used for dynamic mouse movements, focus pseudo class can be used as dynamic selectors with either tab or mouse clicks for a particular element.

a:focus {
    background-color: orange;
    color: #333;
    text-decoration: none;
}

Other than link elements, focus pseudo-class can also be used in forms. They are mostly used under input elements, textarea, etc...

input:focus , textarea:focus {
    border: 1px solid orange;
    background-color: yellow;
}

Due to inconsistencies among different browsers and adaptability to various devices, it is better to use focus pseudo-class with other close relational pseudo-classes like hover and active. This gives flexibility and credibility to the styles you apply.

An example style will look like,

a:hover,a:focus,a:active {
    background-color: orange;
    color: #333;
    text-decoration: none;
}

3. First-child

First-child pseudo-class helps to style the first element along its identical sibling elements.

Let's look an example HTML code first,

<p><strong>Love</strong> doesn't make the world go around. <strong>Love</strong> is what makes 
the ride worthwhile.</p>

Now applying first-child pseudo element on the strong element,

p strong:first-child {
    color: orange;
}

You can see that the style applied is only applied on the first strong attribute and not the second one because of the first-child pseudo-class.

Understanding classes and ID

Tweet

Classes and ID's give more flexibility to style only the required tags from many similar element properties. You may want all the p tags in a webpage to have similar styles, but if a necessity arises to style some particular p tags, then we need to use classes or ID's. These classes and ID's, when mastered gives wide possibilities of styling your webpage.

Using Classes

To apply class to HTML, you need to add class attribute to the specific elements that you need to style. The value for this attribute can be any name that you define.

<p class="color">   some texts missing...   </p>

<p>   some texts missing...   </p>

<p class="color">   some texts missing...   </p>

Things to remember when applying class to HTML,

• The class value must start with a letter.
• Class name must only have letters, numbers, hyphens and underscores.

Now, let's see how to apply styles to classes

.color {
    width: 500px;
    color: orange;
}

Things to remember when using classes in CSS,

• To define a class in CSS, it must always begin with a period and that's how web browsers spot a class selector in the style sheets.
• After the period, the class name must be same as it is used in HTML.
• Class names are case-sensitive. That means .color is different from .COLOR.

Now the styles are applied only to the specified class names. In this way, classes can be applied to any element in HTML including div and span.

Using ID's

Just like classes, ID's also have similar functionalities. But the difference arises in where and when we should use our ID's. Otherwise, ID's are used for some simple Javascript solutions.

<div id="footer">

     <!-- some codes missing -->        

</div>

Things to remember when applying an ID to HTML,

• The ID name must start only with a letter and can have letters, numbers, hyphens and underscores(just like classes).
• Identify and use ID's on the unique parts that occurs only once per webpage, like a header, footer, etc...

Note: Even if you apply an ID to multiple elements in HTML, the browsers won't blow up and it will also style correctly. But this is certainly a very bad practice and you must stop doing it.

#footer {
   border-radius: 3px;
   background-color: #ccc;
   color: #333;
}

Things to remember when using ID's in CSS,

• The ID's must be defined by starting with a hash symbol in the style sheets.
• Then the ID name must be same as in the HTML.
• ID names are case-sensitive. That means #footer is not same as #FOOTER.

Using Multiple Classes and ID's to a single element

Sometimes, an HTML element needs to hold multiple classes or ID's as attributes. In those cases you can use another class or ID name in the same attribute with a space inbetween those values. This rule can be applied for multiple values similarly.

<p class="color box">
     <!-- some codes missing -->
</p>

<div id="home tabs">
     <!-- some codes missing -->
</div>

In the above code, two class names color and box are defined in a single attribute and similarly two ID names home and tabs in a single ID attribute.