Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules. The [attribute] Selector The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled − a[target] { ... Read More

CSS can help us style the first letter of an element using the ::first-letter pseudo-element. Note that punctuation marks, digraphs and content property can change the first-letter. The following examples illustrate CSS ::first-letter pseudo-element. Style the first letter The first letter of all the elements, such as and ... Read More

Using CSS pseudo selectors, namely, :active, :hover, :link and :visited, we can style different states of a link. For proper functionality, the order of these selectors is given by:- :link, :visited, :hover, :active. Syntax The syntax of CSS text-indent property is as follows − a:(pseudo-selector) { ... Read More

We can style links as per our requirements. It is recommended that links have styles which distinguish them from normal text. The default link styles for different link states is as follows − Link State Color active #EE0000 focus #5E9ED6 or a similar shade ... Read More

Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document. The following are some examples to implement ... Read More

To specify word breaking rules in CSS3, use the word-break property. This property is used to break the line. Let us see the syntax − word-break: value; The values include normal − The default line break rules. break-all − The word is broken at any character ... Read More

CSS caret-color, pointer-events and tab-size are some of the lesser-known properties for form input fields. caret-color property allows us specify color of blinking caret while pointer-events can help prevent the users to find an element. Finally, tab-size sets the amount of white space used by tab. The following examples illustrate ... Read More

The CSS scroll-behavior property allows us to change the behavior of scroll. The following are the values are set within the scrolling box − auto − A scroll effect is set between the elements within the scrolling box. Smooth − A smooth animated scroll effect is set between the ... Read More

To set the size of the radial gradient, use the radial-gradient() function. This function sets a radial gradient as the background image. The second parameter in the function is to be set as the size you want as in the below example − background-image: radial-gradient(40% 50px at center, rgb(30, ... Read More

To create linear gradient, use the linear-gradient() method of the background-image property. Syntax The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors ... Read More