Software Engineering for Internet Applications

Slides:



Advertisements
Similar presentations
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
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.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
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.
Introduction to CSS.
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.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
กระบวนวิชา 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.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
4.01 Cascading Style Sheets
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
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.
IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CSS Cascading Style Sheets Prepared By
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
IS1500: Introduction to Web Development
Cascading Style Sheet.
CS3220 Web and Internet Programming CSS Basics
4.01 Cascading Style Sheets
Creating Your Own Webpage
>> Introduction to CSS
Introduction to the Internet
Chapter 6 Cascading Style Sheets™ (CSS)
IS 360 Declaring CSS Styles
Madam Hazwani binti Rahmat
Cascading Style Sheets (CSS)
Intro to CSS CS 1150 Fall 2016.
Cascading Style Sheets
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Intro to CSS CS 1150 Spring 2017.
Cascading Style Sheets
DynamicHTML Cascading Style Sheet Internet Technology.
CS134 Web Design & Development
Working with Cascading Style Sheets (CSS)
Working with Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
The Internet 10/6/11 Cascading Style Sheets
Cascading Style Sheets™ (CSS)
DynamicHTML Cascading Style Sheet Internet Technology.
Training & Development
Web Design and Development
CS3220 Web and Internet Programming CSS Basics
Web Design & Development
Stylin’ with CSS.
4.01 Cascading Style Sheets
Stylin’ with CSS.
INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT)
Introduction to Cascading Style Sheets (CSS)
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

Software Engineering for Internet Applications Cascading Style Sheet (CSS) ADF 11/20/2018

Cascading Style Sheets a simple design language intended to simplify the process of making web pages presentable handles the look and feel control the style of a web document in a simple and easy way Text color, fonts style, paragraph spacing, columns size and layout, background images or colors, as well as a variety of other effects 11/20/2018

CSS Syntax A style rule is made of three parts Selector Property Value an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc Property a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value alues are assigned to properties. For example, color property can have value either red or #F1F1F1 etc. 11/20/2018

CSS Syntax selector { property : value } table { border :1px solid #C00; } h1 { color: #36CFFF; } * { color: #000000; } #black { color: #000000; } 11/20/2018

CSS Syntax color: #36C; selector { property : value } h1, h2, h3 { font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } 11/20/2018

CSS - Inclusion Associate styles with HTML document Embedded CSS – the <style> element Inline CSS - The style Attribute External CSS - The <link> Element Imported CSS - @import Rule 11/20/2018

Embedded CSS – The <style> Element using the <style> element. placed inside <head>...</head> tags <!DOCTYPE html > <html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 11/20/2018

Inline CSS – The style Attribute use style attribute of any HTML element to define style rules These rules will be applied to that element only <element style = "...style rules...."> <html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html> 11/20/2018

External CSS - The <link> Element The <link> element can be used to include an external stylesheet file An external style sheet is a separate text file with .css extension <head> <link type = "text/css" href = "..." media = "..." /> </head> 11/20/2018

External CSS - The <link> Element mystyle.css h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } Index.html <head> <link type = "text/css" href = "mystyle.css" media = " all" /> </head> 11/20/2018

Imported CSS - @import Rule @import is used to import an external stylesheet in a manner similar to the <link> element <head> @import “URL"; </head> <head> @import (“URL“); </head> <head> @import "mystyle.css"; </head> 11/20/2018

CSS Rules Overriding Inline style sheet takes highest priority. override any rule defined in <style>...</style> tags or rules defined in any external style sheet file. <style> rule takes second priority Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. Any rule defined in external style sheet file takes lowest priority rules defined in this file will be applied only when above two rules are not applicable. 11/20/2018

Question?

Home Task create a static webpage in technicolor with the following style properties: font family, font sizes, background color or image, border style, table styles, list style, anchor link styles (hover, etc), text align Create 2 more static webpages with the same content yet create a completely different CSS styles In 1 of the 2 new forms, use grid instead of table In 1 of the 2 new forms, use external CSS 11/20/2018

11/20/2018