Presentation is loading. Please wait.

Presentation is loading. Please wait.

IS1500: Introduction to Web Development

Published byZoe Clark Modified over 7 years ago

Similar presentations

Presentation on theme: "IS1500: Introduction to Web Development"— Presentation transcript:

1 IS1500: Introduction to Web Development
Custom Styles with CSS Martin Schedlbauer, Ph.D.

2 Custom Styles with CSS IS1500 Custom Styles with CSS

3 Styles with CSS There are three types of CSS styles: Inline styles
Internal (embedded) style specifications External style sheet files IS1500 Custom Styles with CSS

4 Inline Styles Inline styles are placed directly in the tag:
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> IS1500 Custom Styles with CSS

5 Internal Style Sheets Internal (embedded) style sheet specifications are placed in the <head> section of the HTML document: <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> IS1500 Custom Styles with CSS

6 External Style Sheets External style sheet specifications are written in a separate document and then attached to various HTML documents: <head> <link rel="stylesheet" type="text/css" href=“mystyle.css" /> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; mystyle.css IS1500 Custom Styles with CSS

7 CSS Style formats CSS stands for Cascading Style Sheets
Styles define how to display HTML elements Styles were added to HTML 4.0 to solve the problem of storing formatting info External Style Sheets can save a lot of work External Style Sheets are stored in CSS files For details about the CSS style formats, refer IS1500 Custom Styles with CSS

8 Background Styles Change background color Change background image
Repeat background image Specify background position background-color: ”red”; background-image: url("paper.gif") background-repeat: repeat-x; background-position: right top; IS1500 Custom Styles with CSS

9 Specifying Color With CSS, a color is most often specified by:
a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ CSS Color Values shows a complete list of possible color values For choosing a color and it’s hex value, use IS1500 Custom Styles with CSS

10 Text Formatting Text Color Text Alignment Text Decoration
Text Transformation color: blue; text-align: center; text-decoration: underline; text-transform: uppercase; IS1500 Custom Styles with CSS

11 Blocks of Text Text can be placed into a block for special formatting:
<div style="…"> <span style="…"> Allows you to override any global style for some small piece of text. IS1500 Custom Styles with CSS

12 Margin margin clears an area around an element (outside the border)
padding-top: 25px;     padding-bottom: 75px;     padding-right: 50px;     padding-left: 100px; Regular notation Example: Top Right Bottom Left 25px some text 100px 50px 75px margin: 25px 50px 75px 100px; Short hand notation IS1500 Custom Styles with CSS

13 Padding Padding clears an area around an element (inside the border)
padding-top: 25px;     padding-bottom: 75px;     padding-right: 50px;     padding-left: 100px; Regular notation Example: Top Right Bottom Left 25px some text 100px 50px 75px margin: 25px 50px 75px 100px; Short hand notation IS1500 Custom Styles with CSS

14 Image as Background background-image property sets one or more background images for an element By default, a background-image is placed at the top-left corner of an element body { background-image: url('paper.gif'); } IS1500 Custom Styles with CSS

15 Background Image Transparency
You can't use transparency on background-images directly, but you can achieve this effect as follows: <style> .container { background-image: url('paper.png'); opacity: 0.5; } </style> <body> <div class="container"> <div class="content"><h1>Hello World!</h1></div> </div>​ Opacity: 0.5 Opacity: 1 IS1500 Custom Styles with CSS

16 Layout using CSS <!DOCTYPE html> <html> <body>
<div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> </body> </html> IS1500 Custom Styles with CSS

17 Layout using CSS (contd.)
IS1500 Custom Styles with CSS

18 Tables with CSS table {     border-collapse: collapse; } table, th, td {     border: 1px solid black; } table {     width: 100%; } th {     height: 50px; } IS1500 Custom Styles with CSS

19 Tables with CSS (contd.)
td {     height: 50px;     vertical-align: bottom; } td {     padding: 15px; } IS1500 Custom Styles with CSS

20 Tables with CSS (contd.)
table, td, th {     border: 1px solid green; } th {     background-color: green;     color: white; } IS1500 Custom Styles with CSS

21 Font Styles IS1500 Custom Styles with CSS

22 Fonts Font family Font style Font size
font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 40px; font-size: 100% font-size: 2.5em; IS1500 Custom Styles with CSS

23 Adding Custom Fonts Different browsers support different formats
.eot – IE4+ .svg – Iphone, Safari .woff – FF, Opera, Chrome Download the font in these browser-specific formats and then add their reference in CSS @font-face { font-family: ‘MyFont'; src: url(‘fonts/myFont.eot'), url(‘fonts/myFont.svg'), url(‘fonts/myFont.woff'); } p{ font-family: MyFont, Tahoma; IS1500 Custom Styles with CSS

24 Adding Google Fonts Use link to the font instead of downloading it
Go to Search for the required font Click on ‘Quick-use’ icon to see the instructions to use it IS1500 Custom Styles with CSS

25 HTML Entities Reserved characters in HTML
For more details, refer Result Description Entity Name < Less than > Greater than & Ampersand & Copyright IS1500 Custom Styles with CSS

26 Custom Tags & Styles IS1500 Custom Styles with CSS

27 Adding New Elements to HTML
Custom tags can be added: <head>    <style>   myHero {     display: block;     background-color: #ddd;     padding: 50px;     font-size: 30px;   }     </style>  </head> <body> <h1>My First Heading</h1> <myHero>My First Hero</myHero> </body> IS1500 Custom Styles with CSS

28 Summary, Review, & Questions…
IS1500 Custom Styles with CSS

Download ppt "IS1500: Introduction to Web Development"

Similar presentations

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
Cascading Style Sheets

Cascading Style Sheets
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
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.

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.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.

Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CSS(Cascading Style Sheets )

CSS(Cascading Style Sheets )
กระบวนวิชา 25 3208 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. 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.

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.
CSS Cascading Style Sheets Brief Introduction

CSS Cascading Style Sheets Brief Introduction
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
4.01 Cascading Style Sheets

4.01 Cascading Style Sheets
1Computer Sciences Department. And use

1Computer Sciences Department. And use
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
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.

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.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.

Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.

CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
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.

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.

Similar presentations

Ads by Google