CIS 228 The Internet 10/18/11 Grouping XHTML. CSS Selectors Rule: selector-group { property-declaration* } Selector-group: selector *, Selector: simple-selector.

Slides:



Advertisements
Similar presentations
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Advertisements

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.
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.
More CSS CS HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Tutorial 4: Creating page layout with css
Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.
CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
CSS Dvijesh Bhatt.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Week 4.  Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets.
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.
CSS Border.
Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming.
>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.
HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Extra-simplified.  Only truly happen when the CSS and HTML are defined as separate files (external style sheet) Introduction The main idea of CSS is.
Tutorial 4 Creating Page Layouts with CSS
CSS: Cascading Style Sheets Part II. Style Syntax.
CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.
CIS 228 The Internet 11/1/11 Review HFHTML ch 8-14.
Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /16.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
CSS. What does it stand for? Cascading Style Sheet.
WebD Introduction to CSS By Manik Rastogi.
Chapter 6 - Cascading Style Sheets™ (CSS)
Cascading Style Sheets™ (CSS)
( Cascading style sheet )
CSS: Cascading Style Sheets
>> The “Box” Model
Cascading Style Sheets
Cascading Style Sheets (Layout)
CSS Applications to XML 19-Sep-18.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Cascading Style Sheets
The Internet 10/13/11 The Box Model
CSS Borders and Margins.
Second CSS Lecture Applications to XML
The Internet 10/6/11 Cascading Style Sheets
More CSS 22-Feb-19.
CS3220 Web and Internet Programming More CSS
The Internet 10/20/11 CSS Layout
CSS Applications to XML 20-May-19.
CS3220 Web and Internet Programming More CSS
CSS Applications to XML 3-Jul-19.
Cascading Style Sheets™ (CSS)
CS3220 Web and Internet Programming More CSS
Presentation transcript:

CIS 228 The Internet 10/18/11 Grouping XHTML

CSS Selectors Rule: selector-group { property-declaration* } Selector-group: selector *, Selector: simple-selector * operator Operator: descendant (“”) | child (“>”) | sibling (“+”) Simple-selector: (universal (“*”|“”)|type) context* (type is an XHTML element name) Context selectors Id-selector: #identifier Class-selector:.identifier Pseudo-class: :identifier (e.g. :link, :visited, :hover, etc.) Attribute-selector: (stay tuned)

CSS Selector Examples h1, h2, h3 p.legalese *.legalese (same as.legalese) p#footer *#footer (same as #legalese) a:link (same as :link why?) blockquote p (any paragraph inside a blockquote) blockquote > h2 (heading child of a blockquote) h1 + p (first paragraph after a heading) em em, p.legalese#footer, h1 + blockquote > p q em

The Box Model Element content is surrounded by (optional) boxes: Padding transparent space Border width style solid double groove outset dotted dashed inset ridge color if not specified, same as content text (element color) Margin transparent space

Sides Each box has four sides: top right bottom left (clockwise ordering) Properties of an individual side can be specified border-bottom-style: dotted padding-left: 10% Properties of each side can be specified in turn border-style: none double dotted inherit margin: 2em 5% 30px 6pt padding: 4em 8em (4em 8em) border-width: 3px (3px 3px 3px)

XHTML Grouping Block grouping: div element Cats For Sale Six week old Tabby … Eight week old Siamese … Inline grouping: span element Trotsky arrived

The Cascade Which declaration for property p applies on element e? Concatenate style sheets: Browser defaults User style sheet Applicable author style sheet(s) (in order) Gather declarations whose selectors match the e (If none, check inheritance) If any are “ ! important ”, ignore the rest (You can mark declarations “ ! important ”, but don't!) Ignore all but the most specific declarations The physically last remaining declaration wins

Selector Specificity Rules specified by style attributes are most specific If there is one, ignore the rest Id-selectors are most important Ignore rules with less than the most id-selectors Context-selectors are very important Ignore rules with less than the most context-selectors Type selectors are important Ignore rules containing less than the most type-selectors Remember: last remaining rule wins

The Style Attribute Three ways to attach CSS rules to a web page The style element (in ) The link element (in ) The style attribute (on an element in ) Attribute value: CSS declaration(s) Deprecated (try to avoid using) Violates separation of semantics from presentation