Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
CSS selectors are used to selecting HTML elements by matching each element of a given pattern. We define the styles by declaring property and their value inside the selector. Syntax The syntax for declaring styles is as follows − Selector { property: value; } For example − div { height: 200px; } Above, the selector is div. The property is the height and the value 200px. Selectors CSS has simple selectors, attribute selectors, pseudo-classes, pseudo-elements and a combination of selectors through standard combinators. Here are the selectors − ... Read More
CSS Pseudo Classes are representation of special states of different elements, these classes not only depict basic elements in document but also their external factors such status, position, history, etc. Using these pseudo classes developer can even style elements which cannot be directly selected via CSS selectors. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has ... Read More
The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc. These length units are categorised into Absolute and Relative Units. CSS Absolute Units The absolute length units are fixed in relation to each other. These units are used when the output format is already known. The following are some of the Absolute Length Units − Sr.No Unit & Description 1 cmcentimeters 2 mmmillimeters 3 ininches (1in = 96px = 2.54cm) 4 px *pixels (1px ... Read More
To return the height of an element, scrollable height, height including padding, border and scrollbar, then use these properties; clientHeight − The clientHeight gives the measure of the height of an element including the padding. Note that border, margin, and scrollbar height (if rendered) are not included in this. offsetHeight − The offsetHeight gives the measure of the height of an element including the vertical padding, top and bottom borders. Margin is not including here. scrollHeight − scrollHeight gives the measure of the height of an element including the vertical padding and the content which is not visible on ... Read More
With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript. The infinite effect is also set. The custom function will get called and the words will get display with the effect. At the end, those words will get deleted using another custom function. Set a div for the text and cursor First, a parent div container is set with the element. One of the will have text and another the cursorL | Style the element A professional font is ... Read More
One or more boxes are generated for every element in a document tree after processing it under visual formatting model. A generated box has certain CSS properties associated with it and is accordingly rendered in HTML. To display elements, the following are the two common values − block − Starts on a new line. Takes the full available width Inline − Does not start on a new line. Tales only the required width The following boxes are generated in CSS − Block-level Elements and Block Boxes Anonymous block boxes Inline-level Elements and Inline Boxes Anonymous inline boxes ... Read More
We can use CSS clear property to specify the side of the floated element which is to be cleared of flowing content. If you want to control the element next to a floating element, then use the clear property. Syntax The following is the syntax of the float property − clear: value; The value can be − none − The element is not set below left or right floated elements. Default. left − The element is set below left floated elements right − The element is set below right floated elements both − The element is set ... Read More
We can define the height and width exclusively for the element’s content, though these properties do not include margins, paddings or borders. Syntax The syntax of CSS height property is as follows − Selector { height: /*value*/ } The syntax of CSS width property is as follows − Selector { width: /*value*/ } Example Let us see an example of width and height properties − CSS height and width * { ... Read More
The padding property in CSS allows you to set the padding for padding-top, padding-right, padding-bottom, padding-left. It is a shorthand property. For example padding:10px 5px 7px 10px; Here, top padding is 10px right padding is 5px bottom padding is 7px left padding is 10px Syntax The syntax of CSS padding property is as follows − Selector { padding: /*value*/ } The value can be − padding-top padding-right padding-bottom padding-left The following examples illustrate CSS padding shorthand property − Padding property with all the values The padding property with all ... Read More
The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element’s dimensions, unlike border property. Syntax The syntax of CSS outline-width property is as follows − Selector { outline-width: /*value*/ } The value can be thin, thick, medium or a length unit. NOTE − The outline-style property needs to be defined before declaring outline-width. Set a thin outline Let’s see an example for the outline-width property. We have set a thick outline here using the thin value ... Read More