Download to read offline
Uploaded byDhairya Joshi
MTA css flow, positioning, and styling
This document provides an overview of CSS essentials including the separation of content and presentation with CSS, linking CSS to HTML, CSS selectors and declarations, fonts, positioning with float and absolute positioning, and overflow properties. It includes examples of inline and block flow, floating and absolutely positioned elements, and using the overflow property to create scrolling, visible and hidden overflow. The goal is to understand core CSS concepts needed to pass the MTA Exam Objective on understanding CSS essentials.
MTA css flow, positioning, and styling
- 1. Understanding CSS Essentials:Content Flow, Positioning, and Styling Lesson 4
- 2. Exam Objective Matrix Skills/Concepts MTAExam Objectives Understanding CSS Essentials Understand the core CSS concepts. (3.1)
- 3. Presentation vs. Content •Content is the words and images in an HTML document. • Presentation is related to styles and how words and images "look" in an HTML document. • Content is managed as HTML and style as CSS. • The separation of HTML and CSS generally means keeping CSS styles in a file separate from the HTML file.
- 4. Web Page withand without CSS
- 5. CSS • CSS =Cascading Style Sheets • CSS is a sequence of rules. • CSS3 is the latest draft version; corresponds to HTML5 • CSS3 is that it’s backward compatible with previous versions of CSS,
- 6. The Link BetweenHTML and CSS • The <link> element in an HTML file links the HTML file to a CSS file. • You can reference more than one CSS file in an HTML page. • Markup example: <link href = "filename.css" rel = "stylesheet" type = "text/css"> • For simple projects, can use the <style> tag to include styles within an HTML document
- 7. CSS Selector andDeclaration • The selector is usually the HTML element you want to style. The declaration is the style for a specific selector. A declaration has a property, which is a style attribute, and a value. Selector Declaration p {color: brown;} Property Value
- 8. Styled Web PageExample: HTML File
- 9. Styled Web PageExample: CSS File
- 10. Styled Web PageExample: Rendered Page
- 11. Font Basics • Afont is a set of characters of a particular size and style. • Examples: – Times New Roman – Eras Bold ITC – Myriad Web Pro • Monospace is often used for technical material such as formulas, numbers, codes, and so on.
- 12. Serif and SansSerif Fonts Sans serif Serif d p t d p t
- 13. Font Families • Theprimary way to specify fonts in a CSS file is to use the font-family property. • The property can declare a specific font, like Garamond or Arial, or a family that includes many different fonts, such as “serif.” • Examples: – font-family: Arial – font-family: serif
- 14. Web-safe Fonts • Fontsmost likely installed on a Web page visitor’s system • List of Web-safe fonts is relatively short and doesn’t offer much variety
- 15. @font-face Rule • CSS3rule that enables developers to use any font they choose • Create a font-face rule by assigning a name to the font • Font must be located on your Web server, or include a URL to font location • Example: @font-face { font-family: TrustyHomePage; src: url('Euphemia.ttf'), }
- 16. Inline Flow andBlock Flow • Inline flow fills only as much width as required • Block flow fills as much width as is available
- 17.
- 18.
- 19. Inline Flow Example •Update the style section of the HTML file as follows:
- 20.
- 21. Float vs. AbsolutePositioning • Float positioning – Is useful when a layout is in columns, at least in part – To float an element is to have it move as far as possible either to the right or left – Text “wraps” around the element • Absolute positioning – More exact and uses geometric placement
- 22.
- 23.
- 24.
- 25.
- 26. Bounding Box • Abounding box is a rectangular border around content -- text, an image, or a shape -- that enables you to move, rotate, or scale the content of the box. • Bounding box can be visible or invisible.
- 27. Overflow • When anelement overflows its bounding box, and its overflow is set to scroll, all the content of the element stays within the box; none of the overflow appears outside the box. This is referred to as scrolling overflow. • Visible overflow writes over the content that follows it. • Hidden overflow makes overflow invisible.
- 28. Overflow • overflow property •Values: – Scroll – Visible – Hidden
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. Recap • Presentation versuscontent • CSS basics – – – – The link between HTML and CSS CSS selector and declaration Fonts and font families Web-safe fonts and @font-face rule • Inline flow and block flow • Float and absolute positioning • Overflow
Editor's Notes
- #3 Tip: Add your own speaker notes here.
- #4 Tip: Add your own speaker notes here.
- #5 Tip: Add your own speaker notes here.
- #6 Tip: Add your own speaker notes here.
- #7 Tip: Add your own speaker notes here.
- #8 Tip: Add your own speaker notes here.
- #9 Tip: Add your own speaker notes here.
- #10 Tip: Add your own speaker notes here.
- #11 Tip: Add your own speaker notes here.
- #12 Tip: Add your own speaker notes here.
- #13 Tip: Add your own speaker notes here.
- #14 Tip: Add your own speaker notes here.
- #15 Tip: Add your own speaker notes here.
- #16 Tip: Add your own speaker notes here.
- #17 Tip: Add your own speaker notes here.
- #18 Tip: Add your own speaker notes here.
- #19 Tip: Add your own speaker notes here.
- #20 Tip: Add your own speaker notes here.
- #21 Tip: Add your own speaker notes here.
- #22 Tip: Add your own speaker notes here.
- #23 Tip: Add your own speaker notes here.
- #24 Tip: Add your own speaker notes here.
- #25 Tip: Add your own speaker notes here.
- #26 Tip: Add your own speaker notes here.
- #27 Tip: Add your own speaker notes here.
- #28 Tip: Add your own speaker notes here.
- #29 Tip: Add your own speaker notes here.
- #30 Tip: Add your own speaker notes here.
- #31 Tip: Add your own speaker notes here.
- #32 Tip: Add your own speaker notes here.
- #33 Tip: Add your own speaker notes here.
- #34 Tip: Add your own speaker notes here.
- #35 Tip: Add your own speaker notes here.