PPA – course 5 Materi: Cascading Style Sheet. What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh:

Slides:



Advertisements
Similar presentations
Advance CSS (Menu and Layout). CSS Navigation MENU.
Advertisements

Prosedur dan Fungsi.
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.
Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:
Chapter 8 Creating Style Sheets.
Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the.
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:
Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools.
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?
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,
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.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
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.
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).
HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Cascading Style Sheets Part 1 Library and Information Services, University of St Andrews.
HTML - Quiz #2 Attendance CODE:
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
HTML & CSS.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with 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.
Working with Text and Cascading Style Sheets. Unit Objectives Create a new page Import text Set text properties Create an unordered list Understand Cascading.
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 Class 2, Lecture 2 Rachel A Ober
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
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.
Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
Cascading Style Sheets. CSS zAllows for more control over the look of the pages. zProblems. Older versions of the browsers do not fully support the CSS.
DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.
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.
Lesson 15: Cascading Style Sheets. Objectives Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1 and CSS2) using various methods.
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.
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.
Cascading Style Sheets August 25-26, What is CSS? a means for web authors to separate the appearance of web pages from the content of web pages.
OV Copyright © 2008 Element K Content LLC. All rights reserved.  Format Text  Format Lists  Format Images  Modify Page Background Applying Styles.
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.
Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.
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.
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.
Intro to CSS Christy. What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control.
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.
CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.
CSS Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.
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 (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents Dr. Irwan Sembiring,ST.,M.Kom.
BAB INHERITANCE (Pewarisan)
Style Sheets.
Cascading Style Sheets 2
CSS Styles Introduction.
Creating your own Styles
Presentation transcript:

PPA – course 5 Materi: Cascading Style Sheet

What is CSS? sebuah standar yang digunakan untuk mendefinisikan tampilan secara seragam dan akurat. Contoh: Perubahan warna pada judul menjadi hijau dan text menjadi biru. Dengan metode biasa: ubah atribut warna masing- masing element / tag html satu persatu Dengan CSS : dilakukan dengan satu langkah

Inline –Merupakan style yang terlemah karena editing harus dilakukan disemua bagian dimana inline berada –Mirip dengan atribut biasa. –Bagian dari This is sample inline text Tipe CSS (1)

Tipe CSS (2) Embedded –Bagian dari dan mempunyai efek pada 1 halaman saja <!-- p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} -->

Classes <!--.directorname { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} --> Pada tag dimana classes dipanggil: Georges Melies Tipe CSS (2)

External / Linked Style –Style yang banyak dipakai –Disimpan di file lain sehingga dengan 1 file CSS dapat dipakai di banyak file HTML lainnya –File hanya berisi style bukan tag html –Cara link css dari file html di bagian Tipe CSS (3)

Sedangkan file mystyles.css berisi sekumpulan selector Contoh:.bodytext { font-family: Verdana, Arial, Helvetica, sans- serif; font-size: 18pt; font-style: italic; color: #0000CC; text-indent: 20px} Tipe CSS (3)

Style Sheet Hierarchy Inline Style overrides both Embedded and Linked Styles Embedded Style overrides a Linked Style.

Creating Style Sheet in Dreamweaver Cara Pertama: Menu Window > CSS Styles Click tombol New Style di bagian bawah Cara Kedua: Menu Text > CSS Styles > New Style

Pilihan define in: New Style Sheet file = Linking Style This Document only = Embedded style Creating Style Sheet in Dreamweaver

Untuk merubah bagaimana sebuah link ditampilkan : Creating Style Sheet in Dreamweaver

Latihan File latihan minggu lalu (tentang ojai) diberi tambahan CSS Langkah - langkah: Open file html tersebut Buatlah sebuah class yang bernama.test Yang disimpan di local root folder dengan nama styles.css Set Category : Type sebagai berikut: font :"Arial, Helvetica, san-serif“ size : "14 points“ color: "red" atau "#FF0000“ Untuk melihat CSS panel  Window > CSS Styles

Menambahkan Linking Style Cara menambah Linking style (file css) ke web site