CSS Properties

width and height

We can use the style attribute to specify the width and height of an image.

Resizing is ideal for large-sized images.

Checking the actual size of the images is important when resizing to determine the new image size ratio.

The width and height attributes always define the width and height of the image in pixels.

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="width: 300px; height: 200px;"
  />
</body>

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    width="300"
    height="200"
  />
</body>

border

The CSS border shorthand property allows users to specify the width, style and color of an element’s border.

border-width
border-style (required)
border-color

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black;"
  />
</body>

border style

The border-style property specifies what kind of border to dispay.

The width can be set as a dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value

A ridge border. The effect depends on the border-color value

An inset border. The effect depends on the border-color value

An outset border. The effect depends on the border-color value

No border.

A hidden border.

A mixed border.

border width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em) or by using one of the three pre-defined values: thin, medium, or thick.

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: 5px;"
  />
</body>

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick;"
  />
</body>

border color

The border-color property is used to set the color of the four borders.

The border-color property can have from one to four values.

top border
right border
bottom border
left border

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick; border-color: red;"
  />
</body>

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border-style: solid; border-width: thick; border-color: red blue green yellow;"
  />
</body>

border radius

The border-radius property is used to add rounded borders to an element.

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; border-radius: 10px;"
  />
</body>

display and margin

The display property specifies if/how an element is displayed. Giving a value of block on the display property will let the element take the whole line on its own.

The margin property is used to create space around elements. Giving a value of auto to the margin property gives the element equal amounts of spaces on the left and right side making it appear in the center.

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; border-radius: 10px; display: block; margin: auto;"
  />
</body>

float

The CSS float property specifies how an element should float.

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have left, right, none, or inherit value.

<body>
  <img 
    src="images/sunflower.jpg" 
    alt="Sunflower"
    style="border: 5px solid black; float: right;"
  />
</body>

CSS background properties

background image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

<body style="background-image: url(images/mickey.png);">
  <!-- contents here -->
</body>

background repeat

The background-repeat property repeats an image both horizontally and vertically.

The value can be horizontally repeated (repeat-x), vertically repeated (repeat-y), or no-repeat.

<body style="background-image: url(images/mickey.png); background-repeat: no-repeat;">
  <!-- contents here -->
</body>

background attachment

The background-attachment property specifies whether the background image should scroll or be fixed.

<body style="background-image: url(images/mickey.png); background-repeat: no-repeat; background-attachment: fixed;">
  <!-- contents here -->
</body>

background position

The background-position property is used to specify the position of the background image.

<body style="background-image: url(images/mickey.png); background-repeat: no-repeat; background-attachment: fixed; background-position: top right;">
  <!-- contents here -->
</body>

background size

The CSS background-size property allows you to specify the size of background images.

The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.

<body style="background-image: url(images/mickey.png); background-repeat: no-repeat; background-attachment: fixed;background-position: top right; background-size: 379px 391px;">
  <!-- contents here -->
</body>

background

The CSS background property sets all the background properties in one declaration.

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right;">
  <!-- contents here -->
</body>

<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right; background-size: 379px 391px;">
  <!-- contents here -->
</body>

On this page