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.

Syntax

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


Code example

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

How to control the flow and formatting of text

The white-space property controls how text is handled on the element it is applied to.

White space values:

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

White space property shorthand property order or syntax

normal | pre | nowrap | pre-wrap | pre-line | break-spaces

Code example

/*line breaks inside post container*/
.post {
    word-wrap: break-word; /* old browser */
    white-space: pre-wrap; /* latest browsers */
}

 

/*prevent text exceeding container or overflows 
 the container of a layout*/
.large-text-fix {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    hyphens: auto;

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;