IS1500: Introduction to Web Development Custom Styles with CSS Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu
Custom Styles with CSS IS1500 Custom Styles with CSS
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
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
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
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
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 http://www.w3schools.com/css IS1500 Custom Styles with CSS
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
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 http://www.colorschemer.com/online.html IS1500 Custom Styles with CSS
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
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
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
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
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
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
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
Layout using CSS (contd.) IS1500 Custom Styles with CSS
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
Tables with CSS (contd.) td { height: 50px; vertical-align: bottom; } td { padding: 15px; } IS1500 Custom Styles with CSS
Tables with CSS (contd.) table, td, th { border: 1px solid green; } th { background-color: green; color: white; } IS1500 Custom Styles with CSS
Font Styles IS1500 Custom Styles with CSS
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
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
Adding Google Fonts Use link to the font instead of downloading it Go to https://www.google.com/fonts Search for the required font Click on ‘Quick-use’ icon to see the instructions to use it IS1500 Custom Styles with CSS
HTML Entities Reserved characters in HTML For more details, refer http://www.w3schools.com/html/html_entities.asp Result Description Entity Name < Less than > Greater than & Ampersand & © Copyright © IS1500 Custom Styles with CSS
Custom Tags & Styles IS1500 Custom Styles with CSS
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
Summary, Review, & Questions… IS1500 Custom Styles with CSS