Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Web Development Articles
Page 274 of 801
The margin Shorthand Property in CSS
The CSS margin shorthand property is used to define the margin area for an element. It sets values in clock-wise direction, i.e., margin-top, margin-right, margin-bottom and then margin-left. Syntax The syntax of CSS margin property is as follows − Selector { margin: /*value*/ } The value above can be − margin-top margin-right margin-bottom margin-left The following examples illustrate CSS margin shorthand property − Margin property with all the values The margin property with all the values sets values for the top, right, bottom, and left properties − margin: 7% auto -3% 25%; ...
Read MoreThe CSS3 scale3d() Function
The scale3d() function is used to scale an element in 3D space. The element is scaled based on numbers set as parameter. Syntax The following is the syntax of the scale() method − scale3d(x, y, z) Above, x, y, z is the x-axis, y-azis, and z-axis. Scale an image Let us now see another example. In this, we will scale an image using the x, y, and z values in the scale3d() method − .scale3d_img { transform: scale3d(-1.4, 0.4, 0.7); } Example Let us see the example − ...
Read MoreThe CSS translate() Function
The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function. Syntax The syntax is as follows − Transform: translate(x, y) Above, transform the element along with x-axis and y-axis. Translate an image In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property − .translate_img { transform: translate(50px, 20px); } Example Let us now see the ...
Read MoreThe CSS scale() Function
The scale() function in CSS is used to define a transformation that resizes an element on the 2D plane. Set the amount of scaling in each direction as the parameter of the scale() function. The transform property is used to set the scale. Syntax The following is the syntax of the scale() − transform: scale(width, height); Above, scale along the width and height. Increase the image size In this example, we have set the transform property to scale the image size. The scale(1.2, 1.3) will increase the height and width of an image − transform: scale(1.2, 1.3); ...
Read MoreThe CSS rotate() Function
The rotate() function in CSS rotates an element. The parameter sets the angle for rotation. Values can be degrees, radians, etc. The transform property is used to set the rotation. Syntax The following is the syntax of the rotate() − transform: rotate(angle); The angle is set as a parameter, such as 45deg, 90deg, etc. Rotate an element by 45 degrees To rotate an element by 45 degrees, use the rotate() function − transform: rotate(45deg); Example Let us see the example − #demo1 ...
Read MoreThe border-width Property in CSS
The CSS border-width property is used to specify the width for border of an element. We can also set width for individual sides using the following properties − border-top-width border-right-width border-left-width border-right-width Syntax The syntax of the CSS border-width property is as follows − Selector { border-width: /*value*/ } The value can be thin, thick, or medium. Set a thick border The following example illustrate CSS border-width property. The thick border is set using the border-width property − border-width: thick; Example Let us see the example − ...
Read MoreThe :nth-child Pseudo-class in CSS
The CSS :nth-child() pseudo-class selects an element that is the nth child element of some other element. It matches elements that are the nth child of its parent. Syntax The following is the syntax for the :nth-child pseudo class − :nth-child(){ /*declarations*/ } Select the nth child in a form Let’s see an example for the CSS :nth-child() Pseudo class. First, set a form using the − CSS :nth-child() Pseudo Class ...
Read MoreThe :last-child Pseudo-class in CSS
The CSS :last-child pseudo-class selects an element that is the last child element of some other element. As the name suggests, it will select the last child of its parent. Let us see some examples to implement the :last-child pseudo class. Syntax The following is the syntax for the :last-child class − :last-child{ /*declarations*/ } Style a table with the :last-child pseudo class Let’s see an example of the CSS last-child Pseudo class. In this example, we have set a table − Demo ...
Read MoreThe :lang Pseudo-class in CSS
The CSS :lang() pseudo-class selector is used to select the elements with lang attribute specified. This helps us target a specific language associated with the content and style them accordingly. We can set multiple languages using this selector. A two-letter language code is to be set i.e., the following for Italian − Bella ciao The following for English − Nice hello The following for Spanish − Bueno adios Syntax The following is the syntax to implement the :lang pseudo class − :lang(){ /*declarations*/ } Set the lang attribute The ...
Read MoreThe :first-child Pseudo-class in CSS
The CSS :first-child pseudo-class selects an element that is the first child element of some other element. Syntax The following is the syntax of the :first-child pseudo class − :first-child{ /*declarations*/ } Example Let’s see an example of CSS first-child Pseudo class. We have set no left border for the first element of the and − td:first-child, th:first-child { border-left: none; } Here is the example − table { ...
Read More