Lab#5 style and selector
•
1 like•1,902 views
This document discusses CSS (Cascading Style Sheets) syntax and selectors. It explains the different ways to apply styles to HTML elements using inline styles, internal style sheets, and external style sheets. It also describes the three main CSS selectors - element, id, and class selectors. The element selector styles elements based on the tag name. The id selector selects individual elements using the id attribute. The class selector selects elements that share the same class attribute. Students are assigned to create a webpage presenting their two favorite movies using these CSS selectors.
More Related Content
What's hot
What's hot (20)
Similar to Lab#5 style and selector
Similar to Lab#5 style and selector (20)
More from Yaowaluck Promdee
More from Yaowaluck Promdee (20)
Recently uploaded
Recently uploaded (20)
Lab#5 style and selector
- 1. Lab#5 Style and Selector 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
- 2. CSS Basic Single Source of HTML CSS Style Sheet Web Browser Other Media Print Output Formatting data for multiple destination Server Clients
- 3. CSS Syntax selector { property:value } selector { property1:value1; property2:value2 }
- 4. How to use Style Sheet 1. Inline Styles <Tag style="property:value;"> <p style="color:black; font-family:Arial; font-weight:bold”>Hello World!!</p> An inline style loses many of the advantages of a style sheet. Use this method sparingly! To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.
- 5. 2. Internal Style Sheet <style type="text/css"> <!--selector {property1: value1; property2: value2}... --> </style> An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag
- 6. 3. External Style Sheet <link rel="stylesheet" type="text/css" href="URL file.css"> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> Example An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:
- 7. CSS Selector - The element Selector - The id Selector - The class Selector
- 8. 1. Element Selector p { text-align: center; color: red; } <p>Example1</p> <p id="paragraph">Example2</p> <p>Example3</p> The element selector selects elements based on the element name.
- 9. 2. Id Selector #paragraph { text-align: center; color: red; } <p id="paragraph">Hello World!</p> <p>This paragraph is not affected by the style.</p> The id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.
- 10. 3. Class Selector .center { text-align: center; color: red; } <h1 class="center">sentence1</h1> <p class="center">sentence2</p> The class selector finds elements with the specific class. The class selector uses the HTML class attribute. To find elements with a specific class, write a period character, followed by the name of the class:
- 11. Example Selector Class attribute .topic {color:red; font-family:Arial; font-weight:bold; text-align:center; } <div class="topic”>Heading</div> <p class="topic”>Topic Name</p> p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center }
- 12. Assignment#5 Style and Selectors Create a Webpage to present your two favorite movies using CSS (eg. all selectors in class today: element, class, id sector) and you must comment your own CSS code. Grade will be based on your CSS technique and look and feel of the Web page.
- 13. Example