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

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.


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:

    font-family: Arial, Helvetica, sans-serif;

Set background scrolling, position, and background repeat to element with CSS

Following are some CSS background properties used to set position, scrolling, background repeat

  • background-repeat
  • background-attachment
  • background-position

Background scrolling

The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.

/*Fixed background image*/
.about-team {
    background-image: url("team.png");
    background-attachment: fixed;

/* background image with scrolling*/ 
.body-img {
    background-image: url("site.gif");
    background-repeat: repeat-y;

Background repeat

The background-repeat property sets if/how a background image will be repeated.

/* background image with no repeat*/ 
.about-team {
    background-image: url("team.png");
    background-repeat: no-repeat;
    background-attachment: fixed;

Background position

The background-position property sets the starting position of a background image.

/* background image with center position*/ 
.about-team {
    background-image: url("team.png");
    background-position: center;