comp519 web programming autumn 2015 cascading style...
TRANSCRIPT
COMP519Web Programming
Autumn 2015
Cascading Style Sheets
Content vs Presentation
Most HTML tags define content type independent of how thatcontent is to be presented
There are a few obvious exceptions such as ltbgt ltbgt forbold text and ltigt ltigt for italicized text
The trend in web development has been towards an increasingseparation of the content of webpages from the presentation ofthem
Style sheets allow us to maintain this separation whichfacilitates easier maintenance of webpages and for aconsistent look across a collection of webpages
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation
Most HTML tags define content type independent of how thatcontent is to be presented
There are a few obvious exceptions such as ltbgt ltbgt forbold text and ltigt ltigt for italicized text
The trend in web development has been towards an increasingseparation of the content of webpages from the presentation ofthem
Style sheets allow us to maintain this separation whichfacilitates easier maintenance of webpages and for aconsistent look across a collection of webpages
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
Style sheets associate presentation formats with HTMLelements
I CSS1 Developed in 1996 by W3CI CSS2 Released in 1998 but still not fully supported by all
browsersI CSS3 Specification still under development by the W3C
(since 1998) ldquocompletely backwards compatible withCSS2rdquo (according to the W3C)CSS3 has split the development into separate modulesallowing for independent development
I CSS4 Several ldquolevel 4rdquo modules exist
Style sheets can be used to specify how tables should berendered how lists should be presented what colors should beused on the webpage what fonts should be used and howbigsmall they are etc
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
HTML style sheets are known as Cascading Style Sheetssince can be defined at three different levels
1 Inline style sheets apply to the content of a single HTMLelement
2 Document style sheets apply to the whole ltbodygt of adocument
3 External style sheets can be linked and applied tonumerous documents
Lower-level (ie lower-numbered) style sheets can overridehigher-level style sheets
(Actually there are about nine levels of priority)
Style sheets can also specify how things should be presentedon different screen types (eg resolution sizes) andor in print
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Content vs Presentation (cont)
Finally web users (ie clients) can even specify personalizedstyle sheets that can be used to override the styles shown onweb pages when viewed on their own browser
This could be useful for example to specify larger type sizesfor visually-impaired users
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size larger
color red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color white
text-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style SheetsUsing the style attribute you can specify a presentation stylefor a single HTML element
Within the HTML style specification list a sequence ofldquoproperty valuerdquo pairs separated by semi-colons
Example property value pairs includefont-family Couriermonospacefont-style italic font-weight boldfont-size 12pt font-size large font-size largercolor red color 000080background-color whitetext-decoration underline text-decoration nonetext-align left text-align centertext-align right text-align justifyvertical-align top vertical-align middle vertical-align bottomtext-indent 5em text-indent 02in
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page17html 20150928 --gt
ltheadgtlttitlegtInline Style Sheetslttitlegt
ltheadgt
ltbodygtltp style=font-familyArialsans-serif
text-alignrightgtThis is a right-justified paragraph in a sans seriffont (preferably Arial) with someltspan style=colorgreengtgreen textltspangt
ltpgt
ltpgtAnd lta style=colorredtext-decorationnonefont-sizelarger
href=page01htmlgthereltagtis a formatted link
ltpgtltbodygtlthtmlgt
view page
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style Sheets (cont)
There are many() CSS properties that can be manipulated
margin-left 01in margin-right 5margin 3em
padding-top 01in padding-bottom 5padding 3em
border-width thin border-width thickborder-width 5
border-color red
border-style dashed border-style dottedborder-style double border-style none
whitespace pre
list-style-type square list-style-type decimallist-style-type lower-alpha list-style-type upper-roman
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
CSS Properties
As I stated there are many CSS properties that can bechanged
Jens Oliver Meiert maintains an excellent CSS Properties Index(along with an HTML Elements Index)
An online search will reveal many sites offering tutorials andexamples Here are a few examples
I W3Schools CSS TutorialI A Brief Introduction to the CSS ldquoBox ModelrdquoI W3C Web Style Sheets CSS tips amp tricksI A self-study course given in a Wiki-style format
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page18html 20150928 --gtltheadgt lttitlegtInline Style Sheetslttitlegt ltheadgtltbodygt
ltpgtHere is an imageltimg src=VictoriaBldgjpegalt=image of Victoria Buildingheight=300title=Victoria Buildingstyle=margin-left03in margin-right03in
vertical-alignmiddle border-styledoubleborder-colorbluegt embedded in text
ltpgtltol style=list-style-typeupper-alphagt
ltligtone thingltligtltligt or anotherltligtltul style=list-style-typesquare whitespacepregt
ltligt with thisltligtltligt or thatltligt
ltulgtltolgt
ltbodygtlthtmlgt
view page
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Inline Style Sheets (cont)lthtmlgtlt-- COMP519 page19html 20150929 --gtltheadgt
lttitlegt Inline Style Sheets lttitlegtltheadgtltbodygt
lttable style=font-family Arialsans-serifgtltcaption style=color red
font-style italictext-decoration underlinegt
Student data ltcaptiongtlttr style=background-color redgtltthgt name ltthgt ltthgt age ltthgt
lttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgt
lttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgt
lttrgtlttrgtlttdgtDoogie Howserlttdgtlttdgt9lttdgtlttrgt
lttablegtltbodygt lthtmlgt
view page
Styles canbe applied tolttablegt ele-ments (andsub-elements)for interestingeffects
This is betterhandled usingdocument orexternal stylesheets
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style SheetsInline style sheets apply to individual elements in the page
Using inline style directives can lead to inconsistencies assimilar elements might end up formatted differently eg wemight like for all lth1gt elements to be centered and manuallyediting individual webpages means we could miss alteringsome lth1gt elements on some pages
Also inline definitions mix content and presentation whichviolates the (current) general philosophy of HTML and CSS
As a general rule inline style sheet directives should be usedas sparingly as possible
Alternatively document style sheets allow for a cleanerseparation of content and presentation Style definitions areplaced in the ltheadgt of the page within ltstylegt tags
Document style sheets allow us to apply style definitions to allelements or a subclass of elements throughout the page
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Document Style Sheets (cont)lthtmlgtlt-- COMP519 page20html 20150929 --gtltheadgt
lttitlegtDocument Style Sheetslttitlegtltstyle type=textcssgt
h1 color bluetext-align center
pindented text-indent 02in ltstylegt
ltheadgtltbodygt
lth1gt Centered Title lth1gt
ltp class=indentedgtThis paragraph will have the firstline indented but subsequent lines will be flush ltbrgtThis next line starts unindented ltpgt
ltpgtThis paragraph will not be indentedltpgt
lth1gt The End lth1gtltbodygtlthtmlgt
view page
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Selectors Properties and ValuesDocument (and external) style sheet directives consist of aldquoselectorrdquo together with one or more ldquoproperty valuerdquo pairswhere the pairs are enclosed inside of braces and separatedby semi-colons
Examples includeh1 color blue text-align center
alert text-decoration underlinecolor redfont-size 150
ol a background-color yellowfont-style boldfont-family Times New Roman
These directives are placed in a ltstylegt element in the ltheadgtelement in a manner similar to the previous example
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Selectors Properties and Values (cont)
Note that the example
alert text-decoration underlinecolor redfont-size 150
creates a class which can (in principle) be applied to anyHTML element in a manner similar to the example below(assumed to be part of a larger valid HTML document)
ltp class=alertgtHelp me Irsquom falling downltpgt
This would create a paragraph with text that is red underlinedand 150 of the normal text size of the webpage
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
The first example below would apply the ldquoalertrdquo class to bothitems in the list so both would be red underlined and in alarger font (The number of the list item is also in a larger redfont and could appear underlined or not depending upon thebrowser used it seems)
ltol class=alertgtltligtHelpltligtltligtBewareltligt
ltolgt
This second example would apply the ldquoalertrdquo to only the firstitem in the list
ltolgtltli class=alertgtHelpltligtltligtBewareltligt
ltolgt
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Also note the very subtle (but important) distinction betweenthe following two selector definitions
ol a background-color yellowfont-style boldfont-family Times New Roman
This makes a style declaration that applies to both ltolgt andltagt elements (Note the comma between the ol and a)
ol a background-color yellowfont-style boldfont-family Times New Roman
This second example makes a style declaration that applies toltagt elements that are children of (ie contained in) ltolgtelements (There is no comma between the ol and a)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Classes and Ids
It is possible to define classes that apply only to specific HTMLelements
One example like this was shown alreadypindented text-indent 02in
This allows you to ensure that certain styles arenrsquot accidentallyapplied where they shouldnrsquot be (for example)
An id can also be defined which is supposed to be used tospecify a unique element within a webpage For examplebigorange color ffa500
font-size 200font-weight bold
Then apply it to the HTML element using id=bigorange in theHTML elementrsquos tag
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Formatting Tables Using CSS (an example)lthtmlgtlt-- COMP519 page21html 20151001 --gt
ltheadgtlttitlegt Inline Style Sheets lttitlegtltstyle type=textcssgt
table font-family Arialsans-serif caption color red font-style italic
text-decoration underline th background-colorred td padding 0 1em 0 2em
ltstylegtltheadgtltbodygt
lttablegtltcaptiongt Student data ltcaptiongtlttrgtltthgt name ltthgt ltthgt ageltthgtlttrgtlttrgtlttdgt Chris Smith lttdgt lttdgt 19 lttdgtlttrgtlttrgtlttdgt Pat Jones lttdgt lttdgt 20 lttdgtlttrgtlttrgtlttdgt Doug MacKenzie lttdgt lttdgt 32 lttdgtlttrgt
lttablegtltbodygtlthtmlgt
view page
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easily
External style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
External Style SheetsModularity is key to the development and reuse of software
I Eg designimplementtest useful routines and classesI Then package and make available for repeated use in
various waysI Saves in development cost and timeI Central libraries make it possible to make a single change
and propagate the changes quickly and easilyExternal style sheets place the style definitions in a separatefile (or files)
I Multiple pages can link to the same style sheetI This gives a consistent look across the multiple pages of a
websiteI Possible to make a single change in a style sheet and it
propagates automatically to all pages that use that stylesheet
External style sheets represent the ultimate in separation ofcontent and its representation
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Modularity and Style Sheetslthtmlgtlt-- COMP519 page26html 20151001 --gtltheadgt
lttitlegtTitle for Pagelttitlegtltlink rel=stylesheet
type=textcsshref=myStylecsstitle=myStylegt
ltheadgtltbodygt
lth1gtCentered Titlelth1gtltp class=indentedgtThis paragraph will have the first
line indented but subsequent lines will be flush ltbrgtHere is a second line in the first paragraph ltpgt
ltpgtThis paragraph will not be indented ltpgtlth1gtThe Endlth1gt
ltbodygtlthtmlgt
myStylecss COMP519 20151001
h1 color blue text-align centerpindented text-indent 05in
view page
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Modularity and Style Sheets (cont)
Ideally the developer(s) of a website will place all formattingoptions in an external style sheet
All webpages for a particular website will then link to that samestyle sheet in order to maintain a consistent look through theset of webpages
Using an external style sheet can help simplify webpagedesign since the developer(s) need to only specify thestructure and content of the pages and the styling is left to thestyle sheet declarations
Note that no ltstylegt tags are used in the external style sheetfile
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Modularity and Style Sheets (cont)
It is possible to use several style sheets and it is quite commonto use one that specifies styles for a web browser and anotherfor styles to use when a webpage is printed
For example you could include two links in the ltheadgt elementof the form
ltlink rel=stylesheet type=textcss media=screenhref=browsercssgt
ltlink rel=stylesheet type=textcss media=printhref=printcssgt
So style sheets can be tailored in this manner for differentmedia
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
The ltspangt Tag
Problem Font properties apply to whole elements which areoften too large
Solution A new tag to define an element in the content of alarger element the ltspangt tag The default meaning of ltspangtis to leave the content as it is (ie unchanged) But with a classdefinition (or inline style declaration) you can apply it to aportion of text (or some other element too)ltstyle type = textcssgtbigred font-size 24pt
font-family Arielcolor red
ltstylegt
ltpgt Now is the ltspan class=bigredgtbest time ltspangt ever
ltpgt
Like most otherHTML tags a ltspangttag can be nestedhave a style attributea class andor anid assigned to it toapply style effects toits contents
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
The ltdivgt Tag
The ltdivgt tag is similar to the ltspangt tag useful for defining asection of content to which you may apply style definitions(using a class id or inline style declaration attribute with theltdivgt tag)
The main difference between the two tags is that by default aweb browser will place a line break before and after a ltdivgtelement (That default behavior can of course be changedusing other CSS declarations to alter it)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Media Queries (or Media Rules)In addition to (or instead of) style sheets for different types ofmedia you can also include ldquomedia queriesrdquo or ldquomedia rulesrdquo ina style sheet that can be used to define styles for different typesof media andor devices
Media queries were introduced in the CSS3 specificationextending the media types of CSS2
Media queries look at the capability of the device being used bythe client and can check many things including (according tothe W3C explanation of the ldquomedia rulerdquo)
I width and height of the viewportI width and height of the deviceI orientation (is the phonetablet in portrait or landscape
mode)I resolution
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Media Queries (cont)
Interested people can find more information about mediaqueries using the provided link (and of course other onlinesearches)
A typical example might be something like the following
ltstyle type=textcssgt
media screen and (max-width 500px) body background-color green
ul list-style-type square
ltstylegt
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
BootstrapBootstrap is a free and open-source framework and collectionof tools that can be used for creating websites
Bootstrap has design templates using HTML and CSSdeclarations for forms navigation elements buttonstypography and other interface elements It also includesoptional JavaScipt extensions (utilizing jQuery)
Bootstrap has been designed to work with all major browsers(but the alpha release in August 2015 of Bootstrap 4 hasdropped support for Internet Explorer version 8) And it hasalso been designed to support mobile devices through the useof media queries in all of its CSS templates
I wonrsquot be covering Bootstrap here in this module but want tomake you aware of its existence You are free to utilize it inmaking your own websites for this course (properly attributedof course) but I would strongly recommend you to familiarizeyourself with basic CSS concepts first
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offer
I Use (non-default) colors and fonts sparingly and be carefulhow elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto read
Consider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)
Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriately
Some people use screen readers to read content onwebpages (so eg include alt properties on images)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
Web Rules of Thumb (Ok my rules of thumb )HTML and CSS provide lots of neat features but just becauseyou can add a feature doesnrsquot mean you should
Donrsquot add features that distract from the content of the page
Some suggestions that I offerI Use (non-default) colors and fonts sparingly and be careful
how elements fit togetherEg no purple text on a pink background no ldquoweirdrdquo fontsEg I find bright white text on a black background difficultto readConsider the needs of visually impaired users of yourwebsite (For example use ems or percentages tospecify font sizes not fixed pixel sizes)Remember that an estimated 8-10 of people have sometype of color-blindness so choose color combinationsappropriatelySome people use screen readers to read content onwebpages (so eg include alt properties on images)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)
I Use images only where appropriateEg bright background images can make text hard to readEg using clickable images instead of standard HTMLbuttons or links can slow access as images have to beloaded
I Donrsquot rely on window or font size for layoutEg the font size may be adjusted by the clientConsider using CSS media queries to help account fordifferent devices people use
I Donrsquot be annoyingEg avoid lots of pop-up windows silly music etc
I Break a large document (webpage) into several smallerones or provide a menu for navigation
I Utilize style sheets to make changes easy and ensureconsistency across a set of webpagesConsider using a tool such as Bootstrap to assist withdifferent cross-browser CSS implementations
I Stick to standard features and test many browsers ifpossible (and versions of the same browser)