Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The opacity property is used to create a transparent textbox. Set an image in the transparent box using the background property. Since, we have set the opacity, it will make the text and image appearing in the text box to be transparent. Create a div container A div container is set − This is some random text inside the transparent box Transparent textbox Within the above parent div, the textbox child div is set − This is ... Read More
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] { background-color: red; color: white; } Example Let us see the example − a[target] { background-color: red; ... 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
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) { /*declarations*/ } The following are some key Pseudo-classes for links − :active = To select the active link :hover = To select links on mouse over :hover = To select links on mouse over :valid = To select elements with a valid value :visited = To select ... 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 of blue outline in case of Windows and Mac, #F07746 outline for Linux while text color remains the same hover #0000EE link #0000EE visited #551A8B Note − The above colors may change with newer versions of browsers. For proper functionality, the ... 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 the z-index property. z-index In this example, we have set a positive z-index value to stack − Example .dropbtn { background-color: rgb(76, 78, 175); ... 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 only if overflow occurs break-word − The word is broken at arbitrary-points to prevent overflow The following are the codes for specifying word breaking rules using CSS3 − Normal Word Breaking Rule The normal word breaking rule is the default rule − word-break: normal; Example Let us ... 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 some of these properties. The tab-size property 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. tab-size: value; ... 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
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, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32)); Possible values are farthest-corner (default), closest-side, closest-corner, and farthest-side. Following is the code for setting the size of the radial gradients using CSS. Let us first see the complete syntax of the radial gradient. Syntax The following is the syntax of ... Read More