Com Arts 155 1st Edition Lecture 11 Outline of Last Lecture I Rendering Engines II Flow III CSS Outline of Current Lecture I Review of CSS II Text III Layout IV Midterm Review Current Lecture Review of CSS Syntax It s a different language than HTML It lists a property then a value The distinct properties need to be written exactly as they are on the slide Selectors What we want to target in CSS We often target with an element but we can also use classes and ids Inheritance properties of parent elements are inherited by most child and descendant elements body is a good place to start Text All fonts in serif and sans serif Typically print uses serif fonts Typically web design uses sans serif Font Family Create a rule for the font family Want font Georgia to display The user has to have it installed on their computer If you don t have Georgia give Times New Roman multiple words so quote it then serif The general last rule applied wins is not true These notes represent a detailed interpretation of the professor s lecture GradeBuddy is best used as a supplement to your own notes not as a substitute 4 default fonts serif cursive monospace san serif Font size Default 16 px or 100 or 1 em pixels is typically easier Can change use rule font size 12px Google web fonts We re assuming the user doesn t have the fonts on their computer You can go to google web fonts and use it and you copy paste the code in the style sheet and the user s computer will instantaneously download it and be able to see it Color Print CMYK Subtractive color process subtracts brightness from white Web RGB additive color adding all 3 colors producing white Hexadecimal Notation There are 6 different decimals that we re using They describe RGB First 2 is red second 2 is green last 2 is b What color is 000 It s black What color is FFF It s white color property is content color or foreground color background color is background color Hue Saturation Lightness HSL Hue is color on the color wheel Saturation is the amount of gray in a color with 0 saturation being a shade of gray Lightness is the amount of white or black 0 lightness is black HSLA Hue Saturation Lightness Oppacity value between 0 and 1 RGBA It also addresses opacity Contrast insures legibility Easier to read dark text over light background for long passages Question What CSS property changes the color of a font color Layout Fixed width vs Relative width Fixed in in terms of pixels Relative is percentage Encourage to use fixed width 960 pixel grid system A lot of designers use a 960 pixel grid for a layout system You re going to have to do math A lot of websites show this Can use rule of thirds Vertically Keep your most important content in the top 550 pixels don t want them to have to scroll down Come up with banner that isn t more than 100 pixels high it s tough Normal Document Flow Think of how fit into layout Sometimes you have to float an element When you float an element you remove it from normal document flow and position it somewhere div isn t the most semantic but you may have to use it Box Model Everything exists inside invisible box Content width of content Padding negative space around text Border can be invisible or not Margin distance between one box and the next Margin this is short hand for applying to top right bottom and left Can express as margin 25px 50px 75px 100px it goes top right bottom left can apply to padding and border as well Midterm Review 3 point lighting 3 lights key fill background Key main source of light Fill fill in shadows Back light give definition and depth How to obtain the greatest depth of field Lens wide angle Aperture Large Fstop Less light Semantic meaning HTML It means that something has a meaning associated with it Where that comes into HTML is that HTML describes the structure of web pages and you want to describe it with meaning Ex You read a list differently than a table A list is a group the items are grouped together A table you don t know is it data A list What is a codec A program that encodes and decodes information Ex A codec will encode the lights that come in and hit a censor and then decode it by extracting and putting it on your computer Compression Most codecs compress the data Lossless Algorithm that finds areas of repetition and more efficiently packs it Lossy Removes unimportant information Bitmap and Vectors Vector Mathematical geometrically expressed because of that you can make the same thing super giant or super small and you won t lose resolution Photographs can t be saved in vector Bitmap pixels Creative Commons v Fair Use v Public Domain Fair use lets us in certain circumstances use copyrighted material without having to ask for it or pay for it Creative commons lets you license your material however you want Gives others more freedom to use it Public domain Out of copyright all together Anything published before 1942 If you license to public domain you give up all ownership Attribution Attribution addresses ethics It is ethical to say where certain material comes from and give proper credit However is different from fair use which deals with legality of copyright Circuits Equation Amps watts voltage Typical number of amps 15 Typical voltage 100 This is how you decide if you can fit it into one circuit or multiple Elements for HTML and CSS Know the difference between elements that are semantic and not block level or inline know those properties Most importantly have a good sense for how HTML and CSS works Structure v Presentation HTML describes structure CSS controls presentation Value of that is many fold It makes HTML more accessible and way easier to style for CSS Can take same HTML and visually style it differently Hyperlink and Relative links Hyperlinks throughout the internet You re pointing to another file or webpage or image Relative the way we describe linking to other files within own website