Download presentation
Presentation is loading. Please wait.
1
Software Engineering for Internet Applications
Cascading Style Sheet (CSS) ADF 11/20/2018
2
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
3
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
4
CSS Syntax selector { property : value }
table { border :1px solid #C00; } h1 { color: #36CFFF; } * { color: #000000; } #black { color: #000000; } 11/20/2018
5
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
6
CSS - Inclusion Associate styles with HTML document
Embedded CSS – the <style> element Inline CSS - The style Attribute External CSS - The <link> Element Imported CSS Rule 11/20/2018
7
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
8
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
9
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
10
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
11
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
12
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
13
Question?
14
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
15
11/20/2018
Similar presentations
