HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.

Slides:



Advertisements
Similar presentations
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.
Advertisements

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
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.
Session Objectives What is CSS? Define CSS syntax Learn about the authoring options Add comments to a CSS Defining color in CSS.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
1 Cascading Style Sheets C S S. 2 What is CSS? A simple mechanism for controlling the style of a Web document without compromising its structure. It allows.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 5: Cascading Style Sheets.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
Cascading Style Sheets Example
Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.
CSS Dvijesh Bhatt.
HTML - Quiz #2 Attendance CODE:
Cascading Style Sheet (CSS)
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
Jeanine
(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
To Proudly supported by ferrycake.com. We will be printing Cash for your Community tokens every week in the Carmarthen Journal and Llanelli Star. The.
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 External.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.
Class three: CSS review, backgrounds, font formatting, the box model.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Cascading Style Sheet Bayu Priyambadha, S.Kom. Definition Cascading Style Sheets (CSS) form the presentation layer of the user interface. –Structure (HTML)
Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.
Cascading Style Sheets (css) HTML and css 2012 Brian Davison.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
MySQL and PHP Review CSS. Cascading Style Sheet (CSS) Style sheets are files or forms that describe the layout and appearance of a document. Cascading.
HTML - Quiz #2 Attendance CODE:
Chapter 3 CSS. Vacabulary CSS: 层叠样式表 Syntax: 语法 Selector: 选择器 filter :滤镜 / 过滤器 background: 背景 property: 属性.
INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.
Cascading Style Sheets
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 5: Cascading Style Sheets.
CSS – Cascading Style Sheets
Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.
CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
CSS for Styling CS The good, the bad and the… ugly!  Tags such as b, i, u, and font are discouraged in strict XHTML  Why is this bad? CS380 2.
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.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
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 Text Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between.
Cascading Style Sheets - CSS basics. CSS use in html Internally … …css… … Externally.
Company LOGO In the Name of Allah,The Most Gracious, The Most Merciful King Khalid University College of Computer and Information System Web pages Development.
Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
LT: I can use CSS to decorate a web page. Do Now: Get your storyboard, and log in to winhome. Write our a list of colors you want in your website. (Minimum.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
Welcome To Website Design, Hosting And Management Prepared By Webdev Solution ip ,223,96.
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
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.
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.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
WebD Introduction to CSS By Manik Rastogi.
CSS.
Presentation transcript:

HTML/CSS Hyper Text Markup Language

CSS Cascading Style Sheets

CSS Syntax P {font-size:12px; background-color: white;} Selector: p Declaration: font-size:12px; Declaration: background-color: white; Property: color Value: white

CSS Example body { background-color: grey; } H2 { color: red; } P { font-size: 24px; }

CSS Comments body { /* This is a comment */ background-color: grey; }

CSS Selectors Element Selectors body { background-color: grey; } id Selectors #nav { color: red; }

CSS Selectors class Selectors.my-class { font-size: 24px; }

CSS Group Selectors h2 { background-color: grey; color: blue; } p { background-color: grey; color: blue; } H2, p { background-color: grey; color: blue; }

CSS How to Use Inline Styles: Paragraph text. Internal Style Sheet: h2 { background-color: grey; color: blue; }

CSS How to Use External Style Sheet: Style.css(contents) h2 { background-color: grey; color: blue; }

CSS Backgrounds background-color: grey; background-image: url(“sample-image.jpg"); background-repeat: repeat-x, repeat y, no-repeat;

CSS Text decoration P { color: blue; text-align: center; text-align: justify; text-align: right; text-decoration: overline; text-decoration: underline; text-decoration: line-through; }

CSS Text decoration P { text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; }

Reference W3schools.com