Lab#5 style and selector
13
Lab#5 Style and Selector 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
-
Upload
yaowaluck-promdee -
Category
Education
-
view
713 -
download
2
description
Introduction to CSS Style and Selector on CSS Assignment
Transcript of Lab#5 style and selector
Lab#5 Style and Selector 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas
CSS Basic
Single Source
of HTML
CSS Style Sheet
Web
Browser
Other Media
Print Output
Formatting data for multiple destination
Server Clients
CSS Syntax
selector { property:value } selector { property1:value1; property2:value2 }
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.
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
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:
CSS Selector
- The element Selector
- The id Selector
- The class Selector
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.
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.
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:
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 }
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.
Example
