Lecture # 33 Cascade Style Sheets (CSS). Cascade Style Sheets (CSS): Preserving a consistent “look and feel” of a website across multiple pages.

Slides:



Advertisements
Similar presentations
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.
Advertisements

กระบวนวิชา 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.
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.
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Working with Cascading Style Sheets
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 6: Cascading Style Sheets.
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.
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.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
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.
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
Cascading Style Sheets CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.
Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.
CSS Dvijesh Bhatt.
Cascading style sheets (CSS)
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
Tutorial 3 Working with Cascading Style Sheets (CSS)
Doman’s Sections Information in this presentation includes text and images from
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
CSS Netcentric. What is CSS O CSS stands for Cascading Style Sheets O Styles define how to display HTML elements O Styles were added to HTML 4.0 to solve.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
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.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
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.
CO1552 – Web Application Development Cascading Style Sheets.
CSS Basic (cascading style sheets)
Cascading Style Sheet Bayu Priyambadha, S.Kom. Definition Cascading Style Sheets (CSS) form the presentation layer of the user interface. –Structure (HTML)
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 10: A Deeper Look at CCS- Spring 2011.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
MySQL and PHP Review CSS. Cascading Style Sheet (CSS) Style sheets are files or forms that describe the layout and appearance of a document. Cascading.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
COMP213 – Web Interface Design
LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.
 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.
DIV, Span, CSS.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
Copyright © 2006, Jumail, FSKSM, UTM Slide 1 Cascading Style Sheets (CSS)
REEM ALMOTIRI Information Technology Department Majmaah University.
3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.
CSS – Cascading Style Sheets
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
JavaScript and CSS
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring 2016 CSS Positioning 1.
1 CSS محمد احمدی نیا 2 Of 21 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 
CSS Box Model. What is the Box Model? Each XHTML element appearing on our page takes up a "box" or "container" of space. Each box size is affected not.
Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.
Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
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.
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 solve a problem External.
CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Cascading Style Sheets - Building a stylesheet
Cascading Style Sheets - Building a stylesheet
Presentation transcript:

Lecture # 33 Cascade Style Sheets (CSS)

Cascade Style Sheets (CSS): Preserving a consistent “look and feel” of a website across multiple pages

Content vs Style Before version 4.0 of HTML, style information was intermixed with content. Version 4.0 and above separate HTML into –Content – what is in an html page Described in the “HTML” presentation –Style – how does that information look –Some tags were deprecated:,, –Additional capabilities were added Style is specified by “css” or cascade style sheets For a tutorial on CSS see * * For free access to many books on CSS go Here and search for “css”Here

CSS Properties Properties: what “look and feel” features do you want to define? –Background properties – what does the background look like –Border and outline properties – what do borders look like –Dimension properties – how tall and wide are html elements –Font properties – what is the font of the text –List properties – what do lists look like –Margin properties – what do margins look like –Padding properties – what does the padding around elements look like –Positioning properties – where does an element appear on the page –Table properties – what does a table look like –Text properties – everything about the text except the font –Others: Generated content properties, print properties, pseudo- classes/elements properties

CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external.css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Understanding Style Rules A Style Rule is composed of two parts: a selector and a declaration. TH {color: red;}. The Selector indicates the element to which the rule is applied. The Declaration determines the property values of a selector. Selector Declaration

Understanding Style Rules The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

Declaration Syntax CSS declarations end with ; Groups are surrounded by { … }: p {color:red;text-align:center;} To improve readability: p { color:red; text-align:center; } CSS Comments begin with "/*", and end with "*/": /*This is a comment*/

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; } The id and class Selectors

The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center- aligned: Example Below, all p elements with class="center" will be center-aligned: p.center {text-align:center;}

Three Ways to Insert CSS Internal style sheet - part of the current html file Inline style - imbedded in the html External style sheet - stored in a separate.css file

