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.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Cascading Style Sheets
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
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
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,
Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
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.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
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.
INTERNAL CSS Casey Ames Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation.
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.
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.
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.
Cascading Style Sheets by Pavlovic Nenad by. Presentation Contents  What is CSS?  Why CSS?  Types of Style Sheets  Style Sheets Syntax  Box Formatting.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
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 Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
© 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.
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.
Cascading Style Sheets
Cascading Style Sheets CSS. Source W3Schools
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
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.
Cascading Style Sheets
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
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.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.
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.
IT Accessibility Committee Cascading Style Sheets Presented by Michael B. Short Prepared by The NYS Forum IT Accessibility Committee
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.
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.
Introduction to CSS: Selectors
>> Introduction to CSS
Cascading Style Sheets
Madam Hazwani binti Rahmat
>> CSS Rules Selection
CX Introduction to Web Programming
Intro to CSS CS 1150 Fall 2016.
CASCADING STYLE SHEET CSS.
Website Design 3
Intro to CSS CS 1150 Spring 2017.
CS134 Web Design & Development
Introduction to Cascading Style Sheets (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.
Made By : Lavish Chauhan & Abhay Verma
Web Design & Development
Presentation transcript:

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

Why CSS Achieve consistency across multiple pages of a site. CSS styles offer great flexibility in that style is not confined to text objects. Less space Faster download when using external css file.

Applying style rules External style sheets Embedded style sheet Inline style

1-External style sheet It is sheet saves the rules in a separete style sheet document (namedoc.css) The.css document is then linked to one or more HTML documents. So, all the files in web site may share the same style sheet. Written in separated file that is called using the following tag

Example m.css document : p { font-size=14 } h1 { font-family=andalus ;color=“0000ff”} link the external.css document into web site pages:

2- embedded style sheet It is placed in the of HTML document using tag. Rules in an embedded style sheet apply only to the HTML document.

Cont. 1. Written between head tags 1- Using style type tag ---

2- style for the whole page Use tag that is written in the head tag. Example: p { font-size=14 } h1 { font-family=andalus ;color=“0000ff”} good day holiday Friday selector value property

Component of style sheet Style sheets in CSS are made up of rules. Each rule has three parts:  the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;  the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;  and the value ('purple' and '#d8da3d'), which gives the value for the style property. example shows that rule: body { color: purple } body { background-color: #d8da3d }

3- inline style Style sheet properties can be applied to a single page element using the style= attribute right within its opening HTML tag. Inline style apply only to that element.

Cont.  example: the statement Example cases: good work اليوم جميل good work Combine tags  good Or =

Conflicting style sheets: the cascading The name cascading refer to applying several style sheets to the same document, there are bound to be conflicts. The cascading priority orders from general to specific.

web pages layout You can create your page layout :  Using table  Using CSS + layers (div) There are advantages and disadvantages for each one.

disadvantageadvantage Loads only once all the elements within the table have loaded - usually slower than css layouts Changes to the tables will need to be made on each page and all the pages will need to uploaded to the server again Easy to design Works well on older browsers Table layout More challenging to design May not work on some of the older browsers Loads fast - the css file just needs to be loaded once Can easily change the layout of the entire site by tweaking the.css file as the design elements are separated from the content Css layout