CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

Slides:



Advertisements
Similar presentations
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
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.
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. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,
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.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
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.
Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
DIV, Span, CSS.
Cascading Style Sheets
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
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.
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
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.
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
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.
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /16.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
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.
Working with Cascading Style Sheets
CSS Cascading Style Sheets
Getting Started with CSS
>> Introduction to CSS
Cascading Style Sheets
Introduction to Web programming
Intro to CSS CS 1150 Fall 2016.
CASCADING STYLE SHEET CSS.
Website Design 3
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
What are Cascading Stylesheets (CSS)?
HTML and CSS Basics.
Cascading Style Sheets - Building a stylesheet
Web Programming and Design
INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT)
Presentation transcript:

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1

CSS stands for Cascading Style Sheets CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple Web pages all at once External Style Sheets are stored in CSS files CSS, Cascading Style Sheets 2

CSS syntax CSS is not XML! General syntax: CSS rule Selector { declarations } CSS example P { color: red; text-align: center} CSS, Cascading Style Sheets3

CSS selectors: What should be styled … Elements The specified kind of HTML element is styled Example: p { style rules } all p (paragraph) elements are styled ID The element with the specified ID attribute is styled ID should be unique within a web page Only on element is styled example HTML: …. Example CSS: #special { style rules } Class All elements of the specified class are styled Example HTML: … Example css:.red { color : red } Grouping Example css: p.red { color : red } Only p elements with class=“red” are styled Ties ID > group > class > element CSS, Cascading Style Sheets4

Three ways to insert CSS External style sheet Applies to all HTML document linking to the style file Style rules are defined in a separate file, like mystyles.css HTML documents refer to the style file (head section of the document) Internal style sheet Applies to a single HTML document Style rules are defines in the head section of the HTML file p : { color: blue; } h1: {color: orange; } Inline styles Applies to a single element … Ties: inline styles override internal styles which overrides external styles Inline > internal > external CSS, Cascading Style Sheets5

HTML elements: div + span HTML elements div (block level) and span (inline) does not have a visual appearance Unless they are styled Div and span are used for styling And for JavaScript … Div can be used to style a block Span can be used to style elements inline. CSS, Cascading Style Sheets6

CSS validation W3C has a CSS validator CSS, Cascading Style Sheets7