CSS Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.
Advertisements

Copenhagen, 6 December 2004 Modern CSS Principles Miruna Bădescu Finsiel Romania.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Cascading Style Sheets
Cascading Style Sheets
Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Today CSS HTML A project.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
CSS(Cascading Style Sheets )
1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
CSS Cascading Style Sheets Brief Introduction
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
4.01 Cascading Style Sheets
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading style sheets (CSS)
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
CONTROLLING Page layout
BEGINNER WEB DESIGN. INTRODUCTION Vocabulary Design Tools of the Trade HTML CSS.
WebD Introduction to CSS By Manik Rastogi.
Laying out Elements with CSS
Working with Cascading Style Sheets
Cascading Style Sheets™ (CSS)
4.01 Cascading Style Sheets
CSS Layouts: Grouping Elements
Web Systems & Technologies
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
The Internet 10/25/11 XHTML Tables
Cascading Style Sheets
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Objectives Create a reset style sheet Explore page layout designs
MORE Cascading Style Sheets (The Positioning Model)
DynamicHTML Cascading Style Sheet Internet Technology.
Cascading Style Sheets™ (CSS)
DynamicHTML Cascading Style Sheet Internet Technology.
How to use the CSS box model for spacing, borders, and backgrounds
Floating and Positioning
Laying out Elements with CSS
The Internet 10/20/11 CSS Layout
4.01 Cascading Style Sheets
Web Programming and Design
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets™ (CSS)
Presentation transcript:

CSS Internet Engineering Spring 2014 Bahador Bakhshi CE & IT Department, Amirkabir University of Technology

Questions  Q3) How is presentation of web page described?web page  Q3.1) Is it by HTML tags?  Q3.2) How to select elements?  Q3.3) How to modify presentation?  Q3.4) How are rules cascaded?  Q3.5) How are element positioned? 2

Homework  HW-2: Client Side Static Web Site  HTML + CSS  No JS, PHP, …  Deadline  At least one week after finishing CSS lecture 3

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 4

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 5

Introduction  XHTML: Structure of web pages  However, most XHTML tags have their own presentation  Traditionally, HTML is used for document structure & presentation (physical formatting) test  No reusability  Tremendous repeated formatting tags  Structure and Formatting mixed up mess 6

Introduction (cont’d)  (in XHTML) Separation between  Content & Structure  Presentation  Content & Structure are specified by XHTML tags  Cascading Style Sheet (CSS) defines the presentation and style  How elements are presented in web pages!!  Override the default presentation of elements  If presentation is not specified, browser uses its own default presentation for HTML elements 7

Introduction (cont’d) 8 XHTML Test CSS h1 {color: green} Rendering Web document on Server Browser Test

Introduction (cont’d)  Created by Hakon Wium Lie of MIT in 1994  The W3C standards (CSS 1,2,3) to control visual presentation of web pages  Uses a different syntax than HTML/XHTML  A different language  Works with the common visual browsers  Greatly simplifies visual design, site management and content maintenance 9

Introduction (cont’d)  Advantages  Reuse styling rules in multiple pages  Make easier site management  Saves time  More control over layout  Styles + JavaScript  dynamic presentation  Multiple presentation of the same content  Media dependent presentation 10

CSS Styles  Styles are defined by style rules  Selector + Declaration block  General structure of style rules Selector1, …, SelectorN{ Property1: Value1, …, ValueN; Property2: Value2, …, ValueN; … /* This is comment */ } 11

Selectors  Tag based  Class based  ID based  DOM tree based  Attribute based  …  We will discuss later in more detail 12

Sample Properties  Font:  font-family  font-size  font-style  Text:  text-align  color  letter-spacing  word-spacing  Background:  background-color  background-image 13

Sample Properties (cont’d)  Border:  border-color  border-style  border-width  Position: bottom, left, right, …  Table  spacing  color  alignment  List  style  style-image  Complete list in 14

