Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Set height and width of an image with CSS and element properties

The CSS height and width properties are used to set the height and width of an html element.

Following are some height and width properties values:

  • Percentage (%) :  Percent of width height of parent container or containing block  i.e. 50%
  • Length(px, cm) : height in pixel or centimeter i.e. 150px, 5cm etc
  • Initial : Sets the height/width to its default value
  • Inherit  : The height/width will be inherited from its parent value
  • Auto: Default browser value

Code example

Width and height with image tag properties

<img src="hero_image.jpg" alt=""
           width="450px" height="450px">

Image width and height with CSS

img{
    width:450px;
    height:450px;
}
 
.hero-image{
    width:45%;
    height:45%;

Add shadow to text using CSS

Text shadow property is used to add shadow to the text.

With text-shadow property you can specific horizontal size, vertical size, and shadow color for the text.

Syntax

selector {
    text-shadow: horizontal size vertical size color-name;
}


Code example

h2.about-team {
    text-shadow: 2px 1px blue;
}   

Various CSS font properties with code snippets

The font property in CSS is a shorthand used to apply font for specified element.

There are seven font sub properties including (CSS 3 font-stretch property)

Font shorthand example

p.about-team span {
    font: expanded italic small-caps bold 13px/1.5 Georgia, sans-serif;
}

font-stretch: Used to set the font width, such as condensed or expanded.

  • normal
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

font-style: Use to set font style for text

  • normal
  • italic
  • oblique
  • inherit

font-variant: Specifies whether target text should be displayed in a small-caps.

  • normal
  • small-caps
  • inherit

font-weight: Specifies the weight that is applied to the element.

  • Inherit
  • Numeric keyword values: 100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900
  • normal
  • bold
  • bolder
  • lighter

font-size: Specifies the font that is applied to the element.

  • small
  • medium
  • large
  • xx-small
  • x-small
  • xx-large
  • x-large
  • percentage
  • inherit
  • in pixel:  12px 15px etc.

font-family: To specify the font family for text

  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
  • caption...etc

line-height: The line-height property defines the amount of space above and below inline elements.

  • normal
  • percentage i.e 50% 150% etc.
  • number (font-size multiplier I.e. 1.5)

 

Code example:

span.about-us{
    font-stretch:expanded;
    font-size:13px;
    line-height:1.5;
    font-style:oblique;
    font-family: Arial, Helvetica, sans-serif;
    font-variant:normal;
    font-weight:400;