A really fairly simple guide to: mobile browser-based application development (part 2, CSS) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

Today CSS HTML A project.
CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
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.
กระบวนวิชา 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.
Tutorial 4: Creating page layout with css
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
1 Cascading Style Sheets C S S. 2 What is CSS? A simple mechanism for controlling the style of a Web document without compromising its structure. It allows.
4.01 Cascading Style Sheets
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
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.
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.
Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.
Cascading style sheets (CSS)
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.
The Characteristics of CSS
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
Understanding CSS Essentials: Content Flow, Positioning, and Styling
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / Chris Greenhalgh.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.
CSS: Cascading Style Sheets. 2 What are Style Sheets A style sheet is a mechanism that allows to specify how HTML (/XHTML/XML) pages should look The style.
CSS – Cascading Style Sheets Fred Durao
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.
Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.
CO1552 – Web Application Development Cascading Style Sheets.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
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.
Advanced Web Development Instructor: Thomas Bombach.
Cascading Style Sheets
Cascading Style Sheets Objective: Create an external style sheet, embedded style sheet, and an inline style to change the look and feel of a web site.
Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
Introduction to CSS September 20, Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation CSS guide and tutorial.
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
CSS Cascading Style Sheets *referenced from
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Basic Webpage Design Cascading Style Sheet (CSS).
HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /16.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
CSS (Cascading Style Sheets). CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add.
CS3220 Web and Internet Programming CSS Basics
CS3220 Web and Internet Programming CSS Basics
CS3220 Web and Internet Programming CSS Basics
Presentation transcript:

A really fairly simple guide to: mobile browser-based application development (part 2, CSS) Chris Greenhalgh G54UBI / Chris Greenhalgh

Content CSS Inline styles Common CSS properties Style-sheets Simple CSS Selectors Note: you can skip CSS to begin with, and come back to it if and when you need to polish the appearance of you page/application 2Chris Greenhalgh

CSS Cascading Style Sheets (CSS) is a (set of) standard(s) for specifying the detailed appearance of web pages CSS has two main parts: – Ways to select elements within the page (document), i.e. “selectors” – Ways to specify the appearance of those elements, i.e. “properties” 3Chris Greenhalgh

Inline styling CSS properties can be specified directly for individual HTML elements using the style attribute (see next slide) Pro: – Simple and direct – no seletors Con: – Must be specified separately for each element Although by default child elements will inherit some properties, e.g. font 4Chris Greenhalgh

Inline CSS Hello Hello Some 10-point text, Bold 5Chris Greenhalgh

Some common CSS properties background-color, color – E.g. “rgb(255,0,0)” is red 255/255 red, 0/255 green, 0/255 blue = “#ff0000” = “red” text-align – centre / right / justify font-family – serif / sans-serif / monospace font-size – 10px (pixels), 10pt (point) border-style – solid, dotted, dashed, … border-width width, height – pt, px, …, %, auto, inherit min-width, max-width, min- height, max-height position – fixed, relative, absolute left, right visibility – hidden (still takes up space) display – none, inline, block 6Chris Greenhalgh

Stylesheets An external “stylesheet” is specified using a element in the HTML file header: – The stylesheet contains a list of entries: – selector { properties } The properties are applied to all document element(s) matching the corresponding selector 7Chris Greenhalgh

Using Stylesheets Pros – A single stylesheet specifies appearance for a whole page or site – No duplication of style properties per element Faster, more concise, easier to be consistent, easier to update – Separation of concerns: all styling done in stylesheet Cons – Extra file, extra download: if lost then styling lost 8Chris Greenhalgh

Main selector types Element name – E.g. “p” – Applies to all elements of that name Element class – E.g. “.CLASS” – Applies to all elements with that “class” attribute – Takes priority over element selector Element ID – E.g. “#ID” – Applies to the single element with that “id” attribute – Takes priority over element and class selector /* All paragraph elements, */ p { font-family: serif; font-size: 14pt; border-style: solid; border-width: thin; } /* elements with class 'sans' */.sans { font-family: sans-serif; } /* element with id 'Alice' */ #Alice { color: fuchsia; border-width: thick; font-family: monospace; } 9Chris Greenhalgh

A Simple CSS Example in Use 10 Hello A paragraph. Another paragraph. Paragraph with class sans Another paragraph with class sans Paragraph with class sans and id Alice. Chris Greenhalgh

Conclusions CSS is used to specify appearance of the HTML elements and content – Can be specific “inline” per element – Usually specified in a separate Style sheet You should now be able to – Specify basic styling for an HTML file, both inline and using a stylesheet 11Chris Greenhalgh

Other resources The WWW Consortium CSS working group, CSS 2.1 specification, – CSS 3 is still being standardised, but many parts of it can be used already Online tutorials, e.g. – Chris Greenhalgh