pseudo classes

They apply to links on a page. <a ....>These are classes that you do not make up the name for. You do not put a dot in front of the class name. You do not use a class=" " to apply the pseudo class. They apply to all links on the page automatically. 

They are

a:linked{    ...}

a:visited{ ... }

a:hover{ ... }

a:active{ ... }

This allows to style the link state not the link text.

They need to be listed in the order above if you want them to work right on all web pages.

Classes of links

Regular class name can be combined with pseudo class names. You can combine regular class names with pseudo class names which can be applied selectively. 

a.yourClassName:pseudo class name{ ... }

Your class name need to start with a letter and contain no spaces. It is case sensitive.  Any CSS property:value pairs can be used to define the styling.

First define the a.className and then do the a.ClassName:pseudoClass{   }

Comments (0)

All CSS style rules are constructed using this general syntax

selector{

             property:value;

            ...

}

selector defines which elements the style will apply to.

property:value pairs define the styling.

More then one selector can refer to an element type. The same styling can be applied to multiple element types by using multiple selectors, separated by commas.

ID selectors apply to specific elements (usually major page divisions) on the page.

i.e.   #wrapper{ ....}

in the html code this would be referenced

<div id="#wrapper">

.....

</div>

An ID name can be used only once on an html page.  There can be multiple different ID's but #wrapper can be used only once in the page.

class names are when you want multiple items on a page to share the same style. A style class is used to style the class. A class refers to many items.

In the CSS code you proceed the class with a period. This lets the browser know that you are creating a class. i.e.

.classname{

            property:value;

          }

The classname must start with a letter and have no spaces.  It is case sensitive.

In the HTML portion of the code

Do not use the period when creating a class in html code. It would be class="classname" This goes in the opening tag of the element you want the class to apply the styling.

  An example might be <span class="hilite">x....<span>

Where the letters between to span would be treated with the properties of the hilite class created in the CSS code.

Some selectors may only contain the class name.  These are called generic class selectors. They can be applied to any tag.  They are not attached to any element. 

i.e.

For the CSS

.raised{

           border:solid 1px gray;

          border-radius: 5px;

          box-shadow: 5px 5px 5px gray;

         }

For the HTML

<img src="/jm1/location of the image" alt="Image name" width="200"  class="raised">

If one where to start the class with img.then class name it would apply only to images no other type of element. 

More then one class can be applied to an element as long as they are separated by a space within the " " marks.

 

Comments (0)

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)