Use when a single document has a unique style: hr {color:red;} p {margin-left:20px;} body {background- image:url("images/back40.gif");} Internal Style Sheet

Can be used for local override of styles set for the same Selector externally: For example, an external style sheet has these properties for the h3 selector: h3 {color:red; text-align:left; font-size:8pt;} And an internal style sheet has these properties for the h3 selector: h3 {text-align:right; font-size:20pt;} The properties for h3 will be: color:red; text-align:right;Color is inherited from external style sheet font-size:20pt;Text-alignment, font-size from internal style sheet Inline Styles

Demos of CSS Internal & Inline Styles Go to

Ideal for applying style to many pages. Change the look of an entire Web site by changing the.css file. Each page must link to the style sheet using the tag: Example of a.css style sheet file: hr {color:red;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} External Style Sheet

Demos of CSS External Style Sheets

The font family of a text is set with the font- family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. p{font-family:"Times New Roman", Times, serif;} Font Family

Color Values Several properties take a color value. There are several ways to specify colors. Here are 2 (For more information go here.)here Use standard names: body {background-color:yellow} –Makes entire web page background yellow body {background-color:#FFFF00}

Measurement Values Width, height, and length properties require integer values representing “amounts”. Specify using units such as pixels, points, percentages, ems, inches, millimeters, and centimeters. For more information see Examples: img {width: 100px; height:100px} Specifies width and height in terms of pixels img {width: 50%; height:50%} Specifies width and height as a percent of its enclosing block

tags tag: a paired tag used primarily to group elements so they can be formatted using CSS style properties

Layout Model All HTML elements are considered boxes In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. The box model illustrates how the CSS properties: margin, border, and padding, affects the width and height of an element.

Layout Model Continued When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.

Layout Model Continued If an element had the following properties: width:250px; padding:10px; border:5px solid gray; margin:10px; It would be 300px wide

What does Cascade Mean? Properties of one style sheet or style definition override another Internal overrides External Inline overrides Internal

Some Useful Properties Don’t expect you to memorize them. Do expect you to be able to look them up –HereHere –Or, for books on CSS go Here; search for “css”Here –Google is your friend We will introduce several CSS properties Inherited properties –Inherited from parent or containing element

Background Properties PropertyDescription background Sets background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated

Margin Properties PropertyDescription margin Sets all the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element

Border and Outline Properties PropertyDescription border Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one declaration border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders outline Sets all the outline properties in one declaration outline-color Sets the color of an outline outline-style Sets the style of an outline outline-width Sets the width of an outline

Padding Properties PropertyDescription padding Sets all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an element

Dimension Properties PropertyDescription height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element min-width Sets the minimum width of an element width Sets the width of an element

Font Properties PropertyDescription fontSets all the font properties in one declaration font-familySpecifies the font family for text font-sizeSpecifies the font size of text font-styleSpecifies the font style for text font-variantSpecifies whether or not a text should be displayed in a small-caps font font-weightSpecifies the weight of a font

Text Properties PropertyDescription color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies indentation of first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text vertical-align Sets the vertical alignment of an element white-space Specifies handling of white-space inside element word-spacing Increases/decreases space between words in a text

List Properties PropertyDescription list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies where to place the list-item marker list-style-type Specifies the type of list-item marker

Positioning Properties PropertyDescription bottom Sets the bottom margin edge for a positioned box clear Specifies sides where other float elements not allowed clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed display Specifies the type of box an element should generate float Specifies whether or not a box should float left Sets the left margin edge for a positioned box overflowSpecifies what happens if content overflows box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box visibility Specifies whether or not an element is visible z-index Sets the stack order of an element

Table Properties PropertyDescription border-collapse Specifies whether or not table borders should be collapsed border-spacing Specifies distance between borders of adjacent cells caption-side Specifies the placement of a table caption empty-cells Specifies whether or not to display borders and background on empty cells in a table table-layout Sets the layout algorithm to be used for a table

Examples Many more examples can be found at