The very basics of html5 documents can now be extended by applying styles to alter the appearance of the page.
In this CSS Styles Introduction we take a simple html5 page and on line 6 add opening ‘<style>‘ and closing ‘</style>‘ tags inside the ‘head‘.

And now our first style. Below on line 7 we declare a ‘h1‘ selector and an opening curly brace. Also on line 8 we declare the colour attribute and the ‘red‘ value to style the text with a red colour. And finally on line 9 we close the selection with a closing curly brace.

Here is the styled ‘h1‘ element in the browser.

CSS Styles Introduction - Red text.

CSS Styles Introduction – Multiple Styles

Multiple CSS styles can be added to the one HTML5 page. A further example is given below. The ‘p‘ selector has been increased to the value of 32 pixels by using the ‘font-size‘ attribute. Browsers will usually display a paragraph element with 16 pixels. The example below has overridden two of the browser styles for the ‘p‘ element, ‘font-size‘ and ‘color‘.

On line 10 a ‘p‘ selector and opening curly brace is added. Also on line 11 the ‘font-size‘ attribute is given a value of ‘32px‘. On line 12 the ‘color‘ attribute is given a value of ‘blue‘. Finally on line 13 a closing curly brace is added to close the selection. As a result this is how the page now appears in the browser.

CSS Styles Introduction. Blue paragraph.

CSS Syntax

CSS syntax is rather simple however be careful as the browser is very sensitive and styles will not render if there are ‘syntax errors’. First of all pay close attention to the curly braces ‘{}’. Do not omit either the opening, ‘{‘, or closing, ‘}’, brace. Also make sure the colon, ‘:’ is placed after the style attribute. And finally make sure each value has a semi-colon, ‘;’, placed after it.

More on CSS (Cascading Style Sheets)

CSS3 logo. CSS Styles Introduction

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

Leave a Reply

Your email address will not be published. Required fields are marked *