Website Design 3

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

Intro To Cascading Style Sheets By Mario Yannakakis.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
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 Style.
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.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
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.
กระบวนวิชา 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.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
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,
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,
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.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
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.
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.
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.
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.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
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
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.
 Look especially at › File Tips and Shortcuts › Student video.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
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.
CSS Syntax. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value}
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
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. 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.
WebD Introduction to CSS By Manik Rastogi.
Cascading Style Sheets
Cascading Style Sheet.
CSS Cascading Style Sheets
Getting Started with CSS
4.01 Cascading Style Sheets
>> Introduction to CSS
Intro to CSS CS 1150 Fall 2016.
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
CSS Cascading Style Sheets
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
Cascading Style Sheets
CS134 Web Design & Development
Working with Cascading Style Sheets (CSS)
Working with Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
Web Design and Development
Web Design & Development
Cascading Style Sheets - Building a stylesheet
4.01 Cascading Style Sheets
External Style Sheets.
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

HTML Style was introduced to provide a better way of styling HTML elements. Style can be added to HTML in three ways Inline - using the style attribute in HTML elements Internal - using the element in the section External - using an external Cascading Style Sheet (CSS) file The preferred way to add style to HTML, is to put styling syntax in separate CSS files.

 CSS has the following general rule: element { property : value}  When there are multiple entries, these are separated by a semicolon such as element { property_1 : value_1; property_2 : value_2; … property_n : value_n }

 An inline style can be used if a unique style is to be applied to one single occurrence of an element.  The inline style is applied as an attribute in the relevant HTML tag.  The inline HTML style follows the following syntax:

 An internal style sheet can be used if one single document has a unique style.  Internal styles are defined in the section of an HTML page, by using the tag.  Example body {background-color: lightgrey;} p {text-align: right;}

 An external style sheet is ideal when the style is applied to many pages.  Each page must link to the style sheet using the tag.  Example  Where, - defines the relationship between a document and an external resource.

 A CSS rule has two main parts: a selector, and one or more declarations..header { font-size: 14px;} selector declaration  CSS comments Comments are used to explain your styling code, and may help you when you edit the source code at a later date. A CSS comment begins with "/*", and ends with "*/"

 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 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 file in which CSS rules are defined is saved with a.css extension.

 Example: #para1 { text-align:center; color:red; }  The class selector is used to specify a style for a group of elements.  The class selector is most often used on several elements.  The class selector uses the HTML class attribute, and is defined with a named dot "."

 Example.center {text-align: center;}  Multiple styles will cascade into one, the order will be 1. Browser default 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element) Where number 4 has the highest priority

 Visit for more examples.