Class 13 - 3/12/13: Introduction To Web Design & Computer Principles CSCI-UA.0004-003 Thursday, March 14, 13

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
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
HTML & CSS

2 DIFFERENT DOCS LINKED
INDEX.HTML STYLES.CSS
<link rel=stylesheet type=text/css href=styles/styles.css />
WRITING STYLES
h1 h2 h3 h2 h3 p p
CSS SEPARATORS!
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)
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
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
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>
Inline vs Block
Center an Image
img { display:block; margin: auto; }
The Box Model
The Box Model
Giving Values to Padding & Margins

padding: 15px; global padding-right: 15px; just the right
padding: 15px 40px 15px 40px; top right bottom left
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!
Add a BOX div
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
Give the Nav a specific ID

In the HTML file: <nav id=mainNav> In the CSS file: #mainNav
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
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
Reading for Class

CSS Chapters 7-11 Midterm: 20 questions on Photoshop 10 questions on InDesign 5 questions on UNIX 15 questions on HTML

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

HTML & CSS

<link rel=stylesheet type=text/css href=styles/styles.css />

ID is a specific instance of an element on a page

ID is a specific instance of an element on a page

(Creates space above and below it)

The Box Model

The Box Model

Giving Values to Padding & Margins

padding: 15px 40px 15px 40px; top right bottom left

Add a BOX div

Add a BOX div

Turning a List into a Nav Bar

Give the Nav a specific ID

Style the List with CSS

Makes the links appear next to eachother

Style the List with CSS

Makes background black with white text

Reading for Class

Вам также может понравиться