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">

</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.

Lab#5 style and selector

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Lab#5 style and selector

Semelhante a Lab#5 style and selector (20)

Mais de Yaowaluck Promdee

Mais de Yaowaluck Promdee (20)

Último

Último (20)

Lab#5 style and selector