To float an image one does this in css. The command is:

float:position

Where position can be left to float the rest of the page to show right of the image.

Use right if you want the rest of the page to appear right of the image.

The tag for the image comes before the text.  This is necessary because the floating element only floats next to the text that comes after the tag for the floating image.

width:size;

size can be from 0% to 100%.  This can either be per cent or pixels. This is the width of the paragraph the image is on the page.  If the image is 100% there will be no room for text next to the image.

If this is used inline and not in CSS the code would look like

<img src="/jm1/img/...jpg" alt="The image text" style="float:right;width:25%"

In CSS is you do not want the image to float you would use:

clear:which where which would be left to clear a left-floating element or right to clear a right floating element.

CSS code for affecting the height and width of an image.

width:x  where x can either be pixels (px) or percentage (%)

height: where x can either be pixels (px) or percentage (%)

So, the inline code would be:

<img src="/jm1/file name and location" alt="alternate text" style="width:(x); height:(x);>

One can use width, height, or both.

Comments (0)

The text on the page is defined by the font information i.e.

font-family:[familyname].........genericname;

The generic name of a font that most browser's recognize is

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

Samples of various web safe font families

Web-safe fonts

Font size

Font size can be represented in pt (point), px (pixel), % (percent - relative to the font size) or em (relative to the font size).

The default font size is 12.

The code for font size is

font-size: value of font size

bold face, italic, and small cap can be set for fonts in the CSS

bold is <b>   font-weight: value where value is either normal or bold

italic is <i> font-style: value where value is either normal or italic

small cap means that the lower case letters are shown as upper case but smaller then the capital letters.

font-variant: value where value is either normal or small-caps.

Line Spacing

  By default the text lines in paragraphs is single space.

line-height: value where value is the distance between the lines in a paragraph. Value can be either pixel, points, em, or percentage. A number without a unit of measurement will also work.  This number can be a decimal and then works just like a percentage.  The word normal my also be used.


Font setting are usually place in the CSS body{} section if you want the setting to apply to whole site.

If you do not want to enter each font feature separately you in CSS you can use a font shorthand property

font: [style] [variant]  [weight] size[/height]  [family]

  • style: This can be italic or normal. If you leave it out, it defaults to normal.
  • variant: This can be small-caps or normal. If you leave it out, it defaults to normal.
  • weight: This can be bold or normal. If you leave it out, it defaults to normal.
  • size: This should be a font size expressed as a number followed by a unit of measure like pt (points), px (pixels), % (percent), or em (relative size).
  • /line-height:  This is a number followed by a unit of measure as above. If omitted, it defaults to the normal spacing for the font (usually about 120%). Only type the slash if you provide a line height. If you don't specify a line height, don't type the slash.
  • family: This is a wish list of font names and a generic font name. Same as you'd type using font-family:


i.e.    body{

                      font: normal normal normal 10pt/1.5 Arial, Helvetica, Sans-Serif

                }

If you do not want to type in normal, normal, normal the you can leave that part blank because normal is the default value. or you could use italic small-caps bold, italic normal bold, etc.

COLOR

Color can be define for the text by

color: red

This goes on a separate line with you entering the color value.

 TEXT DECORATION

text-decoration: overline

text-decoration: underline

text-decoration: line-through

 

TEXT SHADOW

text-shadow:horizontalOffset verticalOffset [blur] [color],... There is no spread for text shadow.

horizontal offset is a number with a unit of measure (i.e. pixel) positive puts  it on the right of the letter, negative puts it on the left of the number.

vertical offset is a number with a unit of measure (i.e. pixel) positive put is under the letter, negative puts it above the letter.

blur is optional. The larger the number the softer the edge. It is number with a unit of measure (i.e. pixel).

color is any valid color name or hex color code.  If omitted the shadow is the same color as the text.

 

text alignment

Text alignment applies to blocks but not inline code.  Thus, paragraphs, div, body h1 through h6. 

text-align: left

text-align: right

text-align: center

FIRST LINE INDENT

First line indent applies to paragraph.

text-indent: value where value is a number with a unit of measure.

i.e.  p{ text-indent: 20px}

 

Comments (0)

Inline text tags

  • <abbr> abbreviation
  • <b> boldface
  • <del> deleted test - shown with a strikethrough
  • <em> italics and spoken with an emphasis
  • <i> italics
  • <q> short quotation
  • <span> generic tag for applying css code
  • <strong> bold and spoken strongly

Inline elements stay on the  same line. To go to a new line one needs to use <br> when using inline elements.

block text tags

  • <address> contact information (physical address)
  • <h1> to <h6> headings
  • <li> list items this appears between either ol or ul blocks
  • <ol> ordered lists
  • <p> paragraph
  • <ul> unordered lists

each new block item forces the information to appear on a new line when the page is viewed.

 When using the abbr tag one can use it with title= to define the abbreviation with a mouse over i.e.

<abbr title="International Business Machines>IBM</abbr>

When title is used one needs to add an ending </abbr>

 

 

 

 

 

 

 

 

Comments (0)

In CSS a box drop shadow can simiulate a 3-d image or dimension.

The code for it is 

box-shadow:horizontalOffset verticalOffset [blur] [spread] [color] [inset];
The [] are optional values.
Positive number for horizontal offset will place the shadow to the right.
Negative number for horizontal offset will place the shadow to the left of the box.
Positive number for vertical offset will place the shadow below the box.

Negative number for vertical offset will place the shadow above the box.

The blur value affects the edge of the box. The larger the number the blurrier the edge.

Spread value enlarges the drop shadow it can be made larger then the original box
. Allows the shadows to be spread out in all directions. It appears as if there is more then one light source instead of just one light source.
The color value can change the color of the drop shadow. It can use either the words for color or the hex code.
The inset word places the shadow inside the box.



 

Comments (0)

To round the corners on borders use

border-radius: length

The length is in pixels px.  The larger the number the rounder the corner.

More then one value can be entered in radius

  • one number results in all four corners having the same curve.
  • two number result in top-left & bottom-right being the first value and top-right & bottom-left being the second value.
  • three numbers result in top-left first value, top-right & bottom-left second value and bottom-right third value.
  • four numbers result in top-left first value, top-right second value, bottom-right third value and bottom-left fourth value.

 If one wants to change top and bottom of a curve to different values the following commands would be used.

  • border-top-left-radius: horizontal vertical (first value applied to the horizontal portion of the curve second value applied to the vertical portion of the curve.
  • border-top-right-radius: horizontal vertical
  • border-bottom-right-radius: horizontal vertical
  • border-bottom-left-radius: horizontal vertical

If you want all four corners to have the same varied horizontal slope and the same varied vertical slope (but horizontal is different from vertical) use the following command.

     border-radius: horizontal/vertical

The slash mark / tells the browser to apply the first value to all widths and the second value to all heights on the border.

 

Comments (0)