ECMM6018 Enterprise Networking For Electronic Commerce Tutorial 2 Cascading Style Sheets (CSS)

What Are CSS A feature which gives more control over how web pages are displayed Used to separate presentation from content Can be used by external, internal or inline means Can be applied to applied all HTML elements/tags The hierarchy follows like this external->internal->inline

Syntax of CSS Selector {property:value} Selector – html element or tag Property – the properties associated with that particular tag or element Value- the value given to the tag Example Selector property value p{text-align:center; color:red; font-family:"sans serif"} CSS allows several elements (selectors) to have the same property(ies)

Syntax of CSS Example h1,h2,h3,h4,h5,h6 { color: green } All the headers will be the colour green

Class Selector This “property” allows us to define different styles for the same HTML element Example H1.right {text-align: right} H1.center {text-align: center} Corresponding HTML would be This heading will be right- aligned. This heading will be center- aligned.

Class Selector Classes can also be defined so that they can be applied to various elements. Class name.center {text-align: center} Example This heading will be center- aligned This paragraph will also be center- aligned.

External Style Sheets Full embody CSS Separate Presentation from Content To link to an external style sheet the link must be placed in the head section of the html code

External Style Sheets Important things to note when using external style sheets They can be written in any text editor (e.g. notepad, word pad) They should be written devoid of any html They should be saved with a.css extension

Internal Style Sheets Defined in the head section of the html code Placed between Style Tags Example <!– A.normal:link{color:#FFFFFF; text-decoration:none; font-weight:bold} A.normal:visited{color:#FFFFFF; text-decoration:none; font-weight:bold} A.normal:hover{color:#000000; text-decoration:none; font-weight:bold} -- > Home

Inline Style Sheets Go against the concepts of CSS, to separate presentation from content Should be avoided unless absolutely necessary Example This is a paragraph

Multiple Style Sheets These make it possible to have different styles for the same selector within different style sheets. An External Style Sheet contained this for the P tag p {colour: blue;text-decoration: none;font-size: 10pt} An Internal Style Sheet contained this p {text-decoration: underline;font-size: 12pt} Linking the external sheet to the page where the internal sheet is used produces this result colour: blue; text-decoration: underline; font-size: 12pt

Useful Links