Cascading Style Sheets

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

Introduction to HTML & CSS
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell.
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Cascading Style Sheets
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
1 Styles and CSS David Douglas Sam M. Walton College of Business, University of Arkansas “Connecting scholarship and research with business practice”
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.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Adding styles. Three alternatives HIT151 Web 'n' Net Web Page Basics /*stylesheet*/ h1,h2,h3 { font-family: verdana, arial, 'sans serif'; } p,table,li.
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.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
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,
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
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 (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
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.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
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 4 Frames and Cascading Style Sheets. Frames Frames divide a browser window into two or more separate pieces or panes, with each pane containing.
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
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 Cascading Style Sheets
Web Development & Design Foundations with XHTML
Getting Started with CSS
CSS: Cascading Style Sheets
Introduction to CSS.
Cascading Style Sheets
Introduction to the Internet
IS 360 Declaring CSS Styles
Madam Hazwani binti Rahmat
>> CSS Rules Selection
CX Introduction to Web Programming
Intro to CSS CS 1150 Fall 2016.
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Cascading Style Sheets - Building a stylesheet
Introduction to CSS.
Intro to CSS CS 1150 Spring 2017.
DynamicHTML Cascading Style Sheet Internet Technology.
CS134 Web Design & Development
IS 360 Understanding CSS Selectors
Cascading Style Sheets
Cascading Style Sheets™ (CSS)
DynamicHTML Cascading Style Sheet Internet Technology.
Web Design and Development
Part 1: Cascading Style Sheets
Lecture Review What is a hybrid app? What does a UI framework do?
Chapter 6 Introducing Cascading Style Sheets
CIS 133 mashup Javascript, jQuery and XML
Web Design & Development
Cascading Style Sheets
Cascading Style Sheets - Building a stylesheet
External Style Sheets.
Cascading Style Sheets III B. Com (Paper - VI) & III B
Presentation transcript:

Cascading Style Sheets CSS

Introduction To CSS CSS works by allowing your associate rules with the elements that appear in document. Each style rule in a style sheet has two main parts The selector, which indicates which element or elements the declaration applies to. The declaration, which sets out how the elements should be styled.

Introduction To CSS The declaration is also split into two parts, separated by a colon: A property, which is the property of the selected element(s) that you want to affect. A value, which is a specification for this property; in this case it is the Arial typeface.

Adding Style to a Document Linking to a Style Sheet (External CSS) Can set style for many documents with one style sheet. Style information cached by the browser. The common style sheet document extension is .css, for Cascading Style Sheets. Syntax <link rel=“stylesheet “ href=“main.css” type=“text/css”> rel attribute is used to indicate the relationship for the link element. href attribute is used to indicate the URL of the style sheet to use. type attribute is used to indicate the linked style sheet is a cascading style sheet (CSS).

Adding Style to a Document Embedding and Importing Style Sheets Can easily control style document by document. No additional page requests for style information. Syntax <style> /*style rules here*/ h1{backgroud-color:red;} </style>

Adding Style to a Document Using Inline Style Can easily control style to a single character instance. Overrides any external or document styles. Syntax <h1 style=“font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1> style attribute is used to add style information directly in a tag.

Understanding Block and Inline Elements Block-level elements appear on the screen as line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <ul>, <ol>, <hr>, and <hr>elements are all block level elements. Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own For example the <b>, <i>, <u>, <sub>, and <li> elements are all inline elements.

Grouping Elements with <div> and <span> The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. They are commonly used with CSS to allow you to attach a style to a section of a page. <div> is the block-level element <span> is the inline-level element

Selectors Universal Selector The Type Selector The universal selector is an asterisk; it matches all element types in the document. *{background-color:”red”;} The Type Selector The type selector matches all of the elements specified in the comma-delimited list. It allows you to apply the same rules to several elements. h1,p,b{font-family:”arial”;}

Selectors The Class Selector The class selector allows you to match a rule with an element carrying a class attribute whose value you specify in the class selector. <p class="BackgroundNote">This paragraph contains an aside.</p> .BackgroundNote {font-size:”24px”;} Creating a selector that selects only the <p> elements that carry a class attribute with a value of BackgroundNote p.BackgroundNote {font-size:”24px”;}

Selectors ID selector The id selector works just like a class selector, but works on the value of id attributes. <p id=“abstact”>Hello world</p> p.#abstract {font-size:”24px”;}