Lecture 3 CSS - Web Programming PDF

Web Programming Presented by Dr Mohamed Abdelhafeez Lecture 3 CSS 1 Web Programming 22:04 lec3 Dr Walid M. Aly  Exampl...

Web Programming Presented by Dr Mohamed Abdelhafeez Lecture 3 CSS 1 Web Programming 22:04 lec3 Dr Walid M. Aly  Example of pages created using CSS 2 Web Programming 22:04 lec3 Dr Walid M. Aly  Motivation to invent CSS HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: – This is a heading – This is a paragraph. Formatting tags like , and color attributes were added to the HTML 3.2 specification. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. A mixture of content and appearance in a data set is difficult to maintain or modify. XHTML necessarily mixes style and content, but css help the separation. 3 Web Programming 22:04 lec3 Dr Walid M. Aly  CSS CSS : Cascaded Style Sheets CSS provides the means to control and change presentation of HTML documents separately from declaring content Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents Current version :CSS4 (2017) Web Programming 22:04 lec3 Dr Walid M. Aly  The 3 Levels of Cascaded Style Sheets 1. Inline - specified for a specific occurrence of a tag and apply only to that tag -Inline style sheets appear in the tag itself – Inline level is not recommended This is a paragraph. 2. Document-level style sheets - in the style element and apply to the whole document in which they appear -Document-level style sheets appear in the head of the document Font properties h2 {font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold} h3 {font-family: 'Courier New'; font-size: 18pt} 3- External style sheets - separate style sheet files (.CSS files) and can be applied to any number of documents and are saved as separate files, The link to an external style sheet must appear in the head of the document Web Programming 22:04 lec3 Dr Walid M. Aly  CSS cascade hierarchy The closest level style sheet has precedence Web Programming 22:04 lec3 Dr Walid M. Aly  Inline Style Specification Style sheet appears as the value of the style attribute Inline styling is useful for applying a unique style to a single HTML element The style attribute can contain any CSS property General form: style = "property_1: value_1; property_2: value_2; … property_n: value_n;” Examples: Formatting a paragraph This is an example of a paragraph Nonunderlined Link InLineDemo.html Visit AAST Web Programming 22:04 lec3 Dr Walid M. Aly  CSS Properties There are a lot of different properties in different categories: Category Properties Background Properties background-image, background-color,….. , background Font Properties font-family, font-size,……,font List Properties list-style-image,…,.. Text Properties color, text-align, text-shadow p h1 { { font-size:10px; color:red; } } A full list of properties can be acquired from the internet:- http://www.htmldog.com/reference/cssproperties/ http://www.w3schools.com/cssref/ Web Programming 22:04 lec3 Dr Walid M. Aly  Document Style Specification Style sheet appears as a list of rules that are the content of a tag The style tag apperas in the section The tag can include the type attribute, set to "text/css“,not required for HTML5 rule list Form of the rules: selector {property_1:value_1; property_2:value_2; …; property_n:value_n;} Different type of selectors exist. Web Programming 22:04 lec3 Dr Walid M. Aly  1-Simple Selector A CSS rule has two main parts: a selector, and one or more declarations. In simple selector , The selector is a tag name or a list of tag names, separated by commas. All occurrences of this tag will be affected. h1 {font_size: 24pt;} p {color:red;text-align:center;} h2, h3 {font_size: 20pt;} p { color:red; text-align:center; 10 Web Programming 22:04 lec3 } Dr Walid M. Aly Example :Simple Selector with Document Style Specification Font properties h2 {font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold;color:red;} h3 {font-family: 'Courier New'; font-size: 18pt;} Chapter 1 Introduction 1.1 The Basics of Computer Networks SimpleSelectorDemo.html 11 Web Programming 22:04 lec3 Dr Walid M. Aly  2-Tag Class Selector Used to allow different occurrences of the same tag to have different style specifications according to a certain class. Classes are defined in the content of a style tag. A style class has a name, which is attached to a tag name p.narrow {property/value list} p.wide {property/value list} The class you want on a particular occurrence of a tag is specified with the class attribute of the tag......... Any other tags than will ignore the narrow and wide classes Web Programming 22:04 lec3 Dr Walid M. Aly  Example :Tag class Selector with Document Style Specification Class Selector Demo p.big {font-size: 20pt; font-style: italic; font-family: 'Times New Roman';} p.small {font: bold 10pt 'Courier New'; color:green} Font Shorthand If a job is worth doing, it's worth doing right. Two wrongs don't make a right, but they certainly can get you in a lot of trouble. 13 Web Programming ClassSelectorDemo.html 22:04 lec3 Dr Walid M. Aly  3-Generic class Selectors A generic class can be defined if you want the same style to apply to more than one kind of tag A generic class must be named, and the name must begin with a period.really-big { … } Use in body of doc like normal style class …... … Web Programming 22:04 lec3 Dr Walid M. Aly  Using Generic class Selectors ……...para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style. > Test Web Programming 22:04 lec3 GenericClassSelectorDemo.html Dr Walid M. Aly  4-id Selectors …….. id selector allow the application of a style to one specific element #para1 General form: { #specific-id text-align:center; {property-value color:red; list} } e.g. #section3 {font- size: 20} In HMTL doc: 3. Properties for sale Hello World! This paragraph is not affected by the style. Your code will not pass validation if you use the same id on more than one element You can also declare with the id selector , the tage ex :p#format1 Web Programming 22:04 lec3 IDSelectorDemo.html Dr Walid M. Aly  5-Selectors with Pseudo Classes Pseudo classes are styles that apply when something happens, rather than because the target element simply exists Syntax : selector:pseudo-class {property:value;} Example: a:link { color: red } a:visited { color: blue } a:hover { color: lime } p:first-line {font-size: large} p:first-letter {color : blue} hover class applies when the mouse cursor is over the element focus class applies when an element has focus Web Programming 22:04 lec3 Dr Walid M. Aly  ….. Pseudo Demo input:hover {background: pink; color: red;} input:focus {background: lightblue; color: blue;} a:link { color: red } a:visited { color: blue } a:hover { color: lime } p:first-line {font-size: 50} p:first-letter {color : blue} this example shows how the pesuedo classes work Your name: visit AAST web site Web Programming pseudo.html 22:04 lec3 Dr Walid M. Aly  6-Contextual selectors – List element hierarchy and this will apply style only to child elements in specified position in body of document p em {color:red} P b {color:blue} Hello there Hello there student student are child of 19 Web Programming 22:04 lec3 Dr Walid M. Aly  7-Universal Selectors Definition and Usage The * selector selects all elements. The * selector can also select all elements inside another element * { css declarations; } * {color: red;} – - Applies to all elements in the document Select all elements inside elements and set their background color to yellow: div * { background-color: yellow; } 20 Web Programming 22:04 lec3 Dr Walid M. Aly  External style sheets An external style sheet is ideal when the style is applied to many pages.. Each page must link to the style sheet using the tag. The tag goes inside the head section Styles are saved in external.css files. External style sheets are in separate files, potentially on any server on the Internet – A tag is used to specify that the browser is to fetch and use an external style sheet file You can have more than link tag in the head tag which means you can have more than one style sheets Web Programming 22:04 lec3 Dr Walid M. Aly  Example Simple Selector with on External-level style sheets p.big {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; } p.small {font: bold 10pt 'Courier New';} Styles.css h2 {font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold} h3 {font-family: 'Courier New'; font-size: 18pt} External style sheets ……… 22 Web Programming 22:04 lec3 Dr Walid M. Aly  The tag The tag defines logical divisions defined in your Web page. gives the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text. div tags can not be contained within any other element they have style , id and class attributes div tag is used mainly with CSS.colorMode1 {color:red;} this is not formatted this is a line this is another line this is another line this is not formatted Web Programming 22:04 lec3 Dr Walid M. Aly DivDemo.html  The tag Instead of the HTML div tag, defined for block-level content, the HTML span tag is used as in-linethey have style , id and class attributes.colorMode1 {color:red;}.colorMode2 {color:blue;} this is not formatted this is a line this is another line this is another line this is not formatted SpanDemo.html Web Programming 22:04 lec3 Dr Walid M. Aly  CSS div Tips Combing 2 classes :The class names may occur in any order and must be div.format1{ background-color:red; } div.format2{ border: solid 4px black; width:250px; } Testing combining classes Another way is by nesting div tags. Testing combining classes CombinibgClasses.html Web Programming 22:04 lec3 Dr Walid M. Aly  Conflict Resolution - A conflict occurs when there are two or more values for the same property on the same element - Sources of conflict: 1. Conflicting values between levels of style sheets 2. Within one style sheet 3. Inheritance can cause conflicts 4. Property values can come from style sheets written by the document author, the browser user, and the browser defaults - Resolution mechanisms: 1. Precedence rules for the different levels of style sheets 2. Source of the property value 3. The specificity of the selector used to set the property value 4. Property value specifications can be marked to indicate their weight (importance) Web Programming 22:04 lec3 Dr Walid M. Aly  Conflict Resolution (continued) - A rule that has the !important directive will always be applied no matter where that rule appears p { color: red !important; } - Conflict resolution is a multistage process, called the cascade: 1. Gather all of the style specs from the different levels of style sheets 2. All available specs, from all sources, are sorted by origin and weight, using the following rules, which are given in precedence order: a. Important declarations with user origin b. Important declarations with author origin c. Normal declarations with author origin d. Normal declarations with user origin e. Any declarations with browser origin Web Programming 22:04 lec3 Dr Walid M. Aly  Conflict Resolution (continued) 3. If any conflicts remain, sort them by specificity: a. id selectors b. Class and pseudo-class selectors c. Contextual selectors d. Universal selectors 4. If there are still conflicts, resolve them by precedence to the most recently seen specification p { color: red; } p { color: black; } the paragraph text will be black Web Programming 22:04 lec3 Dr Walid M. Aly  CSS Validation http://jigsaw.w3.org/css-validator/ Note: If you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid. 29 Web Programming 22:04 lec3 Dr Walid M. Aly