 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

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
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.
1 Styles and CSS David Douglas Sam M. Walton College of Business, University of Arkansas “Connecting scholarship and research with business practice”
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.
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.
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.
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.
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.
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.
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.
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.
DIV, Span, CSS.
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.
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.
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.
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.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
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
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
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.
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
Getting Started with CSS
4.01 Cascading Style Sheets
>> Introduction to CSS
Madam Hazwani binti Rahmat
Cascading Style Sheets (CSS)
Intro to CSS CS 1150 Fall 2016.
Introduction to web design discussing which languages is used for website designing
CASCADING STYLE SHEET CSS.
Website Design 3
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
CS134 Web Design & Development
What are Cascading Stylesheets (CSS)?
Training & Development
Web Design and Development
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Web Design & Development
Cascading Style Sheets - Building a stylesheet
4.01 Cascading Style Sheets
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)  What are the main differences in each of the different pages.

 CSS stands for Cascading Style Sheets  CSS is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.  CSS saves a lot of work  External Style Sheets are stored in CSS files ◦ By making changes in one external style sheet you can change the look of a full website.

3 ways  In-line style  Internal style  External Style sheet Visit this site form more information on this

 In line style puts the style with the element for example, etc.  Inline styles are easy and quick to add. You don’t have to create a separate document.  Inline styles must be applied to every element you want them on. So if you want all your paragraphs to look the same with colour, font etc you have to add an inline style to each tag in your document.  This can take a lot of time.  Difficult to make changes to all the styles

 An internal style sheet should be used when a single document has a unique style.  Internal styles are put in the head section of an HTML page, inside the tag, like this:  Most useful when testing out styles

 Contains number of styles put together in one file.  CSS files are saved with an.css extension. (ending)  This file is then linked to HTML files  It can be used when the style is applied to many pages.  You can change the look of an entire Web site by changing just one file.

 Each page must include a link to the style sheet with the tag. The tag goes inside the head section:

 Separate content from design One of the main goals of CSS is to remove the design elements from the HTML and place them in another location for the designer to maintain. That means that a designer doesn't have to also be the content developer to maintain the look of the Web site.look of the Web site  Make maintenance easy One of the most forgotten elements of Web design is the maintenance. Unlike print materials, once you put out a Web "magazine" it doesn't go away. Things change - from the look of your site to the content and links within it. And having your CSS in a central place makes it that much easier to maintain.  Keep your site accessibile Using CSS styles can keep your site more accessible both to disabled people and to robots like search engines.search engines  Your site will stay current longer By using best practices with your CSS, you're using standards that have been proven to work and remain flexible as the Web design environment changes.

 CSS Syntax  A CSS rule set consists of a selector and a declaration block:  The selector points to the HTML element you want to style.  The declaration block contains one or more declarations separated by semicolons.  Each declaration includes a property name and a value, separated by a colon.