Com Arts 155 1st Edition Lecture 10 Outline of Last Lecture I Internet Routing Paths II Directory Structure III Links and Images IV Tall Dark and Loathsome V Semantic HTML Elements VI Metadata VII Dreamweaver Outline of Current Lecture I Rendering Engines II Flow III CSS Current Lecture Rendering Engines What they do Take HTML document and start applying styles to them Cascade matters The last rule applied wins The first style sheet they use is a default style sheet They have their own CSS styles built into them Then it ll look for other styles perhaps that you have embedded in HTML It s a cascade that goes over and over again Webkit Safari and Chrome Moz Mozilla Firefox Internet Explorer Opera Adobe Dreamweaver Not a browser but it has a rendering engine It s outdated compared to the other ones Flow 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 Normal Document Flow Gravity in the world of HTML and CSS It says that there are certain elements that we should treat certain ways Some are block level that automatically return a new line and in line don t return a new line Inline Elements v Block level Elements Inline strong em a href img This is what you call an empty element because there s no text around it in html Block level p ul ol li h1 h2 h3 blockquote Try to leave all this alone Can change in CSS Working with document flow You can change the flow of an element using CSS To make navbar in a horizontal line li display inline You can also float an element in CSS Floating removes the element from normal flow and positions it to the right or left with other content flowing around it You tend to do this with images Ordinarily the image would be right next to text but you can change that Img float left Leave normal document flow alone as much as you can Nesting Review Inheritance the properties of parent elements are inherited by most child and descendant elements This helps you decide what to write rules for body A good place to begin your CSS rules because it s the parent element of everything else on the screen div Block level Not very semantic Not related to meaning in some clear way Necessary Sometimes CSS Basic Anatomy of a CSS Rule Book is really handy here Get right name for property Express it in a rule the right way CSS Box Model Every element exists inside an invisible box Within box there are different properties to control Defining an element s width that is essentially the size of the content Inside the box is padding This is negative space Border Edge of box Always a border May be invisible or you can change it and show it Margin This is the distance between where one box ends and the next begins 3 Locations for CSS Rules External link to stylesheet great Create a separate document that is CSS document and link to it within head of HTML Internal within head of HTML document sometimes ok Internal as attributed in a HTML element to be avoided Power of CSS comes in its scale If you re writing CSS rules and they re only embedded within a single element you re losing the power of scale External CSS head link href css stylesheet css type text css rel stylesheet Internal CSS head style type text css style This will reapply styles to your page It s the last one applied so it will override other styles How you target different things in CSS Class Speaks back to CSS Ex about portrait Goes back to CSS rules Knows it s a class because it starts with a period Some CSS is not supported by all browsers and in those cases you have to evoke particular names of those engines Class And ID Class global property you can apply to any element on a page You can use it as many times as you want Id global property you can apply only once on any webpage Limiting Both are Selectors Universal Selector Will style everything on your webpage Type Selector body h1 p ul li Styling all headers or paragraphs Class Selector portrait p portrait ID Selector portrait Child Selector li a Direct child can t be 2 or 3 down Descendant Selector nav li aside p It s like using the type selector but more specific If you do nav li you will only target the list items that are descendants of a nav element