lab#5 style and selector
DESCRIPTION
Introduction to CSS Style and Selector on CSS AssignmentTRANSCRIPT
![Page 1: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/1.jpg)
Lab#5 Style and Selector 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
![Page 2: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/2.jpg)
CSS Basic
Single Source
of HTML
CSS Style Sheet
Web
Browser
Other Media
Print Output
Formatting data for multiple destination
Server Clients
![Page 3: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/3.jpg)
CSS Syntax
selector { property:value } selector { property1:value1; property2:value2 }
![Page 4: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/4.jpg)
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.
![Page 5: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/5.jpg)
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
![Page 6: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/6.jpg)
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:
![Page 7: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/7.jpg)
CSS Selector
- The element Selector
- The id Selector
- The class Selector
![Page 8: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/8.jpg)
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.
![Page 9: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/9.jpg)
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.
![Page 10: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/10.jpg)
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:
![Page 11: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/11.jpg)
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 }
![Page 12: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/12.jpg)
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.
![Page 13: Lab#5 style and selector](https://reader033.vdocuments.site/reader033/viewer/2022052900/5560b278d8b42af93b8b4798/html5/thumbnails/13.jpg)
Example