Css Basics: For Customized Training Related To Javascript or
Css Basics: For Customized Training Related To Javascript or
CSS Basics
Slides © 2016 Marty Hall, hall@coreservlets.com
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Loading Stylesheets
and Applying Styles
Slides © 2016 Marty Hall, hall@coreservlets.com
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Overview
• Many JavaScript developers already know at least the basics of
Cascading Style Sheets (CSS)
– If you are one of them, skip this mini-tutorial entirely
• This covers barebones syntax basics only, is not advanced CSS, and covers only
syntax – it does not discuss CSS design strategies
• But some are new to Web development
– And jQuery is based in part on CSS, as we will see
• Far more details are available online
– Any of the online CSS tutorials give more details than this very brief introduction
8
Embedding Styles
• Embedding an internal style sheet
<head>
<style type="text/css">
p { color: blue; }
.note { font-weight: bold; background-color: red; }
</style>
…
</head>
10
Applying Styles to Specific Elements
• Styles that start with “.”
– Must be applied with “class” attribute
• Example CSS
.warning { color: red; font-weight: bold; font-size: 120% }
• Example HTML
<p class="warning"/>…</p>
<span class="warning">…</span>
11
CSS Selectors
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Big Idea
• Selectors are what designate the elements the styles apply to
p { color: red; background-color: yellow }
• All <p> elements have foreground red and background yellow
.indented { margin-left: 10px }
• <blah class="indented"> elements are indented 10 pixels on the left
table.colored td { color: blue }
• <td>’s within <table class="colored"> have blue foreground
13
#id Matches the element with given id. Matches 0 #blah {…} Matches element with
or 1 elements. <…id="blah">
.class Matches all elements with given CSS style. .important {…} Matches elements with
<… class="important">
element.class Matches all elements with given tag name that div.important {…} Matches elements like
have given class. <div class="important">
element#id Matches the element that has given tag name form#blah {…} Matches element with
and given id. Since ids must be unique, you <form id="blah">
can omit the element name and get same
result.
Hierarchical Selectors
Selector Meaning Examples
s1 s2 Elements that match selector s2 and are Matches all <span class="bar"> elements
directly or indirectly inside an element div.foo span.bar {…} that are somewhere inside <div
that matches selector s1. class="foo">.
s1 > s2 Elements that match selector s2 and are Matches all <span class="bar"> elements
directly inside an element that matches div.foo > span.bar {…} that are directly inside
s1. <div class="foo">.
s1, s2 Elements that match either selector. ul,ol,dl.foo {…} Matches all ul, ol, and
<dl class="foo"> elements.
s1 + s2 Elements that match s2 and are label + input {…} Matches all input elements that are
immediately after a sibling element immediately after a label element.
matching s1.
s1 ~ s2 Elements that match selector s2 and are label ~ input {…} Matches all input elements that have a label
somewhere after a sibling element element somewhere before them at the
matching s1. same nesting level.
Attribute Selectors
Selector Meaning Examples
s[att] Elements that match selector s and also div.blah a[name] {…} Matches all <a name="…">
contain attribute named att. elements that are inside <div
class="blah">
s[att=val] Elements that match selector s and also a[href=#sect2] {…} Matches all
contain attribute named att whose value is <a href="#sect2"> elements
(exactly) val.
s[att^=val] Elements that match selector s and also a[href^=#] {…} Matches all internal hyperlinks
contain attribute named att whose value
starts with val.
s[att$=val] Elements that match selector s and also a[href$=jquery.com] {...} Matches all hyperlinks pointing to
contain attribute named att whose value ends blah.jquery.com home page (not
with val. subpages)
s[att*=val] Elements that match selector s and also a[href*=jquery.com] {…} Matches all hyperlinks pointing to
contain attribute named att whose value any page at blah.jquery.com
contains val.
s[att!=val] Elements that match selector s and either do a[href!=#sect2] {…} Matches all hyperlinks except <a
not have the specified attribute, or have a href="#sect2"> elements
different value.
s:not([…]) Elements that match s but do not match a:not([href^=http]) {…} Matches hyperlinks that do not start
attribute specification. with http…
Positional Selectors
Selector Meaning Examples
s:first First or last match in page. ul.foo li:first {…} Matches first li element that is
s:last inside <ul class="foo">
s:eq(n) The nth match in the page. p:eq(3) {…} Fourth p element in page.
Count starts at 0.
s:gt(n), s:lt(n) Elements after/before the nth. p:gt(3) {…} 5th and following p elements.
s:even Elements that are even or odd tr:even {…} Finds all table rows, then matches
s:odd numbered elements in the page. 0- the even numbered ones from that
based, so first match is even. overall list.
s:first-child Elements that are the first or last child tr:first-child {…} Matches the first row of every table.
s:last-child of their parents, or that have no
s:only-child siblings.
s:nth-child(n) Elements that are the nth child. First tr:nth-child(3) {…} Matches the third row of each table
child is nth-child(1), not (0)
s:nth-child(even) Elements that are even or odd children tr:nth-child(even) {…} Matches rows that are even
s:nth-child(odd) of their parent. Count starts at 1, so numbered rows of their own table.
first match is odd.
s:nth-child(xn+y) Elements matching formula. You list tr:nth-child(4n+2) {…} Matches row 6, 10, 14, … of each
“n” literally. So, 3n means every third. table.
3n+1 means entry after every third.
Content Filtering Selectors
Selector Meaning Examples
s:contains(text) Elements that match s and whose .foo li:contains(wow) {…} Matches li elements that have
body content contains given text. “wow” in their body text and are
inside
<… class="foo">
s:parent Elements that have child elements. div:parent {…} Non-empty divs.
s1:has(s2) Elements that match s1 and have table:has(th) {…} All tables that have at least one th
directly or indirectly contain element inside.
elements that match s2.
CSS Properties:
Overview
Slides © 2016 Marty Hall, hall@coreservlets.com
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Big Idea
• Properties are what you use to style selected elements
p { color: red; background-color: yellow }
• All <p> elements have foreground red and background yellow
.indented { margin-left: 10px }
• <blah class="indented"> elements are indented 10 pixels on the left.
21
CSS Properties:
Colors and Fonts
Slides © 2016 Marty Hall, hall@coreservlets.com
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Colors
• color
– Foreground text color
• background-color
– Color of the background
• border-color
– Color of the border (see upcoming “box model” slides)
• Example
.colored {
color: red;
background-color: #00ff00;
border-color: black;
}
• Example usage: <p class="colored">…</p>
23
Color Units
• Official predefined color name
– aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red,
silver, teal, white, yellow
• X11 color names
– See http://www.html-color-names.com/color-chart.php
– Includes CornSilk, Salmon, PapayaWhip, etc.
• Universally supported for historical reasons (because the first browser was on OS that used X
Windows) but not official
• RGB spec
– #ff00ff
– rgb(255, 0, 255)
• Examples
.cool { color: red; background-color: #0000ff;
border-color: papayawhip}
24
Fonts
• font-size
{ font-size: 25px }
{ font-size: 125% }
• font-family
{ font-family: "Times New Roman", Times, serif; }
• font-style
{ font-style: italic }
• font-weight
{ font-weight: bold }
25
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Box Model: Idea
• Idea
– Block-level elements have four parts: margin, border, padding, and the main content
section
• Size units can be in colors or percentages
• Color units shown earlier
Box-Model: Properties
• Margin
– margin
– margin-left, margin-right, margin-top, margin-bottom
• Border
– border, border-color
– border-left, border-left-color, etc.
• Padding
– padding
– padding-left, padding-right, padding-top, padding-bottom
• Content
– width
– height
28
coreservlets.com – custom onsite training
A Few Examples
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Centered Headings
• Code
h1,h2,h3 {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
} <h2>First List</h2>
• Meaning
– <h1>, <h2>, and <h3> headings are centered and black.
– They use Verdana font if available, Arial as second choice, Helvetica as third
choice, and otherwise use the default non-serif font of the system
30
3D Titles
• Code
h1.title {
display: table; <h1 class="title">Two Lists</h1>
margin: auto;
background-color: #afc4d6;
border-width: 4px;
border-style: outset;
border-color: #9fd1ff;
padding: 5px 8px;
letter-spacing: -.025em;
}
• Meaning
– <h1 class="title">Text</h1> displayed as above
31
• Meaning
– The first <td> of each <tr> is R-aligned when inside <table class="formTable">
• The prompt is in the first <td>, the textfield in the second, and the error message (if
any) in the third.
32
coreservlets.com – custom onsite training
Wrapup
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Summary
• Load style sheets
<link href="css/styles.css" rel="stylesheet"/>
• Selectors
h1 {…}
• Applies to all h1 elements
.foo {…}
• Applies to <tag class="foo">
div table.bar td {…}
• Applies to tds inside <table class="bar"> that are inside divs
34
coreservlets.com – custom onsite training
For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.