Style and Selector

Style CSS and Selector
By Yaowaluck Promdee, Sumonta Kasemvilas
322432 Web Design Technology
Computer Science Khon Kaen University
HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR ASSIGNMENT
WDS
CS KKU
(C) Web Design Technology 2015 1

Index
•  CSS Basic
•  CSS Syntax
•  How to use Style Sheet
•  Selectors
•  Assignment
HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
ASSIGNMENT

WDS
CS KKU
What is CSS?
Single Source of HTML
Web Browser
Other Media
Print Output
Server
Clients
Formatting data for multiple destination
Cascading Style Sheets (CSS) is a style
sheet language used for describing
the look and formatting of a document
written in a markup language.
CSS Style Sheet
CSS BASIC > WHAT IS CSS
ASSIGNMENT

WDS
CS KKU
http://ryanstutorials.net/css-tutorial/img/css_flexibility.png
CSS is
a language for describing the look and formatting of
content.
The selector identifies which parts of the content the
rules should apply to. The rules that are inside the
opening and closing curly brackets ( { } ) are applied
to any items matching the selector.
selector {
property: value;
property: value; }
/* This is comments */
CSS BASIC > CSS IS A
ASSIGNMENT

WDS
CS KKU
selector { property:value }
selector { property1:value1; property2:value2 }
h1 { color:red; font-size:12px; }
Selector Declaration
Property PropertyValue Value
ASSIGNMENT

WDS
CS KKU
Three Ways to Insert CSS
1.  Inline Style
2. Internal Style Sheet
3. External Style Sheet
How to inserting a style sheet
ASSIGNMENT

WDS
CS KKU
1. Inline Style
HOW TO > INLINE STYLE
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
An inline style may be used to
apply a unique style for a single
element.
An inline style loses many of the
advantages of a style sheet (by
mixing content with presentation).
Use this method sparingly
<Tag style="property:value;">
ASSIGNMENT

WDS
CS KKU
2. Internal Style sheet
HOW TO > 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
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
ASSIGNMENT

WDS
CS KKU
3. External Style sheet
HOW TO > EXTERNAL STYLE SHEET
<link rel="stylesheet" type="text/css" href="URL file.css">
<!DOCTYPE html><html> <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body> </body> </html>
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:
ASSIGNMENT

WDS
CS KKU
CSS Selector
SELECTOR > CSS SELECTOR
Element Selector ID Selector Class Selector
ASSIGNMENT

WDS
CS KKU
SELECTOR > CSS SELECTOR > ELEMENT SELECTOR
The element selector selects elements based on the element name.
1. Element Selector
p {
text-align: center;
color: red;
}
<p>Example1</p>
<h1>Example2</h1>
<p>Example3</p>
Result
---------------------------------------
Example1
Example2
Example3
ASSIGNMENT

WDS
CS KKU
SELECTOR > CSS SELECTOR > ID SELECTOR
2. ID Selector
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.
#paragraph {
text-align: center;
color: red;
}
<p id="paragraph">Hello World!</p>
<p>This paragraph is not affected by the
style.</p>
ASSIGNMENT

WDS
CS KKU
SELECTOR > CSS SELECTOR > CLASS SELECTOR
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:
ASSIGNMENT

WDS
CS KKU
ASSIGNMENT
Example 2
SELECTOR > CSS SELECTOR > CLASS SELECTOR > EXAMPLE
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
How to write CSS?
Answer:
Try it!
Change the color of all <p> and <h1> elements, to “blue”, and h1 is bold font.
Group the selectors to minimize code.

WDS
CS KKU
ASSIGNMENT
Example Selector Class attribute
SELECTOR > CSS SELECTOR > CLASS SELECTOR > EXAMPLE
p.center {
text-align: center;
color: red;
font-weight:bold;
}
<h1 class="center">This heading </h1>
<p class="center">This paragraph will be red
and center-aligned.</p>
Try it!

HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR ASSIGNMENT
WDS
CS KKU
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.

Style and Selector

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Style and Selector

Similar to Style and Selector (20)

More from Yaowaluck Promdee

More from Yaowaluck Promdee (17)

Recently uploaded

Recently uploaded (20)

Style and Selector