ECA 228 Internet/Intranet Design I Cascading Style Sheets

ECA 228 Internet/Intranet Design I CSS rules RULE h1 { color: red; } Declaration SelectorPropertyValue

ECA 228 Internet/Intranet Design I CSS rules cont … each rule has 2 parts – selector: determines to which element a rule is applied – declaration: the rules to apply to the selector property: the name of the CSS property that describes the formatting being applied value: an allowable option to set or describe the property a rule may have more than one declaration – semicolon must end declarations – semicolon is optional for the last pair

ECA 228 Internet/Intranet Design I Applying CSS can be applied three ways: 1. Internal 2. External 3. Inline Internal – rules are placed inside tags in section h1 { color: red; }

ECA 228 Internet/Intranet Design I CSS Internal Example CSS Example h1 { color: red; }...

ECA 228 Internet/Intranet Design I Selectors element type to apply a rule to more than one element, separate them with a comma h1 { color: red; } h1, h2 { color: red; } This will be red> So will this

ECA 228 Internet/Intranet Design I Selectors cont … class – can be used more than once in HTML – case sensitive – prefixed with dot.redText { color: red; } This will be red

ECA 228 Internet/Intranet Design I Selectors cont … class cont … – can be used alone or contextually with elements h1.redText { color: red; } This will be red This will not

ECA 228 Internet/Intranet Design I Selectors cont … id – unique identifier – can only be used once in HTML – prefixed with hash or pound sign # #redText { color: red; } This will be red This will be red ILLEGAL

ECA 228 Internet/Intranet Design I Selectors cont … context – nested elements can be considered as parent/child – nested relationship is indicated without use of comma h1 em { color: red; } This word is red

ECA 228 Internet/Intranet Design I Selectors cont … context cont … – many properties are inherited ie, if a property belongs to the parent, it also applies to the child #div1{ color: red; } This is my header

ECA 228 Internet/Intranet Design I Selectors cont … context cont … – other properties, such as borders, are not inherited #border1{ border-style: double; border-width: thin; } This is my header This is my paragraph

ECA 228 Internet/Intranet Design I Selectors cont … context cont … – classes or ids can be nested inside one another #contentArea.green{ color: green; } This is green

ECA 228 Internet/Intranet Design I Selectors cont … pseudo-class – special type of class that allows formatting based on a state or condition if a link has been visited or not if the mouse passes over the link when the link is clicked a:link{ color: blue; text-decoration: none; } a:visited{ color: pink; text-decoration: none; } a:hover{ color: purple; text-decoration: underline; } a:active{ color: red; text-decoration: underline; }

ECA 228 Internet/Intranet Design I Selectors cont … pseudo-class – special type of class that allows formatting based on a state or condition first letter of every paragraph first line of every paragraph p:first-line{ font-size: 120%; } p:first-letter{ font-size: 150%; font-weight: bold; }

ECA 228 Internet/Intranet Design I Applying CSS can be applied three ways: 1. Internal 2. External 3. Inline External – external stylesheet is a separate document – to apply the same stylesheet to more than one page of a website – provides consistent look – to modify look of site, make changes in one place

ECA 228 Internet/Intranet Design I Applying CSS External cont … – no HTML in external stylesheet – no tags in external stylesheet – save as text file, with.css extension – to apply external stylesheet to an HTML document, link the document from inside the section

ECA 228 Internet/Intranet Design I Applying CSS External cont … – an HTML document can link to more than one external stylesheet at a time, as well as an internal sheet – if a conflict occurs, precedence is given to the rule defined last – URLs in an external stylesheet are relative to the location of the stylesheet, not the document linking to it

ECA 228 Internet/Intranet Design I Applying CSS Inline – used to apply style locally – within an HTML tag use style as an attribute, the rule as the value – separate definitions with a semicolon This word is red.

ECA 228 Internet/Intranet Design I Comments CSS comments /* This is a comment */ – using comments is a good way to debug a stylesheet which is not working – do not confuse /* */ with

ECA 228 Internet/Intranet Design I Box Model OUR CONTENT margin border padding