MTA EXAM HTML5 Application Development Fundamentals

98-375: OBJECTIVE 3 Format the User Interface by Using CSS

Understand the core CSS concepts LESSON 3.1

In this lesson, you will review the following: Separating presentation from content Managing content flow Managing positioning of individual elements Managing content overflow Basic Cascading Style Sheets (CSS) styling OVERVIEW Lesson 3.1

Why is it important to separate style from content? How does CSS manage positioning elements on a page? How does CSS apply presentation to content? GUIDING QUESTIONS Lesson 3.1

LECTURE Lesson 3.1 Separating Presentation from Content Create content with HTML and style content with CSS. The HTML content and CSS style must be coordinated using HTML tags, and selectors such as ids and classes. Create this sentence: Welcome to the wonderful world of CSS » HTML code: Welcome to the wonderful world of CSS » CSS code: #welcome { font-family: “Tempus Sans ITC”; color: red;} All future HTML tags that use the id=“welcome” will be formatted in the same style.

LECTURE Lesson 3.1 Managing Content Flow Inline and block flow describe the spacing and line breaks for the content included in the tag. A block element, such as a div tag, typically starts a new line and is sized according to the width of the parent container. Examples of block elements:,, An inline element, such as a span, typically does not start a new line and is sized according to the height and width of its own content. Examples of inline elements:,

LECTURE Lesson 3.1 Managing Positioning of Individual Elements Float vs. absolute positioning. A floated element is taken out of the normal flow and pushed to the right or left of the parent element. Elements can float to the right or left. Any element that follows the floated element will flow around the floated element on the other side. An element with absolute positioning is located relative to the upper-left corner of the browser.

LECTURE Lesson 3.1 Managing Content Overflow The overflow property specifies what happens if the content is too large to fit into an element box. Overflow can be set to: Scroll: Overflow is clipped, but a scroll bar is added for viewing the extra content. Visible: Overflow is not clipped; it renders outside the element’s box. Hidden: Overflow is clipped and the rest of the content is not visible.

DEMONSTRATION Lesson 3.1 Basic CSS Styling In this demonstration, you will see how to: Setup HTML code to add “hooks” for styles. Create an external CSS file. Attach that file to the page and preview it in a browser.

DISCUSSION Lesson 3.1 What Is Meant by the CSS Box Model? 1.How is the box model used to style HTML elements? 2.What properties are included in the box model? 3.What part of the model is set to a specific height and width?

IN-CLASS ACTIVITY Lesson 3.1 Directions: Read the scenario. Answers to the questions. Review your answers with a partner.

REVIEW Lesson 3.1 Can you answer these? Why is it important to separate style from content? How does CSS manage positioning elements on a page? How does CSS apply presentation to content?

ADDITIONAL RESOURCES Lesson 3.1 MSDN Resources Internet Explorer ® Learning – CSS3 us/ie/gg Cascading Style Sheetshttp://msdn.microsoft.com/en- us/library/ms531205(v=vs.85).aspx Other Resources W3 Schools CSS Tutorialhttp:// About: What is CSS? mlcssxml.htm#s5