To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with example. Both of them allows selecting sibling elements with HTML and CSS. Adjacent sibling selector Use the adjacent sibling selector (+), if we want to match the element which occurs immediately after the first selector. Here, both selectors are children of the same parent element. The syntax of the CSS adjacent sibling combinator is as follows − Selector + Selector{ attribute: /*value*/ } The following example illustrate CSS adjacent combinator property. ... Read More

The CSS ::first-line pseudo-element helps us style first line of an elementThe following examples illustrate CSS ::first-line pseudo-element.Example Live Demo body {    text-align: center;    background-color: darkorchid; } ::first-line {    font-size: 2em;    color: black;    font-weight: bold;    text-shadow: 0 -10px grey; } Donec rutrum a erat vitae interdum. Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec ... 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 here are styled using the ::first-letter pseudo element − ::first-letter { font-size: 3em; color: sienna; box-shadow: -10px 0 10px green; background-color: gainsboro; } Example Let us see the example − ... Read More

By defining the CSS word-spacing property, we can set the amount of white space between the words. The whitespace between the words can be increased or decreased. It can be set in the following CSS units: px, pt, em, cm, etc. Let us see the syntax. Syntax The following is the syntax of the word-spacing property − word-spacing: value; The value can be − normal − Normal spacing between words length − Space between words set in pt, px, cm, etc. The following examples illustrate CSS word-spacing property. Word Spacing in cm The word spacing ... 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 elements The following examples illustrate CSS scroll-behavior property. Scroll Behavior Smooth The scroll behavior is set to smooth for the div container − #parent { scroll-behavior: smooth; width: 250px; height: 200px; overflow-y: scroll } The ... Read More

Using the CSS letter-spacing property, we can specify the amount of space between letters of text. The letter spacing can be set in px, em, etc. length units. Let us see the syntax. Syntax The following is the syntax of the letter-spacing property − letter-spacing: value; The value can be − Normal − Normal space between characters. Length − A length for the space between the characters The following examples illustrate CSS letter-spacing property − Set letter spacing in em In this example, we have set the spacing between letters using the . An em is ... Read More

By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property. Aspect ratio for videos with the padding-top property Use the padding-top property to set the aspect ratio of an element on a web page. Here is the CSS padding property − The padding-bottom specifies the bottom padding of an element. The padding-top specifies the top padding of an element. The padding-left specifies the left padding of an element. The padding-right specifies the ... Read More

Using the CSS hyphens property, we can specify how hyphens are added in text. The hyphens property values can be − none − The words not hyphenated manual − The words are hyphenated at ‐ or ­ The default. auto − The words are hyphenated where the deciding factor is the algorithm The hyphen can be set like this − It can also be set like this. Totally depends on the text form − Let us see some examples − Words are Hyphenated Manually The following example illustrate CSS hyphens property where the word are hyphenated ... Read More

CSS tab-size property allows us to set the amount of whitespace used in tabs. The width of the tab character can be customized easily. The value set for the tab size is in spaces. Let us see the syntax. Syntax tab-size: value; The value above is the number value set for tab space. The following examples illustrate the CSS tab-size property. Example Here, we have set the tab size to 32 using the tab-size property − tab-size: 32; The tab size for the firefox is also set − -moz-tab-size: 32; Let us see ... Read More

The cursor can be easily changed in CSS. For that, use the caret-color property. This will allow you to change the color in textarea, input, etc. The following examples illustrate the CSS caret-color property to change the cursor color on a web page. Change the Cursor Color of the Input Element The input is the field where data is entered by the user. To change the cursor color, the is set with the caret-color property − input { font-size: 3em; caret-color: chartreuse; margin: 2%; } Here is ... Read More