IS1825: Developing Multimedia Applications for Business Lecture 1: Introduction to CSS Rob Gleasure

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

CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.
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.
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)
Cascading Style Sheets
Today CSS HTML A project.
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.
HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.
กระบวนวิชา 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.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
4.01 Cascading Style Sheets
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.
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,
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.
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.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
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.
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 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs
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.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
CO1552 – Web Application Development Cascading Style Sheets.
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 Basic (cascading style sheets)
Cascading Style Sheets. What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed.
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.
Chapter 3 CSS. Vacabulary CSS: 层叠样式表 Syntax: 语法 Selector: 选择器 filter :滤镜 / 过滤器 background: 背景 property: 属性.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
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
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
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
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
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…
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.
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.
Cascading Style Sheets
Cascading Style Sheet.
4.01 Cascading Style Sheets
>> Introduction to CSS
Cascading Style Sheet (CSS)
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
CSS Cascading Style Sheets
Website Design 3
Cascading Style Sheets - Building a stylesheet
Cascading Style Sheets
Web Programming– UFCFB Lecture 11
What are Cascading Stylesheets (CSS)?
Tutorial 3 Working with Cascading Style Sheets
Cascading Style Sheets - Building a stylesheet
4.01 Cascading Style Sheets
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

IS1825: Developing Multimedia Applications for Business Lecture 1: Introduction to CSS Rob Gleasure

IS1825 Today’s class  Directory navigation  CSS syntax  Inheritance in CSS  Inline, Internal, and External CSS  Exercise

Directory Navigation We have already seen that HTML pages will often link to external pages and/or contain external images Later in this lecture, we will also observe that, like images and related HTML pages, CSS data can be stored in separate external files As such, this seems like a good time to have a look at how we navigate directories (folders)

Directory Navigation Just as when we browse for files on the Web, we locate all files on our computer by referring to their URL (Universal Resource Locator)  The only difference is that we don’t need to specify a transfer protocol such as http when looking for files on our own machine So far, we have been putting everything together in one folder (usually the desktop) and referring to any external files purely by their file-name  this is actually a relative URL, i.e. we specify how to get to an external file from our current file location. When we just give a file-name, we are looking for files within the same folder we can also use absolute URLs to locate external files

Directory Navigation 1. Relative URLs (Shows a partial address)  Relative URLs describe how to get to a file, relative to where we are now. To do this may require we move back out of the folder we’re in now and/or navigate through a series of other folders to get to the target file. How do we do this?  To enter a folder i.e.the name of the folder followed by a forward-slash i.e. “/”  To retreat up one folder i.e.“../”

Directory Navigation 2. Absolute URLs (Shows the complete address)  The absolute URL of a file is its location on the computer. This is basically its address and is unchanged regardless of where you’re referring to it from, in the same way as the URL of a Webpage e.g. “C:/Documents and Settings/All Users/Desktop/file.html” Or more generically: “Root folder/next folder/specific folder/actual file.abc” Note – make sure you use forward-slash, not back-slash

So if we have a file page.html in a folder Pages, and we want to reference Picture.gif in a folder Images… 1. What’s the absolute URL (assuming “IS4428” is the root?) 2. What’s the relative URL from Page.html? Directory Navigation IS1811 PagesImages Page.htmlPicture.gif

Directory Navigation When would we use Absolute or Relative URLs? Advantages of Absolute URLs  Easy to move a website around within a machine  Easier if you’re referencing something external to a machine Advantages of Relative URLs  Easy to transfer a web site from one machine to another  Easier if you’re referencing something on the same machine

HTML 4.01 There are a number of versions of HTML HTML versions 1.0 and 2.0 were developed independently, with W3C taking over to produce HTML 3.0 HTML 3.2 provided quite a large amount of in-built style components, such as the tag and the color attribute. These were relatively basic but their inclusion encouraged designers to neglect the more powerful, precise and robust CSS plug-in technology. In HTML 4.0 all formatting can be removed from the HTML mark-up to CSS data – HTML style components are being depreciated There is also XHTML, which is much stricter in syntax and HTML 5.0 is currently under development  We’ve been using HTML 4.01 transitional

Cascading Style Sheets (CSS) What are CSS?  Style sheets define how to display HTML elements  Styles were added to HTML 4.0 to remove formatting from HTML’s built-in (and limited) style components  Multiple style definitions cascade into one  All browsers support Cascading Style Sheets

CSS Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. Note: If the value is multiple words, put quotes around the Value, e.g. p {font-family: "sans serif"}

CSS Syntax If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a centre aligned paragraph, with a red text colour: p { text-align: center; color: red } To make the style definitions more readable, you can describe one property on each line, like this: p { text-align:center; color:red }

CSS Grouping You can group selectors by separating each selector with a comma. e.g. h1,h2,h3,h4,h5,h6 { color: green; }  Here we have grouped all the header elements, such that headers will be displayed in green text colour:

Comments in CSS Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }

Cascading Style Sheets So how do we go about actually inserting CSS code into our HTML? There are 4 kinds of style sheet 1. Default Style Sheets 2. External Style Sheet 3. Internal Style Sheet 4. Inline Styles The default styles are set by the browser, so we will not be doing any altering to them per se. Nonetheless, it must be remembered that every HTML element has some style associated with them already.

Inheritance in Cascading Style Sheets When there’s a clash between style sheets, the style is used from the more specific instance i.e. Inline style Internal stylesheets Level of priority External stylesheets Defaults This means that, if an item has a style specified for it in an external style sheet, as well as in an internal style sheet, the style in the internal style sheet takes precedence

External Style Sheets An external style sheet refers to an external file which has been written to accompany a page/set of pages  This is ideal when the style is applied to many pages. Each HTML page using the style sheet must link to it using the tag inside the head tag. <link rel="stylesheet" type="text/css" href="mystyle.css" />

External Style Sheets continued… The first thing we do is create a style sheet.  copy and paste in the following text p {margin-left: 20px;} body {background-color: rgb(188, 215, 246);} Then we save the file as mystyle.css

External Style Sheets continued… Next we open a new notepad and copy/paste in the following: Lecture 7 page We’ll use this page to try out some CSS Now we save the page as lecture14.html in the same folder as mystyle.css

Internal Style Sheets An internal style sheet should be used when a single document has a unique style Internal styles go in the head element within a tag See what happens if we copy the following into the head section of lecture14.html, then save the page and refresh it in the browser <!-- h1 {text-transform:uppercase;} p {text-decoration:blink;} -->

Inline Styles Sometimes we only want to affect the style of a single element. Copy the following into the tag in lecture14.html, then save the page and refresh it in the browser We’ll use this paragraph to try out some inline CSS

Want to read more? CSS tutorials   Evolution of HTML 