SlideShare a Scribd company logo
Style CSS and Selector Part2
By Yaowaluck Promdee, Sumonta Kasemvilas
322432 Web Design Technology
Computer Science Khon Kaen University
WDS
CS KKU
(C) Web Design Technology 2015 1
(C) Web Design Technology 2015 2
Index
•  Selectors
•  Example
•  Assignment
WDS
CS KKU
(C) Web Design Technology 2015 3
CSS Selectors
WDS
CS KKU
Part1 learned the base id, class, and descendant selectors
§  The star Symbol (*)
§  #X
§  .X
§  X Y
§  X
§  X:visited and X:link
§  X + Y
§  X > Y
§  X ~ Y
§  X[title]
§  X[href=“foo”]
§  X[href*=“nettusts”]
§  X[href^=“http”]
§  X[href$=“jpg”]
§  X[data-*=“foo”]
§  X[foo~=“bar”]
Selectors
(C) Web Design Technology 2015 4
CSS Selectors
WDS
CS KKU
Part1 learned the base id, class, and descendant selectors
§  X:nth-last-of-type(n)
§  X:first-child
§  X:last-child
§  X:only-child
§  X:only-of-type
§  X:first-of-type
§  X:checked
§  X:after
§  X:hover
§  X:not(selector)
§  X::pseudoElement
§  X:nth-child(n)
§  X:nth-last-child(n)
§  X:nth-of
Selectors
(C) Web Design Technology 2015 5
WDS
CS KKU 1. * Star symbol or :root
The star symbol will target every single element on the page.
*{ margin: 0; padding: 0; }
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
The * can also be used with child selectors.
#wrapper * {
border: 1px solid black;
}
This will target every single element that is a child of the #wrapper div.
(C) Web Design Technology 2015 6
WDS
CS KKU
Example1
* { border: 2px dotted red; } /*CSS Style sheet */
//HTML
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li> List Item 3</li>
<li> List Item 4</li>
</ul>
OUTPUT
1. * Star symbol (Cont.)
(C) Web Design Technology 2015 7
WDS
CS KKU 2. #X ID Selector
#wrapper {
background: #BBF581;
/* light green color */
width: 500px; }
<div id=“wrapper">
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li> List Item 3</li>
<li> List Item 4</li>
</ul></div>
CSS HTML
Output
(C) Web Design Technology 2015 8
WDS
CS KKU 3. .X Class Selector
.center {
text-align: center;
color: red; }
The class selector selects elements with a specific class attribute.
p.center { color:blue; }
<h1 class="center”>Heading</h1>
<p class="center"> Paragraph</p>
.p { color:green; }
Heading
Paragraph
Heading
Paragraph
Heading
Paragraph
What’s the result?
(C) Web Design Technology 2015 9
WDS
CS KKU 4. X Y descendent selector
the descendant selector when you need to be more specific with your selectors
header p {
text-decoration: underline;
}
h1 { color:green; }
<header>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</header>
Hello World!
This is a paragraph.
Hello World!
This is a paragraph.
Hello World!
This is a paragraph.
What’s the result?
(C) Web Design Technology 2015 10
WDS
CS KKU 5. Element Selector
body { background-color:#F8E0F7; }
header { background-image:url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
height:350px;
}
footer { background-color: lightblue; }
<header>
<h1>My CSS web page!</h1>
</header>
<p>Hello world! </p>
<footer> web design</footer>
(C) Web Design Technology 2015 11
WDS
CS KKU 6. X:visited and X:link pseudo-class
/* selected link */
a:active {
color: yellow;
}
/* unvisited link */
a:link {
color: blue;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
<p>Mouse over and click the link: to Google
<a href="http://www.google.com">Google</a></p>
Tip: The :active selector can be used on all elements, not only links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to
style links to visited pages, and the :hover selector to style links when you mouse
over them.
(C) Web Design Technology 2015 12
WDS
CS KKU 7. X+Y (An adjacent selector)
article + p {
background-color: yellow;
}
<h1>Welcome to My Homepage</h1>
<article>
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</article>
<p>sentence 1</p>
<p>setence 2</p>
What’s the result?
(C) Web Design Technology 2015 13
WDS
CS KKU 8. X>Y Selector
div > ul { border: 1px solid black; }
div > footer { background-color:lightblue; }
/* The difference between the standard X
Y and X > Y is that the latter will only
select direct children. */
<h1>Welcome to My Homepage</h1>
<div>
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
</ul>
<span><p>SPAN TEST</p></span>
<footer>web design technology </footer>
</div>
(C) Web Design Technology 2015 14
WDS
CS KKU 9. X~Y Selector
CSS3 element1~element2 Selector
p ~ ul {
background: #ff0000;
}
<p>The first paragraph.</p>
<ul>
<li>Menu1</li> <li>Menu2</li>
</ul>
<h2>Heading2</h2>
<ul>
<li>Menu1</li> <li>Menu2</li>
</ul>
The result
(C) Web Design Technology 2015 15
WDS
CS KKU 10. X[title]
a[title] {
color: green;
}
<p>
Paragraph Link to somewhere <a href="#"
title="Some title">Link1</a> test a[title] selector
</p>
<p> Paragraph Link to somewhere
<a href="#">Link2</a> test a[title] selector
</p>
Paragraph Link to
somewhere Link1 test a[title]
selector
Paragraph Link to
somewhere Link2 test a[title]
selector
Result:
(C) Web Design Technology 2015 16
WDS
CS KKU 11. X::pseudo Element Selector
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
pseudo elements (designated by ::) to
style fragments of an element, such as
the first line, or the first letter. Keep in
mind that these must be applied to
block level elements in order to take
effect.
Target the First Letter of a Paragraph
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
color: #8A2BE2;
}
(C) Web Design Technology 2015 17
WDS
CS KKU 12. X:first-of-type Selector
The first-of-type pseudo class allows you to select the first
siblings of its type.
p:first-of-type {
background: #ff0000;
}
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
(C) Web Design Technology 2015 18
WDS
CS KKU 13. X:last-child Selector
The :last-child selector matches every element that is the last child of its parent.
p:last-child {
background: #ff0000;
}
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
Reference:
[1] http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
[2]http://www.w3schools.com/cssref/css_selectors.asp
(C) Web Design Technology 2015 19
WDS
CS KKU
Example > try it!
Following the result how to write HTML and CSS
*when mouse hover on link
(C) Web Design Technology 2015 20
WDS
CS KKU
Assignment#5 Selector 2
Create 2 Webpages from topic
“A few thing that kill your website” using CSS,
HTML5 and external style sheet. You must to have a
navigation (menu) and a link on your webpages.
You must comment your own CSS code.
Grade will be based on your CSS technique and look
and feel of the Web page.
Reference: http://www.swcreatives.com/swc-blog/what_makes_a_good_and_bad_website

More Related Content

PPTX
Overview HTML, HTML5 and Validations
PDF
Style and Selector
PDF
CSS Font & Text style
PDF
Tables and forms with HTML, CSS
PDF
Lab#5 style and selector
PDF
CSS3 Introduction
PPTX
Html - By Auroskkil
Overview HTML, HTML5 and Validations
Style and Selector
CSS Font & Text style
Tables and forms with HTML, CSS
Lab#5 style and selector
CSS3 Introduction
Html - By Auroskkil

What's hot (20)

PPT
Chapter 4a cascade style sheet css
PDF
HTML/CSS Crash Course (april 4 2017)
PDF
Web Design Course: CSS lecture 4
PDF
Web Design Course: CSS lecture 1
PDF
Web Design Course: CSS lecture 5
PPT
Introduction to css by programmerblog.net
PPT
HTML 5 Complete Reference
PPT
How Cascading Style Sheets (CSS) Works
PPT
1. introduction to html5
PPTX
David Weliver
PDF
Web Design Course: CSS lecture 3
PDF
Web Design Course: CSS lecture 2
PPTX
HTML, CSS And JAVASCRIPT!
PPTX
PDF
Fundamental CSS3
PPTX
Introduction to CSS
PDF
CSS-3 Course Slide
DOC
Css introduction
PPT
Cascading Style Sheet
PPSX
Introduction to Html5
Chapter 4a cascade style sheet css
HTML/CSS Crash Course (april 4 2017)
Web Design Course: CSS lecture 4
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 5
Introduction to css by programmerblog.net
HTML 5 Complete Reference
How Cascading Style Sheets (CSS) Works
1. introduction to html5
David Weliver
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 2
HTML, CSS And JAVASCRIPT!
Fundamental CSS3
Introduction to CSS
CSS-3 Course Slide
Css introduction
Cascading Style Sheet
Introduction to Html5
Ad

Viewers also liked (7)

PPTX
Web Interface
PDF
Game design
PDF
Navigation and Link
PPTX
Bootstrap Framework
PPTX
Observation and interviewing
PPTX
Odoo Features | Opensource ERP | Odoo Ecommerce
PPTX
Odoo introduction
Web Interface
Game design
Navigation and Link
Bootstrap Framework
Observation and interviewing
Odoo Features | Opensource ERP | Odoo Ecommerce
Odoo introduction
Ad

Similar to Style and Selector Part2 (20)

PPTX
Hypertext markup language(html)
PPTX
Razor into the Razor'verse
ODP
An Introduction to Cascading Style Sheets (CSS3)
PDF
CSS Selectors
PPTX
SharePointfest Denver - A jQuery Primer for SharePoint
PDF
Lab#2 overview of html
PDF
VMWorld 2017 Hackathon training: Getting Started with Clarity
PDF
Style Your Site Part 1
PPT
J query b_dotnet_ug_meet_12_may_2012
PDF
HTML5 Essentials
PPTX
FrontendwebsitehtmljavacssInternship.pptx
PDF
The Future State of Layout
PPTX
Introduction to HTML+CSS+Javascript.pptx
PDF
Introduction to html & css
PDF
Frameworkless Web Development in Clojure
PDF
Fecc cg-cb-11.14.17
PDF
CSS- Smacss Design Rule
PPT
Css week11 2019 2020 for g10 by eng.osama ghandour
PPSX
DIWE - Coding HTML for Basic Web Designing
PDF
當ZK遇見Front-End
Hypertext markup language(html)
Razor into the Razor'verse
An Introduction to Cascading Style Sheets (CSS3)
CSS Selectors
SharePointfest Denver - A jQuery Primer for SharePoint
Lab#2 overview of html
VMWorld 2017 Hackathon training: Getting Started with Clarity
Style Your Site Part 1
J query b_dotnet_ug_meet_12_may_2012
HTML5 Essentials
FrontendwebsitehtmljavacssInternship.pptx
The Future State of Layout
Introduction to HTML+CSS+Javascript.pptx
Introduction to html & css
Frameworkless Web Development in Clojure
Fecc cg-cb-11.14.17
CSS- Smacss Design Rule
Css week11 2019 2020 for g10 by eng.osama ghandour
DIWE - Coding HTML for Basic Web Designing
當ZK遇見Front-End

More from Yaowaluck Promdee (20)

PDF
A basic of UX for beginner
PDF
PDF
Portfolio design
PDF
Concept to creation story and storyboard
PPTX
Requirement gathering-and-lean-canvas
PDF
Good bad design
PDF
Graphic, Color and tools
PPTX
Page layouts flexible and fixed layout with CSS
PDF
CSS Boc model
PPTX
Design sitemap
PPTX
Good/Bad Web Design
PPTX
Powerpoint
PDF
Program Interface
PDF
Mobile Interface
PDF
Personas and scenario
PPTX
Ux design process
PDF
Graphic Design
PDF
Lab#2 illustrator
PDF
Good/Bad Design
PPTX
Content management system
A basic of UX for beginner
Portfolio design
Concept to creation story and storyboard
Requirement gathering-and-lean-canvas
Good bad design
Graphic, Color and tools
Page layouts flexible and fixed layout with CSS
CSS Boc model
Design sitemap
Good/Bad Web Design
Powerpoint
Program Interface
Mobile Interface
Personas and scenario
Ux design process
Graphic Design
Lab#2 illustrator
Good/Bad Design
Content management system

Recently uploaded (20)

PPTX
A powerpoint presentation on the Revised K-10 Science Shaping Paper
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
احياء السادس العلمي - الفصل الثالث (التكاثر) منهج متميزين/كلية بغداد/موهوبين
PDF
Hazard Identification & Risk Assessment .pdf
PPTX
Lesson notes of climatology university.
PDF
What if we spent less time fighting change, and more time building what’s rig...
PDF
Complications of Minimal Access Surgery at WLH
PPTX
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
PPTX
Digestion and Absorption of Carbohydrates, Proteina and Fats
PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Practical Manual AGRO-233 Principles and Practices of Natural Farming
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PDF
Weekly quiz Compilation Jan -July 25.pdf
PPTX
History, Philosophy and sociology of education (1).pptx
PDF
Trump Administration's workforce development strategy
PDF
Paper A Mock Exam 9_ Attempt review.pdf.
PDF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
PPTX
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
PPTX
UV-Visible spectroscopy..pptx UV-Visible Spectroscopy – Electronic Transition...
A powerpoint presentation on the Revised K-10 Science Shaping Paper
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
احياء السادس العلمي - الفصل الثالث (التكاثر) منهج متميزين/كلية بغداد/موهوبين
Hazard Identification & Risk Assessment .pdf
Lesson notes of climatology university.
What if we spent less time fighting change, and more time building what’s rig...
Complications of Minimal Access Surgery at WLH
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
Digestion and Absorption of Carbohydrates, Proteina and Fats
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
Supply Chain Operations Speaking Notes -ICLT Program
Practical Manual AGRO-233 Principles and Practices of Natural Farming
202450812 BayCHI UCSC-SV 20250812 v17.pptx
Weekly quiz Compilation Jan -July 25.pdf
History, Philosophy and sociology of education (1).pptx
Trump Administration's workforce development strategy
Paper A Mock Exam 9_ Attempt review.pdf.
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
CHAPTER IV. MAN AND BIOSPHERE AND ITS TOTALITY.pptx
UV-Visible spectroscopy..pptx UV-Visible Spectroscopy – Electronic Transition...

Style and Selector Part2

  • 1. Style CSS and Selector Part2 By Yaowaluck Promdee, Sumonta Kasemvilas 322432 Web Design Technology Computer Science Khon Kaen University WDS CS KKU (C) Web Design Technology 2015 1
  • 2. (C) Web Design Technology 2015 2 Index •  Selectors •  Example •  Assignment WDS CS KKU
  • 3. (C) Web Design Technology 2015 3 CSS Selectors WDS CS KKU Part1 learned the base id, class, and descendant selectors §  The star Symbol (*) §  #X §  .X §  X Y §  X §  X:visited and X:link §  X + Y §  X > Y §  X ~ Y §  X[title] §  X[href=“foo”] §  X[href*=“nettusts”] §  X[href^=“http”] §  X[href$=“jpg”] §  X[data-*=“foo”] §  X[foo~=“bar”] Selectors
  • 4. (C) Web Design Technology 2015 4 CSS Selectors WDS CS KKU Part1 learned the base id, class, and descendant selectors §  X:nth-last-of-type(n) §  X:first-child §  X:last-child §  X:only-child §  X:only-of-type §  X:first-of-type §  X:checked §  X:after §  X:hover §  X:not(selector) §  X::pseudoElement §  X:nth-child(n) §  X:nth-last-child(n) §  X:nth-of Selectors
  • 5. (C) Web Design Technology 2015 5 WDS CS KKU 1. * Star symbol or :root The star symbol will target every single element on the page. *{ margin: 0; padding: 0; } Compatibility IE6+ Firefox Chrome Safari Opera The * can also be used with child selectors. #wrapper * { border: 1px solid black; } This will target every single element that is a child of the #wrapper div.
  • 6. (C) Web Design Technology 2015 6 WDS CS KKU Example1 * { border: 2px dotted red; } /*CSS Style sheet */ //HTML <p> My paragraph here. </p> <ul> <li> List Item 1</li> <li> List Item 2</li> </ul> <ul> <li> List Item 3</li> <li> List Item 4</li> </ul> OUTPUT 1. * Star symbol (Cont.)
  • 7. (C) Web Design Technology 2015 7 WDS CS KKU 2. #X ID Selector #wrapper { background: #BBF581; /* light green color */ width: 500px; } <div id=“wrapper"> <p> My paragraph here. </p> <ul> <li> List Item 1</li> <li> List Item 2</li> </ul> <ul> <li> List Item 3</li> <li> List Item 4</li> </ul></div> CSS HTML Output
  • 8. (C) Web Design Technology 2015 8 WDS CS KKU 3. .X Class Selector .center { text-align: center; color: red; } The class selector selects elements with a specific class attribute. p.center { color:blue; } <h1 class="center”>Heading</h1> <p class="center"> Paragraph</p> .p { color:green; } Heading Paragraph Heading Paragraph Heading Paragraph What’s the result?
  • 9. (C) Web Design Technology 2015 9 WDS CS KKU 4. X Y descendent selector the descendant selector when you need to be more specific with your selectors header p { text-decoration: underline; } h1 { color:green; } <header> <h1>Hello World!</h1> <p>This is a paragraph.</p> </header> Hello World! This is a paragraph. Hello World! This is a paragraph. Hello World! This is a paragraph. What’s the result?
  • 10. (C) Web Design Technology 2015 10 WDS CS KKU 5. Element Selector body { background-color:#F8E0F7; } header { background-image:url("img_tree.png"); background-repeat: no-repeat; background-position: right top; height:350px; } footer { background-color: lightblue; } <header> <h1>My CSS web page!</h1> </header> <p>Hello world! </p> <footer> web design</footer>
  • 11. (C) Web Design Technology 2015 11 WDS CS KKU 6. X:visited and X:link pseudo-class /* selected link */ a:active { color: yellow; } /* unvisited link */ a:link { color: blue; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: red; } <p>Mouse over and click the link: to Google <a href="http://www.google.com">Google</a></p> Tip: The :active selector can be used on all elements, not only links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
  • 12. (C) Web Design Technology 2015 12 WDS CS KKU 7. X+Y (An adjacent selector) article + p { background-color: yellow; } <h1>Welcome to My Homepage</h1> <article> <h2>This is a heading</h2> <p>This is a paragraph</p> </article> <p>sentence 1</p> <p>setence 2</p> What’s the result?
  • 13. (C) Web Design Technology 2015 13 WDS CS KKU 8. X>Y Selector div > ul { border: 1px solid black; } div > footer { background-color:lightblue; } /* The difference between the standard X Y and X > Y is that the latter will only select direct children. */ <h1>Welcome to My Homepage</h1> <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> </ul> <span><p>SPAN TEST</p></span> <footer>web design technology </footer> </div>
  • 14. (C) Web Design Technology 2015 14 WDS CS KKU 9. X~Y Selector CSS3 element1~element2 Selector p ~ ul { background: #ff0000; } <p>The first paragraph.</p> <ul> <li>Menu1</li> <li>Menu2</li> </ul> <h2>Heading2</h2> <ul> <li>Menu1</li> <li>Menu2</li> </ul> The result
  • 15. (C) Web Design Technology 2015 15 WDS CS KKU 10. X[title] a[title] { color: green; } <p> Paragraph Link to somewhere <a href="#" title="Some title">Link1</a> test a[title] selector </p> <p> Paragraph Link to somewhere <a href="#">Link2</a> test a[title] selector </p> Paragraph Link to somewhere Link1 test a[title] selector Paragraph Link to somewhere Link2 test a[title] selector Result:
  • 16. (C) Web Design Technology 2015 16 WDS CS KKU 11. X::pseudo Element Selector p::first-line { font-weight: bold; font-size: 1.2em; } pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect. Target the First Letter of a Paragraph p::first-letter { float: left; font-size: 2em; font-weight: bold; color: #8A2BE2; }
  • 17. (C) Web Design Technology 2015 17 WDS CS KKU 12. X:first-of-type Selector The first-of-type pseudo class allows you to select the first siblings of its type. p:first-of-type { background: #ff0000; } <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p>
  • 18. (C) Web Design Technology 2015 18 WDS CS KKU 13. X:last-child Selector The :last-child selector matches every element that is the last child of its parent. p:last-child { background: #ff0000; } <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> Reference: [1] http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 [2]http://www.w3schools.com/cssref/css_selectors.asp
  • 19. (C) Web Design Technology 2015 19 WDS CS KKU Example > try it! Following the result how to write HTML and CSS *when mouse hover on link
  • 20. (C) Web Design Technology 2015 20 WDS CS KKU Assignment#5 Selector 2 Create 2 Webpages from topic “A few thing that kill your website” using CSS, HTML5 and external style sheet. You must to have a navigation (menu) and a link on your webpages. You must comment your own CSS code. Grade will be based on your CSS technique and look and feel of the Web page. Reference: http://www.swcreatives.com/swc-blog/what_makes_a_good_and_bad_website