1 Creating Web Pages Part 3. 2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML.

Slides:



Advertisements
Similar presentations
CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Computer Applications II.  A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site)
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.
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.
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Introduction to CSS.
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.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
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.
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.
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Basics of HTML.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
STYLING THE WEBSITE - EXTERNAL CSS BY JORGE MARTINEZ.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
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.
ECMM6018 Enterprise Networking For Electronic Commerce Tutorial 2 Cascading Style Sheets (CSS)
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.
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.
CSS Basic (cascading style sheets)
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
The Teacher HTML HTML (3) Cascading Style Sheets.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
DIV, Span, CSS.
Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.
Cascading Style Sheets
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.
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.
Introduction to CSS. What is CSS? CSS ("Cascading Style Sheets") determines how the elements in our XHTML documents are displayed and formatted. By using.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.
Introduction To CSS by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Content and Resources Used With Permission: Interact With Web.
CSS Syntax. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value}
1 CSS محمد احمدی نیا 2 Of 21 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 
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.
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
Html: structure & content CSS: presentation & style A CSS Primer chapter 4.
CSS DHS Web Design. Location Between the & Start with – End with –
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…
Css lectures. 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.
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. Lesson 1: History of CSS CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. There were.
1 Cascading Style Sheets
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.
CSS: Cascading Style Sheets
>> Introduction to CSS
Intro to CSS CS 1150 Fall 2016.
Website Design 3
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
What are Cascading Stylesheets (CSS)?
Cascading Style Sheets - Building a stylesheet
Presentation transcript:

1 Creating Web Pages Part 3

2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML page. Set of rules that define how a web browser should display an HTML page. Types of Style Sheets Types of Style Sheets InlineInline EmbeddedEmbedded ExternalExternal What is meant by “cascading”? What is meant by “cascading”?

3 div {color:#FF0000;} div.style1 {color:#FF0000;} div.style2 {color:#FF0000;} Cascading Style Sheets external.csscssexample.html CASCADING STYLE SHEETS (CSS): What do they look like? Cascading Style Sheets div.style2 { color:#009900;} div style in external sheet div.style1 in external sheet div.style2 in embedded style sheet inline style sheet div.style2 { color:#009900;} div style in external sheet div.style1 in external sheet inline style sheet div.style2 in embedded style sheet browser

4 The syntax is composed of three parts: a selector, a property and a value: selector {property:value} The property and value are separated by a colon and are surrounded by curly brackets: body {color:black} where: selector = the HTML element/tag you wish to define selector = the HTML element/tag you wish to define property = the attribute you wish to change property = the attribute you wish to change value = the setting to be assigned to the property value = the setting to be assigned to the property CASCADING STYLE SHEETS (CSS): How does CSS syntax work? If the value contains multiple words, it should be enclosed in quotes: p {font-family:"sans serif"} If there’s more than one property, separate each pair of properties with a semi-colon. p {text-align:center;color:red} To make style definitions easy to read, put one property on each line: p { text-align:center; color:black; font-family:arial; } GROUPS: GENERAL RULES:

5 You can group selectors. Use a comma to separate each pair of selectors: You can use the class selector to define different styles for the same type of HTML element: h1,h2,h3,h4,h5,h6 {color: green} CASCADING STYLE SHEETS (CSS): How does CSS syntax work? To make use of these defined class selectors, you then use the class attribute in your HTML document: This paragraph will be right-aligned. This paragraph will be right-aligned. This paragraph will be center-aligned. This paragraph will be center-aligned. To define a style that will be used by all HTML elements that have a certain class, omit the tag name in the selector To use the defined style in the body of the document, specify the class attribute..center {text-align:center} GROUPS: CLASS SELECTORS: p.right {text-align:right} p.center {text-align:center} This heading will be center-aligned This heading will be center-aligned This paragraph will also be center-aligned. This paragraph will also be center-aligned. Source:

6 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 1. Font and background colors 2. Background images

7 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 4. Font properties 3. Text properties

8 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 5. Box properties