Using the combination of Percentage and Em in CSS

AmitDiwan
Updated on 02-Jan-2024 19:13:10

256 Views

We can use a combination of percentage and em to specify the font-size of elements for better compatibility of font. This allows us to have uniform text across different browsers. Both percentage and em are relative measurements. Syntax The syntax of CSS font-size property is as follows. The below works for both the percentage and em units in place of value. Also, other length units can also be set − Selector { font-size: /*value*/ } Example The following example illustrate how CSS font-size property can be set. First, we have set the font using ... Read More

Using CSS :placeholder-shown to Customize Styles for Empty Text Input

AmitDiwan
Updated on 02-Jan-2024 19:08:16

221 Views

To customize the style for the input textbox having a placeholder, we use the :placeholder-shown pseudo-class of CSS. Placeholder text is a hint for the user to understand what is to be typed in the input text field. The following examples illustrate CSS :placeholder-shown pseudo-class. Set the border for the text field The border for the text field is set using the border-color property. Place it inside the placeholder-shown pseudo-class as shown below − input:placeholder-shown { border-color: dodgerblue; } Example Let us see the example − ... Read More

Universal Selector in CSS

AmitDiwan
Updated on 02-Jan-2024 19:06:30

1K+ Views

The CSS * selector is a universal selector which is used to select all elements of the HTML DOM. If you want to set a similar style for the entire document, then use the Universal selector. Syntax The syntax for CSS universal selector is as follows: Place the styles you want to set for the entire HTML document − * { /*declarations*/ } The following examples illustrate CSS universal selector − Set the margins and padding for the document To set the margins and padding settings for all the elements on the web page, set ... Read More

Understanding the Flex Layout Model in CSS3

AmitDiwan
Updated on 02-Jan-2024 18:41:26

104 Views

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction − Set the direction of the flex items flex-wrap − Set whether the flex items should wrap or not flex-flow − It is a shorthand property for flex-wrap and flex-direction justify-content − Align the flex items align-items − Vertically align the flex items align-content − Align flex lines Set ... Read More

Understanding the difference between CSS Border and Outline

AmitDiwan
Updated on 02-Jan-2024 18:40:00

890 Views

The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Borders for individual sides can be styled and a border-radius can also be specified. On the other hand, the CSS outline doesn’t take up space and is displayed around the border if set. It supports offset. Further, we can’t specify if individual sides should have an outline or not. By default, both borders and outlines are not displayed. Syntax The syntax for CSS border and outline property is as follows − Selector { ... Read More

Communicating Between Threads in Python

Niharika Aitam
Updated on 02-Jan-2024 18:25:22

272 Views

Communicating between threads in Python involves exchanging data or signals between different threads of execution. There are several mechanisms available for inter-thread communication in Python, including shared data structures, synchronization primitives, and message passing. Let's explore these mechanisms in detail. Shared Data Structures Shared data structures allow threads to read and modify shared data. However, care must be taken to ensure thread safety and avoid race conditions. Some commonly used shared data structures in Python are as mentioned below. Locks (threading.Lock) − A lock provides mutual exclusion, allowing only one thread to acquire the lock at a time. It ... Read More

Understanding CSS Selector and Declarations

AmitDiwan
Updated on 02-Jan-2024 18:23:53

353 Views

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

What is Pseudo-class in CSS

AmitDiwan
Updated on 02-Jan-2024 18:04:55

135 Views

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

Understanding CSS Absolute and Relative Units

AmitDiwan
Updated on 02-Jan-2024 18:02:08

209 Views

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

Understanding clientHeight, offsetHeight & scrollHeight Properties in CSS

AmitDiwan
Updated on 02-Jan-2024 17:55:31

1K+ Views

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

Advertisements