Class 13 - 3/12/13: Introduction To Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Class 13 - 3/12/13: Introduction To Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Class 13 - 3/12/13: Introduction To Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
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
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
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
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
<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
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13
Introduction to Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13