CSS
Web Instructions: Three Legs HTML Content CSS Presentation JavaScript Behavior
CSS... CSS is for giving style to your content HTML: content CSS: style CSS Zen Garden
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
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
Validating Your CSS http://jigsaw.w3.org/css-validator/
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 http://www.cleancss.com/css-beautify/
Need to Connect HTML & CSS Use the same CSS for multiple pages Therefore HTML point to CSS
<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”>
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
Komodo templates Update HTML template Create CSS template
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
CSS Details
Commonly Used Tags & Properties full reference sheet
Font Families Preferable to use: universality Multiple fonts: use first available
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
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
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