Values  Values depend on property  Predefined keywords  left, right, italic, none, …  Color  red, green, blue, …  #XXYYZZ where 00 <= XX,YY,ZZ <=FF  rgb(XX, YY, ZZ) where 0 <= XX,YY,ZZ <=255 ……  Size & Length  %, cm, in, mm, pt, px, em, … 15

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 16

Inline Styles  Add styles to each tag within HTML file  Used to format a single HTML element  Selector is implicitly specified  Style is given as an attribute Test Heading 1  Element based  Hard to update  Violates structure-style separation 17

Internal (embed) Styles  A style is used in the entire HTML file  Used to control style of elements (e.g., all h1) in a single web page h1 {color: red; font-family: sans-serif;} 18

External Styles  A text file containing style rules  Used to control style in multiple web pages  Example  A text document with.css extension contains h1, h2, h3, h4, h5, h6 { color: #FF0000; font-family: sans-serif; } 19

External Styles (cont’d)  External style file is used in XHTML web page through linking it to the web page External CSS 20

External Styles Advantages  Avoid repeating styles for each page  It is easier to update whole site  CSS can be cached independent of HTML  Different style sheets can be attached to the same document  Personalized & Customization & Media dependent  A style sheet can import and use styles from other style sheets 21

Media Depended Presentation  Web page presentation can be depended on media  Available media types  all  screen  print ... 22

Media Depended Presentation 23

Media Depended Presentation 24

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 25

Selectors  * : universal selector (everything)  XHTML Tags  Attribute based  Special attributes  Class based: per-class style  ID based: per-element styles  In combination with tag names  In general attribute name, value, …  DOM tree based  Child & Descendant, Sibling, …  Pseudo-class & Pseudo-element 26 We may not need all these selectors at the beginning; however, they are powerful tools that simplify complex CSS rules

Element Selector * {color: blue } h1 {text-decoration: underline } p {font-style: italic } Testing Element Selector This is a paragraph 27

id Selector  Assign ID to elements This is blue heading This is red heading  Define style for each ID # blue_heading {color:blue;} # red_heading {color:red;} 28

class Selector  Assign class to element This is blue heading 1 This is red heading 1 This is blue heading 2 This is red heading 2  Define style of each class. blue_heading {color:blue;}. red_heading {color:red;} 29

Combined Element & Class Selector.all {color: blue;} h2.all {color: red;} h3.all {color: black;} Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 30

Multiple Classes.red {color:red;}.bold {font-weight:bold;} This is a red paragraph This is a bold paragraph This is a red-bold paragraph 31

and in CSS  is used to  Define a block-level element (without any presentation)  More general, in is allowed; but in is not allowed  Group block-level elements  Block-level: Line break before & after elements  Next block-level goes underneath of this block  e.g.,,, …,,,,, …  is used to  Define an inline element (without any presentation)  Group inline elements  Inline: No line break  Next inline elements goes right after this element  e,g.,,,,, … 32

and in CSS (cont’d)  XHTML : This is a green paragraph using div. But, this is red using span.  CSS :.green_color {color:green; font-weight:bold;} #red_color {color:red;} 33

Attribute Selector A paragraph without "id" attribute A paragraph with id=test1 A paragraph with id=test2 A paragraph with id=test3 p[myid] {color:red} p[myid="test3"] {color:blue} 34

Pseudo-Classes/Elements  Some XHTML elements have states, e.g,  Normal (Unvisited) or Visited  Styling is applied to all the states  Pseudo-classes are used to style the states  E.g., styling links (must be in this order) a:link {color:#FF0000} a:visited {color:#00FF00} a:hover {color:#FF00FF} a:active {color:#FFFFFF} 35

Pseudo-Classes/Elements (cont’d)  first-child  Element that is the first child of its parent ul li:first-child {color: blue;}  first-letter (in heading & paragraph) p:first-letter {font-size: 200%;}  first-line (in paragraph) p:first-line {color: red;}  before & after  Mainly used with {content: url(something);} to insert an object before & after and element.google:after{content:url("google_logo.gif");} 36

Pseudo-Classes/Elements (cont’d) p code :first-child {color: blue;} p :first-letter {font-size: 200%;} p :first-line {color: red;}.google :after{content:url(" google_logo.gif ");} This is the first code, this is second code. Google is a big company. 37

DOM based: Child Selector  To select a (direct) child of parent parent > child {property: value;} ol {color: red;} ol > li {color: blue;} Item 1 Netsted 1 Item 2 def: Definition 38

DOM based: Descendant Selector  To select descendant of a tag tag descendant {property: value;} ol {color: red;} ol li {color: blue;} Item 1 Netsted 1 Item 2 def: Definition 39

DOM based: Sibling Selector  To select tag2 which is immediate successive sibling of tag1 tag1 + tag2 {property: value;}  To select tag2 which is a successive sibling of tag1 tag1 ~ tag2 {property: value;} 40

Sibling Selector h2+p {color:red;} h3~p {color:green;} Heading 2 Next sibling of h2 Another sibling of h2 Heading 3 Next sibling of h3 Another sibling of h3 41

Outline  Introduction  Style Types  Selectors  Cascading  Inheritance  Conflict & Overriding  Box-Model  Layout Design  CSS3 42

Cascading External-1 Internal-n Inline External-n Internal-1 Browser Default User Assuming there is any conflicting style and external styles are linked before internal styles in the head

Cascading (cont’d) test.css: p {font-style: italic ;} XHTML: <link href=" test.css " rel="stylesheet" type="text/css" /> p {color: blue ;} Test Text 1 Test Text 2 44

Inheritance  XHTML document is interpreted as a tree  DOM tree  Children inherit styles from their parent  Not all properties, e.g. border p {font-style: italic;} code {color: red;} This is a code in paragraph 45

Conflicting Styles & Overriding  What happen if multiple style rules specify different values for the same property of an element?  External style: p {color: red}  Internal style: p {color: blue}  They are conflicting  What is the final rule?  It depends on  Rule types, order, …  Specified by overriding algorithm 46

Overriding  In general, more specific & closer to the element styles override more general styles, e.g.,  Inline > Internal  Inline > External  Inline > ID > Class > Element (Tag) > Div/Span  Internal > External  If external is linked before, otherwise it is reversed  Children’s style overrides parent’s style 47

Overriding (cont’d) p {color: red;} p.c {color: blue;} p#i {color: green;} <p class=" c " id=" i " style="color: black;"> This is test This is test 48

Overriding (cont’d)  To prevent overriding, add !important h1{font-style: italic; color: blue !important} Heading 1 <h1 style="font-style: normal; color=red"> Heading 1  Be careful: inherited properties are overridden even if they are important 49

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 50

CSS Box Model  Each (usually block-level) element is a box  Content  Padding  Border  Margin 51

CSS Box Model CSS Properties  Borders  Color, Width, Style, …  Individual or altogether  Spaces (Padding & Margins)  Individual or altogether  Content  Dimensions  Background  Color  Image 52

CSS Box Model (cont’d)  Border  border-left, border-right, border-bottom, border-top  border : All borders  border- X -color, border- X -style, border- X -width  Padding  padding-left, padding-right, padding-top, padding- bottom  padding: All padding  Margin  margin-left, margin-right, margin-top, margin-bottom  margin: All margins  Content (dimensions)  width, height, max-width, max-height, … 53

CSS Box Model (cont’d).box { border-style: solid; border-width: 3px; border-color: black; margin-left: 0.5cm; padding-left: 3cm; margin-right: 3cm; padding-right :0.5cm; } This is the first box, and this is the second box 54

Vertical Margin Collapse  When a bottom margin of one element meets the top margin of another, only the larger of the two will show  This only applies to vertical margins; the same is not true for left and right margins 55

Content: Background  background-image & background-color body{ background-image: url("linux.jpg"); font-size: 3em; } p {background-color: white;} p#red{ width: 50%; border-style: solid; border-width: 8px; border-color: white; background-color: #CF0000; } This is a normal paragraph. This is the red paragraph. 56

Content: Background Image (cont’d)  Background image repetition  background-repeat  repeat (default)  no-repeat  repeat-x  repeat-y  Avoid background image scrolling  background-attachment : fixed  Background image position  background-position : X Y 57

Content: Background Image (cont’d) 58

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 59

Layout Design = Element Positioning  Three positioning schemes  Normal  Block-level elements flow from top to bottom  Inline elements flow from left to right  Specified position  Element is taken out from normal flow  It is placed in the specified position  Float  Elements is taken out from normal flow  It is placed as far right/left as possible to previous element 60

Specified Positioning  Positioning of block-level element can be specified using the position property 61

Relative Positioning  A relative positioned element is positioned relative to its normal position  The reserved space for the element is still preserved in the normal flow  The content of relatively positioned elements can be moved and overlap other elements  Position is specified by top, left, right, bottom properties, e.g.,  top: -20px  move the element 20px upward  top: +20px  move the element 20px downward 62

Relative Positioning Example p{border-style:solid; border-width:2px; border-color:black; width:300px; } #m{ position:relative; left:100; top:150; border-color:red; } The paragraph 1 The paragraph 2 The paragraph 3 The paragraph 4 63

Absolute Positioning  An absolute position element is positioned relative to the first parent element that has a position other than static  If no such element is found, the containing block is  Absolute positioned elements are removed from the normal flow  The document and other elements behave like the positioned element does not exist  The positioned elements can overlap other elements  Position is specified by top, left, right, bottom properties 64

Absolute Positioning Example ul{position:relative;} li{border-style:solid; border-width:2px; border-color:black; width:300px; } #m{position:absolute; left:100; top:100; border-color:red; } The item 1 The item 2 The item 3 The item 4 65

Absolute Positioning Example ul{position:static;} li{border-style:solid; border-width:2px; border-color:black; width:300px; } #m{position:absolute; left:100; top:100; border-color:red; } The item 1 The item 2 The item 3 The item 4 66

Fixed Positioning  An element with fixed position is positioned relative to the browser window   Its position does not change by scrolling the page  Fixed positioned elements are removed from the normal flow  The document and other elements behave like the fixed positioned element does not exist  Fixed positioned elements can overlap other elements  Position is specified by top, left, right, bottom properties 67

Positioning Example # top {position: absolute; left: 100px; top: 10px;} # centerfix {position: fixed; left: 100px; top:100px;} # overlap {position: relative; left:-10px; top:-30px;} p {border-style: solid; width:150px; height:40px; } div {border-style: solid; border-color: blue;} Top Center fix Overload 68

Controlling Overlap Order  Elements can overlap other elements  When positioned out of the normal flow  The z-index property specifies the stack order of an element  positive or negative stack order img {position:absolute; left:0px; top:0px; z-index:-1;} h1 {color:red;} This is a Linux 69

Float Design  With floating, an element is pushed left or right  As far as possible in the row that it would be positioned in when the normal flow is used  Float outer edge touches containing block edge or outer edge of another float  Space is reserved for the element +  Content (text) of other elements wraps around it  Other elements (typically) don’t overlap with floats  Configured using  float: left | right | none 70

Basic Float Example.float{float:left; 1 … 1 This is a test 2 … 2 This is a wallpaper for Linux desktop. 3 … 3 This is a wallpaper for Linux desktop. 4 … 4 This is a wallpaper for Linux desktop. 5 … 5 71

Elements Overlap with Float  Normal contents don’t overlap with float  Background & Border of inline don’t overlap  Background & Border of block may overlap p {border-style: solid;}.float{float:left; color:red;}.text {border-style: solid; border-color: blue; border-width:2px; background-color: red} img {padding-left:20px;} This is a wallpaper for Linux desktop. 3 … 3 This is a wallpaper for Linux desktop. 4 … 4 72

Vertical Margin Collapse in Float  Vertical margins are not collapsed for floats p{border-style: solid; width:45%; margin-top:80px; margin- bottom:40px; height:80px;}.float{float: right;} #top{width: 100%;} Top

Clearing around Float Elements  Remark: Contents of other elements wrap around previously positioned float object  To stop wrapping content of an element around a float object, the normal element must have clear  clear attribute can be set to left, right, or both  Setting clear attribute of element to left (right)  My content does not wrap around any float object that is in left (right) side of me  In other words, the content of the element is rendered if the float object wouldn't be float  Applicable only for block-level elements 74

Clear Example p {border-style: solid;}.float{float:left;}.clear{clear:left;} This is a wallpaper for Linux desktop. 1…1 This is a wallpaper for Linux desktop. 2…2 This is a wallpaper for Linux desktop. 3…3 This is a wallpaper for Linux desktop. 4…4 75

Sample Application of Float & Clear #head {border: 3px black solid; } #left {border: 3px red solid; float: left; width: 50%; } #right {border: 3px blue solid; float: right; width: 30%; } #footer {border: 3px green solid; } Two Columns with Float This is header Left Column This is a paragraph in the left column 1 … 1 Right Column Menu Item 1 Menu Item 2 Footer This is footer. 76 clear: right; clear: both;

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 77

CSS3  W3C is working on CSS3  The next standard of CSS  CSS3 is split up into modules  About 30 modules  Old specification has been split into smaller pieces, and new ones are also added  The CSS3 specification is still under development  Many of the new CSS3 properties have been implemented in modern browsers  78

(Sample) CSS3 Modules  2D Transforms  Manipulation of content in two dimensions, such as rotating, scaling, and skewing objects  3D Transforms  Extends 2D Transforms to manipulate elements in a three-dimensional space  Animations  To modify CSS property values over time, such as position or color, to create animated layouts 79

(Sample) CSS3 Modules  Backgrounds and Border  Multiple backgrounds, a variety of background properties for positioning and sizing, new border properties with images and shadows  Web Fonts  Defines downloadable fonts  Multi-column Layout  Defines how to flow text into many columns 80

CSS3 Examples  Text shadowing h1 {text-shadow: 5px 5px 5px #FF0000;}  Web font-family: myFirstFont ; src: url('sansation_light.ttf') } div {font-family: myFirstFont ;} Using the new font 81

CSS3 Examples: 2D Transformation Hello. This is a DIV element.  transform:rotate(30deg);  transform:scale(2,4); 82

CSS3 Examples: Multi-Column. newspaper {column-count:3;} This is a multi-column div

Outline  Introduction  Style Types  Selectors  Cascading  Box-Model  Layout Design  CSS3 84

CSS Tools  Validation  W3C validator  Firefox add-ones  Chrome “inspect element”  On the fly CSS modification  Firefox Web Developer CSS Editor  Google Chrome 85

Answers  Q3.1) Is it by HTML tags?  No, it is the responsibility of CSS  CSS = Presentation rules + Cascading  Q3.2) How to select elements?  Name, Class, Id, DOM based, pseudo, …  Q3.3) How to modify presentation?  Value of so many attributes (color, font, size, …)  Q3.4) How are rules cascaded?  External to inline, Inheritance in DOM, Conflict resolving algorithm  Q3.5) How are element positioned?  Box Model + Normal, Specified (relative, absolute, fixed) & Float 86

Homework  Deadline of the homework 2 is  20:00  92/12/27 87

References  Reading Assignment: Chapter 3 of “Programming the World Wide Web”  Jon Duckett, “Beginning HTML, XHTML, CSS, and JavaScript”, Chapters 7 and 8  Thomas A. Powell, “HTML & CSS: The Complete Reference, 5 th Edition”, Chapters 4, 5, and 6   88