Making Things Look Nice: Visual Appearance and CSS CMPT 281.

Slides:



Advertisements
Similar presentations
1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets © Netskills, Quality Internet.
Advertisements

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Introduction to HTML & CSS
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
Cascading Style Sheets
Today CSS HTML A project.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
1 Styles and CSS David Douglas Sam M. Walton College of Business, University of Arkansas “Connecting scholarship and research with business practice”
Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
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” for styling WWW information DSC340 Mike Pangburn.
กระบวนวิชา 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 normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
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,
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
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) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
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.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,
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.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
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.
CO1552 – Web Application Development Cascading Style Sheets.
CSS Basic (cascading style sheets)
Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Cascading Style Sheets CSS. Source W3Schools
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.
CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
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.
1 Cascading Style Sheets
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Working with Cascading Style Sheets
Web Basics: HTML/CSS/JavaScript What are they?
4.01 Cascading Style Sheets
Madam Hazwani binti Rahmat
Intro to CSS CS 1150 Fall 2016.
CASCADING STYLE SHEET CSS.
Website Design 3
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
Introduction to Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
Web Design and Development
Cascading Style Sheets - Building a stylesheet
4.01 Cascading Style Sheets
Web Programming and Design
Presentation transcript:

Making Things Look Nice: Visual Appearance and CSS CMPT 281

Outline Separation of content and appearance

How do we get from this…

…to this?

…or this?

Step 1: separate content from appearance

Separation of content and appearance HTML originally had little support for control over a page’s appearance – then came HTML 3.2: and attributes BUT: – HTML markup is meant to specify content How to control appearance? Styles – Introduced in HTML 4.0

CSS is for styles Cascading Style Sheets Specify how the content should look Stored away from the content – External: a separate file – Internal: the section of the page

CSS syntax

Note there are two declarations here!

CSS selectors Any type of tag can be styled – E.g., h1 tags: h1 {color: blue; font-size:12px;} What if multiple tags should be similar? – e.g., all fonts on the page should be Helvetica – Use class selector What if one item needs special treatment? – Use id selector

CSS classes and ids You can group several style attributes together – This is a class You can label HTML elements as that class – This heading will be styled according to the definitions of class myStyle ids are similar to classes, but for a single item – A heading that needs to be different from the standard, just once

Where does CSS go in a web page? External style sheet Internal style sheet hr {color:sienna;} p {margin-left:20px;} Inline styles This is a paragraph.

NOTE This is not all you need to know about CSS! Do the tutorial on w3schools! – – (‘Basic’ and ‘Styling’ modules only) Go to labs!

What does CSS control? Colour Text Fonts Images Links Lists Tables And much more…