CS 428 Web Engineering Lecture 06 Introduction Cascading
CS 428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1
http: //tinyurl. com/ogqlf 6 a http: //sites. google. com/site/bsc snotes 4 u/webeng 2
CASCADING STYLE SHEET • This is the language to add presentation styling to HTML documents. • CSS is a powerful and flexible way to add format to web page for presentation. • Through CSS it is relatively easy to take simple page of text and images, formatted to present as fully professional webpage. 3
• CSS has a simple syntax, consist of selectors, properties and values it together make a style rules. • It gives developer find ways to control over how each element of page is formatted. • CSS styles can apply on HTML documents through several different ways. – Create an external CSS file. – Embed CSS code in HTML document. 4
CSS Syntax • A style rule is made of three parts: • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h 1> or <table> etc. • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. • Value: Values are assigned to properties. For example color property can have value either red or #F 1 F 1 F 1 etc. 5
• You can put CSS Style Rule Syntax as follows: selector { property: value; } • Example: You can define a table border as follows: table { border: 1 px solid #C 00 FDF; } 6
Applying CSS • There are three ways through which you apply CSS on your HTML doc. § Inline § Internal § External 7
Inline CSS • You can also embed your CSS code in HTML document. • Example: <p style=“font-family: monospace; ”> 8
INTERNAL CSS • <style></style> always placed between <head></head> tags. • Example: <style> p{ line-height: 120%; } </style> 9
EXTERNAL CSS FILE • External CSS file will always place between <HEAD></HEAD> tags. • <link rel=“stylesheet” type=“text/css” href=“main. css” /> 10
CSS Rules Overriding • Any inline style sheet takes highest priority. So it will override any rule defined in <style>. . . </style> tags or rules defined in any external style sheet file. • 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 and rules defined in this file will be applied only when above two rules are not applicable. 11
EXAMPLE • <head> <style> div { color: #9932 CC; } </style> </head> <div> <h 1>Style Sheets</h 1> <p style="font-family: monospace; color: #0000 FF; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lorem ligula. </p></div> 12
EXAMPLE • <style> a{ font-family: sans-serif; } </style> <p style="font-family: monospace; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href=“p 1. html”>Pellentesque</a> sit amet lorem ligula. Nam pulvinar nunc ac magna aliquam quis sodales dui elementum. <a href=“p 2. html”>Fusce a lacus leo. </a> </p> 13
SELECTORS • There are three types of selectors: § Tag selectors § ID selectors § Class selectors 14
Example Tag Selector <style> p{ Tag selector font-family: sans-serif; font-size: 15 pt; line-height: 150%; } </style> 15
Example Class Selector <style>. foo { font-family: sans-serif; font-size: 15 pt; class selector line-height: 150%; } </style> <p class=“foo”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar nunc ac magna aliquam quis sodales dui elementum. Fusce a lacus leo. Maecenas ut dui eu quam condimentum sagittis. </p> 16
Example Class Selector <style> p. foo { font-family: sans-serif; font-size: 15 pt; class line-height: 150%; selector } </style> <body> <h 1 class=“foo”></h 1> <p class=“foo”></p> </body> 17
Example ID Selector <style> #p 1 { ID selector font-family: sans-serif; font-size: 15 pt; line-height: 150%; } </style> <p id=“p 1”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar nunc ac magna aliquam quis sodales dui elementum. Fusce a lacus leo. Maecenas ut dui eu quam condimentum sagittis. </p> 18
RULE for ID selector • There is only be one element in a document with a particular ID selector. • ID selector can only be used once in one element/tag. 19
Descendant Selector <style> pa{ font-family: sans-serif; font-size: 15 pt; line-height: 150%; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. . Nam pulvinar nunc ac magna aliquam quis sodales dui nunc sit elementum. <a href=“page 1. html”>Donec eu nisi turpis, </a> sit amet rutrum leo. </p> Click <a href=“page 2. html”>here</a> 20
Grouping Selector • you can apply style to many selectors. • <style> h 1, p, section { color: #35 c; font-weight: bold; letter-spacing: . 4 em; } </style> 21
Grouping Class & ID Selectors • you can apply style to many selectors. <style> #content, #footer, . supplement { position: absolute; left: 510 px; width: 200 px; } </style> 22
PSEUDO SELECTOR <style> a: link { color: #008080; } a: hover { color: #FF 0000; } </style> 23
COMMENTS IN CSS <style> /* p{ font-family: sans-serif; font-size: 15 pt; } */ </style> 24
CSS – Measurement Units • CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules. • Example: border: 1 px solid red; 25
CSS UNITS of MEASURE (1/3) • # column 1 { width: 100%; } • p{ font-size: 12 pt; } • p{ font-size: 1 pc; } 26
CSS UNITS of MEASURE (2/3) • p{ margin-left: 2 ex; } • p{ padding-right: . 25 in; } • p{ padding-right: 10 mm; } 27
CSS UNITS of MEASURE (3/3) • p{ margin-left: 2 em; } • div#main { width: 600 px; } 28
CSS UNITS - Sizes • Relative length measurements: – – px (pixels – size varies depending on screen resolution) em (usually the height of a font’s uppercase M) ex (usually the height of a font’s lowercase x) Percentages (of the font’s default size) • Absolute-length measurements (units that do not vary in size): – – – in (inches) cm (centimeters) mm (millimeters) pt (points; 1 pt = 1/72 in) pc (picas; 1 pc = 12 pt) • Generally 1 em = 12 pt = 16 px = 100% 29
Unit % Description Defines a measurement as a percentage relative to another value, typically an enclosing element. Example p{ font-size: 16 pt; line-height: 125%; } cm Defines a measurement in centimeters. div {margin-bottom: 2 cm; } p{ em A relative measurement for height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12 pt, each “em” unit would be 12 pt; thus 2 em = 24 pt. p{ ex This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x. in Defines a measurement in inches. p { word-spacing: . 15 in; } mm Defines a measure in millimeters. p { word-spacing: 15 mm; } Defines a measurement in picas. A pica is equivalent to 12 points. Thus, there are 6 picas per inch. p { font-size: 20 pc; } pc letter spacing: 7 em; } font-size: 24 pt; line-height: 3 ex; } 30
Unit Description Example pt Defines a measurement in points. A point is defined as 1/72 nd of an inch. body {font-size: 18 pt; } px Defines a measurement in screen pixels. p {padding: 25 px; } 31
CSS – Colors • You can specify your color values in various formats. Format Hex Code Syntax #RRGGBB Short Hex Code #RGB Example p {color: #FF 0000; } p {color: #6 A 7; } p{ RGB % rgb(rrr%, ggg%, bbb%) color: rgb(50%, 50%); } p{ RGB Absolute rgb(rrr, ggg, bbb) color: rgb(0, 0, 255); } keyword aqua, black etc. p { color: teal; } 32
CSS Box Model • A set of rules collectively known as CSS Box Model describes the rectangular region occupied with HTML elements. • The main idea is that every element’s layout is composed of: § the actual element’s content area. § a border around the element. § a padding between the content and the border (inside the border) § a margin between the border and other content (outside the border) 33
34
Document Flow - Block Elements 35
Document Flow – Inline Elements 36
Document Flow – Larger Example 37
- Slides: 37