Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents Dr. Irwan Sembiring,ST.,M.Kom.

Slides:

Advertisements

Similar presentations

1 Cascading Style Sheets™ (CSS) Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style.

Advertisements

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.

Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.

XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.

Chapter 6 Web Typography

Week 7 Web Typography. 2 Understanding Type Design Principles.

Web Development & Design Foundations with HTML5

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

CSS Demo. Questions How many of you –knows how to code html? –have used dreamweaver or some other graphical html editor? –have used css styles?

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

© 2007 D. J. Foreman CSS-1 Cascading Style Sheets Styles.

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.

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).

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 09: Cascade Style Sheets - Spring 2011.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

Chapter 7 Web Typography Principles of Web Design, 4 th Edition.

CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.

Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.

Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed url(File);  CSS.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand.

Today’s objectives  Presentational | Inline | Block | Validate  CSS | Rules | Declarations.

Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

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.

HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with Cascading Style Sheets.

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.

XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.

Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.

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.

Personal Design Portfolio First, you should select a theme for your web site. This theme can be your own design work, or the designs of another person.

Cascading Style Sheets (css) HTML and css 2012 Brian Davison.

Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober

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.

CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.

Files you will need ... Black Goose Bistro Summer Menu

Fonts The following CSS properties will be described: 1.Font-family 2.Font-style 3.Font-variant 4.Font-weight 5.Font-size 6.Font.

Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.

October 21, Learn about Cascading Style Sheets LACUNY Web Management Roundtable October 21, 2005

Cascading Style Sheets

Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.

CSS Cascading Style Sheets. Cascading Style Sheet (CSS) A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web.

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 (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.

XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.

OV Copyright © 2008 Element K Content LLC. All rights reserved.  Format Text  Format Lists  Format Images  Modify Page Background Applying Styles.

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.

Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.

Cascading Style Sheets (CSS)

CSS Cascading Style Sheets *referenced from

OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

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.

Cascading Style Sheets Robin Burke ECT 270. Outline CSS properties Fonts Alignment Color CSS selection selectors.

CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.

Presentation transcript:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents Dr. Irwan Sembiring,ST.,M.Kom

Advantage CSS H1 { color :red ; font-family : “arial”; } welcome to web programming procrastinate now and panic later Magister of Computer Science

Style structure H1 {color:red;} H1= selector Color = property Red=value ; = semicolon Declaration

we can declare document styles in several ways. 1.Inline styles  Individual element This text does not have any style applied to it. font-size style applied to it, making it 20pt. This text has the font-size and color styles applied to it, making it 20pt. and light blue.

2. Embedded Style Sheets Embed an entire CSS document in an HTML * Head Section * em { font-weight: bold; color: black } h1 { font-family: tahoma, helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif }.special { color: #6666ff } Deitel & Associates, Inc. universitas Kristen satya wacana Clients The company's clients include many Fortune 1000 companies

Class and ID.InputText { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; line-height: normal; background-color: #0F0; } Nama Anda

<!-- p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; font-style: italic; background-color: #0C0; } p.group { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-style: italic; background-color: #FC3; } p#one { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; line-height: normal; background-color: #909; } Ini adalah paragraf 1 ini adalah paragrap 2 ini adalah paragraf 3 </html

Exercise

3. Linking External Style Sheets Belajar CSS

Layout With CSS