MTA css flow, positioning, and styling
-
Upload
dhairya-joshi -
Category
Technology
-
view
138 -
download
0
description
Transcript of MTA css flow, positioning, and styling
![Page 1: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/1.jpg)
Understanding CSS Essentials: Content Flow, Positioning, and Styling
Lesson 4
![Page 2: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/2.jpg)
Exam Objective Matrix
Skills/Concepts MTA Exam Objectives
Understanding CSS Essentials
Understand the core CSS concepts. (3.1)
![Page 3: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/3.jpg)
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.
![Page 4: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/4.jpg)
Web Page with and without CSS
![Page 5: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/5.jpg)
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,
![Page 6: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/6.jpg)
The Link Between HTML 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
![Page 7: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/7.jpg)
CSS Selector and Declaration• 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.
p {color: brown;}
Selector Declaration
Property Value
![Page 8: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/8.jpg)
Styled Web Page Example: HTML File
![Page 9: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/9.jpg)
Styled Web Page Example: CSS File
![Page 10: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/10.jpg)
Styled Web Page Example: Rendered Page
![Page 11: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/11.jpg)
Font Basics• A font 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.
![Page 12: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/12.jpg)
Serif and Sans Serif Fonts
d p t
Serif Sans serif
d p t
![Page 13: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/13.jpg)
Font Families• The primary 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
![Page 14: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/14.jpg)
Web-safe Fonts• Fonts most likely installed on a Web
page visitor’s system• List of Web-safe fonts is relatively
short and doesn’t offer much variety
![Page 15: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/15.jpg)
@font-face Rule• CSS3 rule 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'),}
![Page 16: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/16.jpg)
Inline Flow and Block Flow• Inline flow fills only as much width as
required• Block flow fills as much width as is
available
![Page 17: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/17.jpg)
Block Flow Example
![Page 18: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/18.jpg)
Block Flow Example
![Page 19: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/19.jpg)
Inline Flow Example• Update the style section of the HTML
file as follows:
![Page 20: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/20.jpg)
Inline Flow Example
![Page 21: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/21.jpg)
Float vs. Absolute Positioning• 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
![Page 22: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/22.jpg)
Float Positing Example
![Page 23: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/23.jpg)
Float Positing Example
![Page 24: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/24.jpg)
Absolute Positioning Example
![Page 25: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/25.jpg)
Absolute Positing Example
![Page 26: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/26.jpg)
Bounding Box• A bounding 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.
![Page 27: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/27.jpg)
Overflow• When an element 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.
![Page 28: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/28.jpg)
Overflow• overflow property• Values:
– Scroll– Visible– Hidden
![Page 29: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/29.jpg)
Scrolling Overflow Example
![Page 30: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/30.jpg)
Scrolling Overflow Example
![Page 31: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/31.jpg)
Visible Overflow Example
![Page 32: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/32.jpg)
Visible Overflow Example
Visible overflow
![Page 33: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/33.jpg)
Hidden Overflow Example
![Page 34: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/34.jpg)
Hidden Overflow Example
![Page 35: MTA css flow, positioning, and styling](https://reader035.fdocuments.us/reader035/viewer/2022062312/55561bb5d8b42ae0238b5123/html5/thumbnails/35.jpg)
Recap• Presentation versus content• 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