Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

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

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.
Cascading Style Sheets
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
Chapter 3 Working with Text and Cascading Style Sheets.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Different ways to implement CSS. There are four different ways to use CSS in your web pages: – Inline CSS – Embedded CSS/Internal CSS – Linked CSS/External.
Robert Vitolo CS430.  CSS (Cascading Style Sheets)  Purpose: To provide a consistent look and feel for a set of web pages To make it easy to update.
Chapter 3 Working with Text and Cascading Style Sheets.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
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.
The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
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.
CSS Basic (cascading style sheets)
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.
Cascading Style Sheets
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.
Cascading Style Sheets
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
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.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
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.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
Cascading Style Sheets
Web Development & Design Foundations with HTML5 8th Edition
Bare boned notes.
Procedure Download data files.
Bare bones notes.
Madam Hazwani binti Rahmat
CX Introduction to Web Programming
Web Development & Design Foundations with HTML5
CASCADING STYLE SHEET CSS.
Website Design 3
Cascading Style Sheets - Building a stylesheet
Software Engineering for Internet Applications
Working with Text and Cascading Style Sheets
What are Cascading Stylesheets (CSS)?
Some Stuff You Need to Know
Bare bones notes.
CSS Styles Introduction.
Web Design and Development
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Please bookmark your URL
Cascading Style Sheets - Building a stylesheet
One Set of Styles Connected to As Many Pages as You Want!!!
Presentation transcript:

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Practice for Chapter 3 (continued) 1.Use dummy text from to create 3 pages for: Home | About Us | Portfolio HINT: For each page, you will “save as” 2.Link the pages together if not done yet. 3.If you finish early: - find a few pictures from your site, or - choose a color scheme from Finally, we will create a stylesheet together. Steps to begin: 1.Create folder called “freelance”. Put inside your chapter3 folder. 2.Create the first page as template.html. In addition to the basic HTML tags, the only other elements we’ll use on all pages are: div for the wrapper, nav, footer, and link to a CSS page called business.css.

A style is: A group of formats that are setup as a unit and can be applied repeatedly. (generic definition) Advantages of CSS: Easy to edit and maintain More control (more features) Separate appearance from structure Can be stored and associated with web pages Smaller pages, potentially Types of CSS: Inline: Added as an attribute of an HTML tag and only applies to that individual element. Used to override others. Embedded: Defined in the head area between tags. Applies to the body of that document. External: A separate file which is linked in the section. Used for entire website. Mini Review of Cascading Style Sheets Syntax & example for inline style: selector {property: value";} p {line-height: 140%} Syntax & example for other CSS types: Link to external CSS file: Set up embedded CSS in area: How to apply CSS: