CS 142 Lecture Notes: CSSSlide 1 body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } SelectorDeclaration Block.

Slides:



Advertisements
Similar presentations
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Advertisements

/k/k 1212 Cascading Style Sheets Part one Marko Boon
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.
Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
กระบวนวิชา 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.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Chapter 6 Web Typography
CS4370/6370 Web Development Cascading Style Sheets (CSS)
Technologies for web publishing Ing. Václav Freylich Lecture 6.
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
Web Design & Development Cascading Style Sheets (CSS)
CS428 Web Engineering Lecture 06 Introduction (Cascading Style Sheet) 1.
CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.
4.01 Cascading Style Sheets
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
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).
Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
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.
1 Cascading Style Sheets (CSS) Part 2. 2 The Sources of Style Sheets.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
MCS 270 Cascading Style Sheets (CSS) Gustavus Adolphus College.
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
 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.
FTS: The Perils and Promise of Computing Cascading Style Sheets (CSS) Gustavus Adolphus College Fall 2012.
CO1552 – Web Application Development Cascading Style Sheets.
Cascading Style Sheets (css) HTML and css 2012 Brian Davison.
Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober
COMP213 – Web Interface Design
CS 142 Lecture Notes: CSSSlide 1 CSS Rule body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Selector Declaration.
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.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
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 Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
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.
Copyright © 2006, Jumail, FSKSM, UTM Slide 1 Cascading Style Sheets (CSS)
CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:
Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CSS Cascading Style Sheets *referenced from
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.
Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
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.
CSS Layouts CH 13.
4.01 Cascading Style Sheets
( Cascading style sheet )
Creating Your Own Webpage
CSS Rule Selector Declaration Block Value Attribute Name body {
Second CSS Lecture Applications to XML
More CSS 22-Feb-19.
Cascading Style Sheets
4.01 Cascading Style Sheets
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

CS 142 Lecture Notes: CSSSlide 1 body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } SelectorDeclaration Block Attribute Name Value CSS Rule

CS 142 Lecture Notes: CSSSlide 2 Adding Styles to HTML... body { font-family: Tahoma, Arial, sans-serif;... } Separate Stylesheet Page-Specific Styles Element-Specific Styles

CS 142 Lecture Notes: CSSSlide 3 body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black }.shaded { background: #d0d0ff; } First Section Heading Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. Another Section Heading Another paragraph. CSS:HTML:

CS 142 Lecture Notes: CSSSlide 4 ● Predefined names: white black red … ● 8-bit hexadecimal intensities for red, green, blue: ● decimal intensities: ● Percentage intensities: CSS Color Specifiers #ff0000 RGB rgb(255,255,0) RGB rgb(80%,80%,100%) RGB

CS 142 Lecture Notes: CSSSlide 5 Padding CSS Element Boxes Element Content Padding Margin Element’s background covers padding Parent’s background covers marginBorder

CS 142 Lecture Notes: CSSSlide 6 CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units

CS 142 Lecture Notes: CSSSlide 7