Download presentation
Presentation is loading. Please wait.
1
CSS
2
Special symbols in HTML
< and > are special symbols with special meanings How would you display A < B ? Suggestions? < for < and > for > & is an escape symbol, handled specially. Always ends with ; Means that you need a special way to display “&” too: & Good list at
3
Web Instructions: Three Legs
HTML Content CSS Presentation JavaScript Behavior
4
CSS... CSS is for giving style to your content HTML: content
CSS: style CSS Zen Garden
5
What can you change? Font: size, color, style Background Border
More on color next week For now, by name Background Border Must have size color and style Position: margins, centering Size
6
Syntax (how it looks) Selector specifies the HTML element to style
Declaration: always contains a property & value ends with a semicolon Property: style element you want to change Value: what you are changing the property to Next we’ll discuss the syntax of css. It’s a different language from html, so it will look a little bit different. Selector allows us to choose a tag from the html to edit
7
Formatting your CSS Formatting Practices:
some flexibility, but you must be consistent. always comment unclear code! /* someCommentHere */ curly braces tab alignment Bad practices: declarations on the same line as braces or selector multiple declarations on the same line leaving off the last semi-colon
8
Commonly Used Tags & Properties
full reference sheet
9
Font Families Preferable to use: universality
Multiple fonts: use first available
10
Defining size pt refers to printer’s font measurement
px refers to pixels em is a relative measure 1 em = base size (defined in body or default) Great for changing all at once
11
Page Structure
12
General Page Structure
<!DOCTYPE html> <html> <head> <! ---defining character necessary for validation --- > <meta charset="UTF-8"> <! --- what shows up on the tab --- > <title>Put your title here</title> </head> <body> <! --- the “good stuff” i--- > What will appear on the page </body> </html>
13
The Body Every page needs Minimal content Header (DIFFERENT THAN head)
Content (Main) Footer Minimal content Header: title Footer: who wrote it and when
14
Dividing Up the Body Basic model: <header>…</header> Use for main title <main> … </main> Use for the main content <footer> … </footer> Use for accreditations and citations Each section can be formatted independently (soon)
15
<link href=“mystyle.css” rel=stylesheet type=“text/css”>
Adding CSS to your HTML The best (only way for this class!) way to insert CSS to your HTML is by using an External Style Sheet Define all your styles in one place Easily change the look of your site Use the following <link> tag within the <head> tag Save your external style sheet as a .css file. <link href=“mystyle.css” rel=stylesheet type=“text/css”>
16
Another Tool Komodo Templates
Similar presentations
