Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring 2016 1.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.
Advertisements

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
กระบวนวิชา 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.
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.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
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)
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
4.01 Cascading Style Sheets
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 5: Cascading Style Sheets.
Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54
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.
CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Cascading Style Sheets Example
CSS Dvijesh Bhatt.
HTML - Quiz #2 Attendance CODE:
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
Cascading style sheets (CSS)
Cascading Style Sheet (CSS)
1Computer Sciences Department. And use
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
New Perspectives on XML, 2nd Edition Tutorial 5 1 TUTORIAL 5 WORKING WITH CASCADING 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.
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.
(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
To Proudly supported by ferrycake.com. We will be printing Cash for your Community tokens every week in the Carmarthen Journal and Llanelli Star. The.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
Introduction To CSS.. HTML Review What is HTML used for? Give some examples of formatting tags in HTML? HTML is the most widely used language on the Web.
What is 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.
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.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.
So far, we have looked at CSS selectors that correlate with HTML tags Now, we’ll see how you can define your own selectors using class and ID selectors.
DIV, Span, CSS.
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.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
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.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
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:
Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 5: Cascading Style Sheets.
Cascading Style Sheets Web Design Fairport High School.
CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
CSS Syntax. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value}
CSS Cascading Style Sheets *referenced from
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Basic Webpage Design Cascading Style Sheet (CSS).
Font-Family, Color and Background. Basics  CSS rule: Selector (multiple separated by, ) Declaration (multiple separated by ; ) Example: p { color: red;
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.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
CSS DHS Web Design. Location Between the & Start with – End with –
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
Introduction to the Internet
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Cascading Style Sheets - Building a stylesheet
Cascading Style Sheets - Building a stylesheet
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

Quick Recap.. CSS tells the browser how to display HTML elements External stylesheets are convenient, flexible, popular Define style rules in a.css file, then link it to the HTML using element Example:

CSS Syntax ● A CSS file contains one or more rule-sets (or simply rules) ● A rule-set describes presentation style for a particular part of the HTML document. ● For example, a rule-set to color all headings blue and set font size to 12 : h1 { color: blue; font-size: 12px; }

CSS Rule Set ● The declaration block is enclosed in { }. ● The declaration block contains one or more declarations separated by semicolons. ● Each declaration includes a property name and a value, separated by a colon. ● To make the CSS code more readable, you can put one declaration on each line. Source:

CSS Selectors ● Selects the set of HTML elements over which a rule-set is applied ● Used to "find" HTML elements based on id, classes, types, attributes, values of attributes, etc. ● Typically, selectors are one of 3 kinds: o id selector o element selector o class selector

Element Selector ● The element selector selects elements based on the element name. ● Applied to all elements with the same name (tag) p { text-align: center; color: red; }

ID Selector ● The id selector uses the id attribute of an HTML tag to find the specific element. ● An id should be unique within a page. ● To find an element with a specific id, write a hash character, followed by the id of the element. #para1 { text-align: center; color: red; }

Class Selector ● The class selector finds elements with the specific class. ● The class selector uses the HTML class attribute. ● To find elements with a specific class, write a period character, followed by the name of the class..center { text-align: center; color: red; }

Class Selector ● You can also specify that only specific HTML elements should be affected by a class. p.center { text-align:center; color:red; }

Grouping Selectors ● In style sheets there are often elements with the same style ● In the interest of code minimization, we can group selectors ● Selectors are separated by commas. h1, h2, p { text-align: center; color: red; }

CSS3 Declarations ● As of now, 415 distinct property names on different specification status ● Latest properties have different level of browser support ● Learn the most common ones, use reference guide for fine-grained styling

CSS measurement units ● Frequently used to set values to properties ● Absolute: ● in : inches ● cm : centimeters ● mm : millimeters ● px : pixels (1 px = 1/96th of 1in) ● Relative: ● em : ratio to the font size of current element ● % : percentage to the font size of current element

color property and values Applies the color value to the text contents of the selected element(s) Possible color values: predefined color names(e.g. black, blue, purple) p { color: red; } Hexadecimal color codes using 6 character notation p { color: #ff0000; } Red, Green, Blue components in scale using rgb() syntax Absolute, scale: p{color: rgb(255,0,0)} Relative scale in % : p{color: rgb(100%,0,0)}

CSS Text Formatting Properties text-align : specifies horizontal alignment [ left/right/center/justify ] text-indent : sets indentation for the first line of the element [in units] text-decoration : used to decorate text [ none/underline/overline/line-through ] text-transform : controls capitalization [ uppercase/lowercase/capitalize ] letter-spacing : specifies spacing behavior between characters [in units] word-spacing : specifies spacing behavior between words [in units]

CSS Text Formatting Properties(contd.) font-family : accepts a list of font names separated by comma. Prioritized from left to right and used based on availability. May use font name within double quotes(e.g. “"Lucida console"”) or generic font name [ serif/sans- serif/cursive/fantasy/monospace ] font-size : specifies size of fonts [in units] font-style : [ normal/italic/oblique ] font - Weight : [ normal/bold /bolder /lighter ]

CSS Background Properties ● Used to define the background effects of an element. ● CSS properties used for background effects: o background-color : uses color value to set background o background-image : set an image as background. Image name accepted in the form: url(“ ”) o background-repeat : controls image repeats. Common values are repeat-x, repeat-y, repeat, no-repeat etc. o background-attachment : sets whether a background image is fixed or scrolls with the rest of the page. [ scroll/fixed/local ] o background-position : sets starting position of a background image. o background-size : Specifies the size of the background images.

CSS Comments ● CSS comments follow the multiline C comment syntax ● A CSS comment starts with /* and ends with */ ● Comments can also span multiple lines and are ignored by browsers