Styling CSS Font Properties

Styling CSS font properties will alter the appearance of text elements in a HTML5 document. First of all a html5 document needs to be created that has a link to a ‘styles.css’ file in the ‘css’ folder. The html5 document should be named ‘index.html’ and the ‘css’ folder should be created in the same location…

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

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

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

CSS3 Border Property Width Style Colour

To create a border around an element is straightforward with CSS3. Take a basic HTML5 page with a ‘h1’ element inside ‘header’ tags. We then add a CSS3 Border Property to the ‘h1’ on line 8.

The CSS3 border attribute has two values, ‘5px‘ and ‘solid‘. The first value is the width which is…

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

CSS3 Flexbox Layout Module.

CSS3 Flexbox Layout Module can be used for the layout of a webpage. There are several techniques that are available with CSS3. One method for layout is ‘flex‘. Take a look at the code below because it contains three sections that each contain a ‘h2’ heading, an article with a ‘h3’ heading and one paragraph.…

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

Adding Multiple CSS Styles

Now we will be Adding Multiple CSS Styles to the ‘h1’ element in our webpage. We will enlarge the text and centre the text with the ‘font-size’ attribute and the ‘text-align’ attribute.

This is our newly styled ‘h1’ element as it appears in the webpage. The syntax for html5 and css3 must be closely…

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