Software Engineering for Internet Applications Cascading Style Sheet (CSS) ADF 11/20/2018
Cascading Style Sheets a simple design language intended to simplify the process of making web pages presentable handles the look and feel control the style of a web document in a simple and easy way Text color, fonts style, paragraph spacing, columns size and layout, background images or colors, as well as a variety of other effects 11/20/2018
CSS Syntax A style rule is made of three parts Selector Property Value an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc Property a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value alues are assigned to properties. For example, color property can have value either red or #F1F1F1 etc. 11/20/2018
CSS Syntax selector { property : value } table { border :1px solid #C00; } h1 { color: #36CFFF; } * { color: #000000; } #black { color: #000000; } 11/20/2018
CSS Syntax color: #36C; selector { property : value } h1, h2, h3 { font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } 11/20/2018
CSS - Inclusion Associate styles with HTML document Embedded CSS – the <style> element Inline CSS - The style Attribute External CSS - The <link> Element Imported CSS - @import Rule 11/20/2018
Embedded CSS – The <style> Element using the <style> element. placed inside <head>...</head> tags <!DOCTYPE html > <html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 11/20/2018
Inline CSS – The style Attribute use style attribute of any HTML element to define style rules These rules will be applied to that element only <element style = "...style rules...."> <html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html> 11/20/2018
External CSS - The <link> Element The <link> element can be used to include an external stylesheet file An external style sheet is a separate text file with .css extension <head> <link type = "text/css" href = "..." media = "..." /> </head> 11/20/2018
External CSS - The <link> Element mystyle.css h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } Index.html <head> <link type = "text/css" href = "mystyle.css" media = " all" /> </head> 11/20/2018
Imported CSS - @import Rule @import is used to import an external stylesheet in a manner similar to the <link> element <head> @import “URL"; </head> <head> @import (“URL“); </head> <head> @import "mystyle.css"; </head> 11/20/2018
CSS Rules Overriding Inline style sheet takes highest priority. override any rule defined in <style>...</style> tags or rules defined in any external style sheet file. <style> rule takes second priority Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. Any rule defined in external style sheet file takes lowest priority rules defined in this file will be applied only when above two rules are not applicable. 11/20/2018
Question?
Home Task create a static webpage in technicolor with the following style properties: font family, font sizes, background color or image, border style, table styles, list style, anchor link styles (hover, etc), text align Create 2 more static webpages with the same content yet create a completely different CSS styles In 1 of the 2 new forms, use grid instead of table In 1 of the 2 new forms, use external CSS 11/20/2018
11/20/2018