Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.

Slides:



Advertisements
Similar presentations
Session Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances.
Advertisements

Cascading Style Sheets (Formatting. Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering.
CSS Properties on Parade PropertyValid valuesExample font-familylist of fonts (separate with commas, end with generic font: serif, sans-serif, fantasy,
© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
W EB S ITE L ECTURE C ASCADING S TYLE S HEETS. Cascading Style Sheets (CSS) Introduction CSS Objectives – Provide more control over web site content presentation.
+ Text & Font Styles Unit 3 Lesson Different Font Categories Sans Serif – block style fonts Example - Rockwell Easy to read and good to use when.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Formatting Text (Plus More Selectors) Learning Web Design: Chapter 12.
HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Cascaded Style Sheets Implementing web pages using only html/xhtml is tedious and awkward With CSS, you can design a component to be used in a web page.
HTML - Quiz #2 Attendance CODE:
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
WORKING WITH CASCADING
New Perspectives on XML, 2nd Edition Tutorial 5 1 TUTORIAL 5 WORKING WITH CASCADING STYLE SHEETS.
XP New Perspectives on XML Tutorial 5 1 TUTORIAL 5 CSS Tutorial – Carey ISBN
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
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.
 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 14, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.
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.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
CASCADING STYLE SHEETS. Chapter 3 Objectives Customize HTML elements Specify Font characteristics Classes Tag style Inline and block-level elements External.
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.
Class three: CSS review, backgrounds, font formatting, the box model.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
CSS. HTML: Looking Back HTML dictates order, structure, and function Does very little to specify layout or visual rendering.
Cascading Style Sheets (css) HTML and css 2012 Brian Davison.
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
Files you will need ... Black Goose Bistro Summer Menu
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.
Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
3. Cascading Style Sheets (CSS) M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple.
OV Copyright © 2008 Element K Content LLC. All rights reserved.  Format Text  Format Lists  Format Images  Modify Page Background Applying Styles.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Cascading Style Sheets.
Cascading Style Sheets Web Design Fairport High School.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.
CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Today’s objectives Layouts | floats Measurement units Type properties
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Developing Web Applications with HTML and CSS “Selectors and Properties”
CSS: Cascading Style Sheets Part II. Style Syntax.
OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.
Company LOGO In the Name of Allah,The Most Gracious, The Most Merciful King Khalid University College of Computer and Information System Web pages Development.
Basic Webpage Design Cascading Style Sheet (CSS).
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
Tutorial 3 Designing a Web Page with CSS
Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.
JavaScript and Ajax (JavaScript Dynamic HTML (DHTML)) Week 7 Web site:
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
Formatting Text with HTML and CSS. Summary block-level elements. Character-level elements Logical and physical style Special elements: hr,address, quotation.
CSS Details Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  To use CSS properties for fonts  Evaluate whether to use pts,
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
Unit 3 - Review. Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
WebD Introduction to CSS By Manik Rastogi.
Presentation transcript:

Creating Layouts with CSS

Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.

Div tag is used to surround a block of HTML tags of any kind, and it affects all the tags and text inside the opening and closing tags Who We Are What We Do

CSS Properties text-decoration underline, overline, line-through, blink, and none. font-style The three values are normal, italic, and oblique. font-weight Options are normal, bold, bolder, lighter, and font-family font-variant Sets the font variant to normal or small-caps. text-align Specifies how text is aligned: left, right, center, or justify. font-size

This text is 12 pixels tall.

Including Style Sheets in a Page Creating Page-Level Styles h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold }

Creating Sitewide Style Sheets h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold } Save as style.css and include

Selectors All paragraphs,ol and ulin blue color p, ol, ul { color: blue } = p { color: blue } ol { color: blue } ul { color: blue }

Classes Some text..important { color: red; font-weight: bold; } The class attribute is for assigning elements to groups of tags, and the id attribute is for assigning identifiers to specific elements.

IDs Copyright 2003 #footer { font-size: small; }

CSS Example.outer { border: 2px solid black; }.inner { border: 2px dotted black;} Outer. Inner