You are on page 1of 23

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