CSS Selector Property Value

The CSS selector property value syntax is fundamental to learning and using CSS in web design. Lets start with a basic html webpage that has ‘style’ tags in the head of the document and ‘script’ tags in the body of the document.

On line 4 is a ‘meta charset’ tag that specifies the character…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Javascript Affecting HTML Documents

To see javascript affecting HTML documents look at the following code snippet. In particular look at the javascript code on line 8 in-between the ‘script’ tags.

In the above example the h1 element in document.write() becomes a node in the document. To view the document with the newly created ‘h1’ node is possible…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Javascript HTML Document Object Model

The Javascript HTML Document Object Model is often abbreviated to DOM. The DOM or (Document Object Model) refers to the elements that javascript can interact with on a html page. To fully understand the DOM it is best to be aware of ‘Inspect Element‘. To explain the DOM first of all create a basic HTML…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Javascript Beginners First Tutorial

Every Javascript Beginners First Tutorial should begin with the opening ‘<script>’ tag and the closing ‘</script>’ tag. The script tags can be placed in either the ‘head’ of ‘body’ of the html document. In this Javascript Beginners First Tutorial the opening ‘<script>’ tag and the closing ‘</script>’ are placed on line 9.

A pop…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

CSS User Agent Stylesheet

A CSS User Agent Stylesheet simply refers to the default styles that browsers apply to web pages. It is of the lowest importance considering User Styles and Author styles will overwrite these. Each browser is a little different in how it styles html. Many web designers will apply a ‘css reset‘ to wipe all the…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

CSS Positioning HTML Elements – Absolute Positioning

First of all here is a CSS Positioning HTML Elements – Absolute Positioning example. Four ‘div’ elements with ‘position: absolute‘ given to each. Also on lines 8 – 10 the css user agent stylesheet margins for the body have been reset to zero.

Only the yellow ‘div’ is visible? The ‘absolute’ position value places…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

CSS Positioning HTML Elements – Relative Position

To understand CSS Positioning HTML Elements it is best to begin with the css ‘position property‘. The CSS ‘position property‘ has several possible values. Here are two headings inside a html page. Note on line 6 the empty ‘style’ tags.

First of all lets begin with the ‘relative’ value. Here is an example using…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML Unordered List Tags

The html unordered list tags are used to create a bulleted list. Here is a basic example. First of all on line 9 we add the opening <ul> tag and closing </ul> tag.

On line 10 inside the ‘ul‘ tags we add an opening <li&gt and closing </li&gt tag. In between the ‘li’ tags…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML Ordered List Tags

The html ordered list tags are used to list items in an ordered sequence. Here is a basic example. First of all on line 9 we add the opening <ol> tag and closing </ol> tag.

On line 10 inside the ‘ol‘ tags we add an opening <li> and closing </li> tag. In between the…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

HTML5 Table Element Example

First of all to begin the hTML5 table element example we add an opening <table> tag and closing </table> tag on line 9.

Next inside the table tags we add and opening <tr> tag and a closing </tr> tag on line 10. The ‘tr‘ tags define a row within the table.

Now inside…

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr