Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

Cascading Style Sheets
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
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.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Project 8 Creating Style Sheets.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
Basics of HTML.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
Different ways to implement CSS. There are four different ways to use CSS in your web pages: – Inline CSS – Embedded CSS/Internal CSS – Linked CSS/External.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.
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.
 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Cascading Style Sheets CSS. Source W3Schools
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
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 (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
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.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
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 SHEET 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.
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.
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Web Basics: HTML/CSS/JavaScript What are they?
Getting Started with CSS
Bare boned notes.
>> Introduction to CSS
Styles with Cascading Style Sheets (CSS)
INTRODUCTION TO HTML AND CSS
Madam Hazwani binti Rahmat
CX Introduction to Web Programming
Website Design 3
Cascading Style Sheets - Building a stylesheet
CS134 Web Design & Development
INTRODUCTION TO HTML AND CSS
Web Design and Development
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Made By : Lavish Chauhan & Abhay Verma
Web Design & Development
Cascading Style Sheets - Building a stylesheet
Presentation transcript:

Cascading Style Sheet

What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear on a web page. Cascading: Multiple styles can overlap in order to specify a range of style from a whole web site. Style: CSS deals specifically with the presentation domain of designing a web page(Color, Font, Layout, etc). Sheet: Normally, CSS is a file separate from the HTML file – linked to the HTML file through its.

CSS was created by “Hakon Wium Lie” of MIT in It is a markup language used to directly effect the “look” of web pages. This includes overall layout, text size, style and formatting, link properties, and more.

CSS Web Template CSS web template is a website design creates using CSS technology. CSS allow enhanced browser and platform capability. Your website will look perfect in any browser. The template is primarily tested on multiple platform to ensure better requirements compliance.

Why Style Sheets? HTML is not designed for styling documents.If you wished to state that you want your heading in some style then you will write some code for that. Following are the reasons to use CSS: – You have to add same piece of code to each heading that you want styled. This is time consuming, chance of error. – If you want to change those heading to some other color and font, then you will have to change each heading individually.

Why CSS? Allows for much richer document appearances than HTML. Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML document. Use same style on multiple pages. Reduce page download size. HTML is use for content and CSS is used for presentation.

Style Sheets Advantages HTML permits the mixing of document structure and formatting (Style). Style sheets permit the separation of the logical document structure and content from its style. It is possible to give a uniform look and feel to a website that can easily be customized. Define the look of your pages in one place rather than repeating yourself over and over again throughout your site.

Easily change the look of the pages even after they’re created. Since the style are defines in one place you can change the look of the entire site at once. Allows you much richer document appearances than HTML. Reduce workload by centralizing commands for visual appearance instead of scattered throughout the HTML doc. Use same style on multiple pages. Reduce page download size.

Control layout of many documents from one single style sheet. CSS makes it very easy to change the style of a document. Probably the mostly useful feature of CSS is that all of the style and layout is removed from the HTML, so the HTML page size is very much smaller. Separate content from Formatting. Compatibility across browsers and platforms.

How CSS work? CSS overrides the browser’s default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag to apply style attributes defined either locally or in a style sheet. Style sheet contain rules, composed of selectors and declarations that define how styles will be applied.

The selector(a redefined HTML element,class name, or ID name) is the link between the HTML document and the style. There are two different kinds of selectors: – Types (HTML element tags) – Attributes (such as class and ID names). Syntax: Selector {property 1:value1;property 2:value 2} For eg: body {background-color:#FF0000;}