1. 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
2. Index
• CSS Basic
• CSS Syntax
• How to use Style Sheet
• Selectors
• Assignment
HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 2
ASSIGNMENT
3. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
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
(C) Web Design Technology 2015 3
CSS BASIC > WHAT IS CSS
ASSIGNMENT
4. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
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 */
(C) Web Design Technology 2015 4
CSS BASIC > CSS IS A
ASSIGNMENT
5. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 5
selector { property:value }
selector { property1:value1; property2:value2 }
h1 { color:red; font-size:12px; }
Selector Declaration
Property PropertyValue Value
ASSIGNMENT
6. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 6
Three Ways to Insert CSS
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet
How to inserting a style sheet
ASSIGNMENT
7. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 7
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
8. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 8
2. Internal Style sheet
HOW TO > 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
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
ASSIGNMENT
9. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 9
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
10. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 10
CSS Selector
SELECTOR > CSS SELECTOR
Element Selector ID Selector Class Selector
ASSIGNMENT
11. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 11
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
12. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 12
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
13. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 13
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
14. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 14
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.
15. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR
WDS
CS KKU
(C) Web Design Technology 2015 15
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!
16. HOME INDEX CSS BASIC CSS SYNTAX HOW TO SELECTOR ASSIGNMENT
WDS
CS KKU
(C) Web Design Technology 2015 16
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.