Com Arts 155 1st Edition Lecture 10Outline of Last Lecture I. Internet Routing PathsII. Directory StructureIII. Links and ImagesIV. Tall, Dark and LoathsomeV. Semantic HTML ElementsVI. MetadataVII. DreamweaverOutline of Current Lecture I. Rendering EnginesII. FlowIII. CSSCurrent LectureRendering 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.FlowThese 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 withina 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
View Full Document
Unlocking...