CSS
Class 13 - 3/12/13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
CSS
Stands for Cascading Style Sheets Keeps the presentation separate from the content Nested hierarchy within the HTML document allows for flexible targeted application of style rules Cascading means you can apply general style rules to the entire document and then tweak them for inner elements
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
APPLYING CSS
External Style Sheet (preferred method) Internal Style Sheet (written the the head section between <style> tags In-Line Style, applied in the .html file to specific elements Latest style takes precedence Apply styles to SELECTED elements (SELECTORS) by defining rules for how to display them
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
HTML & CSS
2 DIFFERENT DOCS LINKED
INDEX.HTML STYLES.CSS
<link rel=stylesheet type=text/css href=styles/styles.css />
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
WRITING STYLES
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
h1 h2 h3 h2 h3 p p
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
CSS SEPARATORS!
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
PROPERTIES
background-color use # followed by a hex color or a predefined color value (ie: red, black, purple, green) RGB - rgb(89,0,127) background image use url(filename FOR FONTS color text-align font-family (use web safe fonts to start)
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
ID vs CLASS
ID is a specific instance of an element on a page
called by using the # only ONE instance of an ID can be used on a single HTML page
Classes define specific styles on a page called by using the . several instances of a style can be used on a HTML page
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
ID vs CLASS
ID is a specific instance of an element on a page
called by using the # only ONE instance of an ID can be used on a single HTML page
Classes define specific styles on a page called by using the . several instances of a style can be used on a HTML page
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
The DIV
Creates a division on the page Great for structuring and separating content areas on longer pages Used with IDs for styling in CSS, especially before HTML5 It is a block element
(Creates space above and below it)
<div> </div>
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Inline vs Block
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Center an Image
img { display:block; margin: auto; }
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
The Box Model
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
The Box Model
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Giving Values to Padding & Margins
padding: 15px; global padding-right: 15px; just the right
padding: 15px 40px 15px 40px; top right bottom left
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Add a BOX div
This allows your content to float in the center of your browser window, and protects it from resizing You must set a fixed width for your div Set the margins on right and left to Auto Change the background color to see it in action!
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Add a BOX div
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Turning a List into a Nav Bar
Use the structure of a list to create a horizontal or vertical nav bar The hierarchy (nesting) of the list will help us write style rules for the navigation bar Be sure the elements are properly nested
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Give the Nav a specific ID
In the HTML file: <nav id=mainNav> In the CSS file: #mainNav
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Style the List with CSS
#mainNav ul{ text-decoration:none; text-align:center; } #mainNav ul li{ display:inline; } Removes the bullets Centers the text
Makes the links appear next to eachother
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Style the List with CSS
#mainnav ul li a{ text-decoration:none; padding:15px; background-color:white; color:black; } #mainnav ul li a:hover{ background-color:black; color:white; } Removes hyperlink Adds padding Makes background white with text black
Makes background black with white text
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Reading for Class
CSS Chapters 7-11 Midterm: 20 questions on Photoshop 10 questions on InDesign 5 questions on UNIX 15 questions on HTML
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
