Download presentation
Presentation is loading. Please wait.
1
Filezilla problems continuing
No labs or assignments Until fixed
2
CSS
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
Need to Connect HTML & CSS
Use the same CSS for multiple pages Therefore HTML point to CSS
8
<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”>
9
General Page Structure
<!DOCTYPE html> <html> <head> <! --- what shows up on the tab --- > <title>Put your title here</title> <! --- link to CSS -- > <link href=“stylesheet.css” rel=“stylesheet” type=“text/css”> <! --- defining character necessary for validation --- > <meta charset="UTF-8"> </head> <body> <! --- the “good stuff” i--- > What will appear on the page </body> </html>
10
Validating Your CSS
11
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
12
LINK tag LINK: connect this file to this page
HREF: the file that you want to use Can be anywhere Most commonly in the same folder as the HTML page Just use the file name (name.ext) Will look at other options later REL: the relationship of the two files TYPE: how the file that is pointed at can be read
13
Navigating to a file If it in the same folder: page.html
If it is in a subfolder folder/page.html or ./folder/page.html If it is elsewhere, use whole name
14
CSS Details
15
Commonly Used Tags & Properties
full reference sheet
16
Introducing jsfiddle jsfiddle.net
Sandbox to be able to explore HTML and CSS Will use it for demonstrating and snippets because its easier to see everything at once Build web pages in Komodo
17
Font Families Preferable to use: universality
Multiple fonts: use first available
18
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
Similar presentations
