CSS First CSS Lecture Applications to HTML Jan 14 2019 The problem with HTML HTML was originally intended to describe the content of a document Page authors didn t have to describe the layout the browser would take care of that This is a good engineering approach but it didn t satisfy advertisers and artists Even people that actually had something to say wanted more control over the appearance of their web pages As a result HTML acquired more and more tags to control appearance Content and appearance became more intertwined Different browsers displayed things differently which is a real problem when appearance is important 2 Cascading Style Sheets A Cascading Style Sheet CSS describes the appearance of an HTML page in a separate document CSS has the following advantages It lets you separate content from presentation It lets you define the appearance and layout of all the pages in your web site in a single place It can be used for both HTML and XML pages CSS has the following disadvantage Most browsers don t support it very well 3 CSS syntax I CSS syntax is very simple it s just a file containing a list of selectors to choose tags and descriptors to tell what to do with them Example h1 color green font family Verdana says that everything included in h1 HTML heading level 1 tags should be in the Verdana font and colored green A CSS file is just a list of these selector descriptor pairs Selectors may be simple HTML tags or XML tags but CSS also defines some ways to combine tags Descriptors are defined in CSS itself and there is quite a long list of them 4 CSS syntax The general syntax is selector property value or selector selector property value property value where selector is the tag to be affected the selector is case sensitive if and only if the document language is case sensitive property and value describe the appearance of that tag Spaces after colons and semicolons are optional A semicolon must be used between property value pairs but a semicolon after the last pair is optional 5 Example of CSS This is a comment h1 h2 h3 font family Arial sans serif use 1st available font p table li address apply to all these tags font family Courier New quote values containing spaces margin left 15pt specify indentation p li th td font size 80 80 of size in containing element th background color FAEBD7 colors can be specified in hex body background color ffffff h1 h2 h3 hr color saddlebrown adds to what we said before a link color darkred an unvisited link a visited color darkred a link that has been visited a active color red a link now being visited a hover color red when the mouse hovers over it Adapted from http www w3schools com css demo default htm 6 More about selectors I As we have seen an XML or HTML tag can be used as a simple element selector body background color ffffff You can use multiple selectors em i color red You can repeat selectors h1 h2 h3 font family Verdana color red h1 h3 font weight bold color pink When values disagree the last one overrides any earlier ones The universal selector applies to any and all elements color blue When values disagree more specific selectors override general ones so em elements would still be red 7 Example of overriding 8 More about selectors II A descendent selector chooses a tag with a specific ancestor p code color brown selects a code if it is somewhere inside a paragraph A child selector chooses a tag with a specific parent h3 em font weight bold selects an em only if its immediate parent is h3 An adjacent selector chooses an element that immediately follows another b i font size 8pt Example b I m bold and b i I m italic i Result will look something like I m bold and I m italic 9 More about selectors III A simple attribute selector allows you to choose elements that have a given attribute regardless of its value Syntax element attribute Example table border An attribute value selector allows you to choose elements that have a given attribute with a given value Syntax element attribute value Example table border 0 10 More about values As we have seen the syntax for a CSS rule is selector selector property value property value The value is whatever occurs between the colon and the semicolon or closing brace Example font family Trebuchet Verdana sansserif This means to use the Trebuchet font for everything if it is available else use the Verdana font if available else use whatever sans serif font the browser uses as default section border thin solid blue This means to put a borders around section elements the borders are to be thin and solid and blue 11 The class attribute The class attribute allows you to have different styles for the same element In the style sheet p important font size 24pt color red p fineprint font size 8pt In the HTML p class important The end is nigh p p class fineprint Offer ends 1 1 97 p To define a selector that applies to any element with that class just omit the tag name but keep the dot fineprint font size 8pt 12 The id attribute The id attribute is defined like the class attribute but uses instead of In the style sheet p important font style italic important font style italic In the HTML p id important or class and id can both be used and do not need to have different names p class important id important 13 div and span div and span are HTML elements whose only purpose is to hold CSS information div ensures there is a line break before and after so it s like a paragraph span does not Example CSS div background color 66FFFF span color color red HTML div This div is treated like a paragraph but span class color this span span is not div 14 Using style sheets There are three ways of using CSS External style sheet Embedded style sheet This is the most powerful Applies to both HTML and XML All of CSS can be used Applies to HTML not to XML All of CSS can be used Inline styles Applies to HTML not to XML Limited form of CSS syntax 15 External style sheets In HTML within the head element link REL STYLESHEET TYPE text css HREF Style Sheet URL As a PI in the prologue of an XML document xml stylesheet href Style Sheet URL type text css Note text css is the MIME type 16 Embedded style sheets In HTML within the head element style TYPE text css CSS Style Sheet style Note Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that don t understand CSS 17 Inline style sheets The STYLE attribute can be added to any HTML element html tag STYLE property value html tag STYLE property value
View Full Document
Unlocking...