Download presentation
Presentation is loading. Please wait.
1
CSS
2
Web Instructions: Three Legs
HTML Content CSS Presentation JavaScript Behavior
3
CSS... CSS is for giving style to your content HTML: content
CSS: style CSS Zen Garden
4
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
5
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
6
Validating Your CSS
7
Formatting your CSS http://www.cleancss.com/css-beautify/
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
Need to Connect HTML & CSS
Use the same CSS for multiple pages Therefore HTML point to CSS
9
<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”>
10
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
11
Komodo templates Update HTML template Create CSS template
12
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
13
CSS Details
14
Commonly Used Tags & Properties
full reference sheet
15
Font Families Preferable to use: universality
Multiple fonts: use first available
16
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
17
Centering Elements such as body, div, main, header, footer can be given widths Specific size (px): never change Percentage of window (%): change By default, they will be on the left edge But you can change margins To center, tell it to AUTOmatically compute the margin
18
PSEUDO-ELEMENTS Relate to a piece rather than all of the element
selector::pseudo-element Style the first letter, or line, of an element first-line first-letter Insert content before, or after, the content of an element before after
Similar presentations
