×

CSS Width

CSS Width

The width property in CSS sets the content width of area of the element. These properties do not provide margin and border features. It is used to set the area’s width within the margin, border, and padding of an element.

Width Values

ValueDescription
autoIt is applied for calculating the width, and it is the default value.
lengthThis value is referred to describe the width property cm, px, etc.
%It describes a containing block’s width in %.
initialThis value sets the CSS Width property to the default value.
inheritThe inherit value inherits this property from one of its parent components.

Example of Width Property: in px

<!DOCTYPE html>
<html>
<head>
<style>
img.normal
{
 width: auto;
}
img.big
{
 width: 150px;
}
p.ex
{
 width: 150;
height: 150px;
}
</style>
</head>
<body>
<img class= "normal" src= "Rose.jpg" width= "95" height= "84"><br>
<img class= "big" src= "Rose.jpg" width= "95" height= "84">
<p class= "ex"> The width and height of this paragraph is 150px. </p>
<p> It is a paragraph. </p>
</body>
</html>

Output:

CSS Width

Related Topics

CSS Masking

CSS Masking The CSS mask property is applied to hide a component with the use of the masking or clipping an image at any specific point. The masking depicts the use...

3 minutes read.

CSS Content Property

Content Property The content attribute produces dynamic content. It can be applied with any pseudo-element ::after and ::before. These CSS properties are entirely supported inside every browser and applied to include...

5 minutes read.

CSS Hover

CSS Hover: CSS :hover is used to select the various elements whenever we point the mouse on these elements. We can also use this selector on all the HTML elements,...

3 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

CSS Padding

CSS Padding: The padding property in CSS is addressed to describe the space among the element border and the element content.This property is quite different from the margin property of...

2 minutes read.

CSS Images

Images in CSS: Images are a critical part of a web application. It includes various types of images in the web application that cannot be recommended. However, it is essential...

4 minutes read.

What is Bootstrap CSS?

Bootstrap: - Bootstrap is a CSS framework that is free to use and is used for the front-end development of the website in a faster and easier way. Bootstrap was released as...

3 minutes read.

CSS Filter

CSS Filter CSS filter is used to apply visual effects on the images, text, and other factors of the webpage. This filter property in CSS allows us to admit the effects like...

7 minutes read.

CSS @keyframes rule

CSS @keyframes rule It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline. We may make the properties of complex...

4 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS Text-Overflow

Introduction: The text-overflow property of CSS is used to format the text which is overflowing the boundaries of the container. This property helps user to clip the text, to display the...

5 minutes read.

CSS Radio Button

Radio Button A radio button has been defined as an element of HTML. It can support us to take any input from the user. But it is challenging to design a...

4 minutes read.

CSS Align

CSS Center Align Elements CSS center align is used to create align by using block element. You should specify margin: auto;properties. The element will take up the specified width and the remaining space....

2 minutes read.

CSS Flex-Box

Introduction The flex-box property of CSS stands for Flexible Box Layout Module. It is specifically used to design a flexible responsive layout. Flex-box is a one dimensional layout model, i.e. it works...

6 minutes read.

CSS 3D Transform

Introduction To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform. 2D transform is a CSS effect which transforms the elements according to...

6 minutes read.

CSS Outline

CSS Outline: This CSS property is quite similar to the border property of CSS. It eases us to design an additional border around the element to obtain visual attention. The...

4 minutes read.

CSS Inline

What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is the language that we use to style an HTML document. It specifies how HTML components should appear. CSS...

4 minutes read.

CSS Lists

CSS Lists: Several properties are available in CSS that are used to manage the lists. Lists are distributed as ordered and unordered kind of lists. The ordered lists provide the...

7 minutes read.

CSS Ellipsis

The CSS ellipsis kind of is the value that mostly is used by the property: text-overflow. Here, we will discuss the following: What is CSS Ellipsis? Syntax for CSS ellipsis How to...

3 minutes read.

CSS Syntax

The CSS syntax contains the selector and the declaration block, which will be clearer with the following example: Selector: A CSS selector specifies the HTML tag we wish to style. A selector can be...

2 minutes read.