Scribd
Upload
50 views

Css Basics: For Customized Training Related To Javascript or

CSS Basics

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

Css Basics: For Customized Training Related To Javascript or

CSS Basics

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

coreservlets.

com – custom onsite training

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.

coreservlets.com – custom onsite training

For customized training related to JavaScript or


Java, email hall@coreservlets.com
Marty is also available for consulting and development support

Taught by lead author of Core Servlets & JSP,


co-author of Core JSF (4th Ed), and this tutorial.

Available at public venues, or


custom versions can be held on-site at your organization.
• Courses developed and taught by Marty Hall
– JavaScript, jQuery, Ext JS, JSF 2.3, PrimeFaces, Java 8 programming,
Spring Framework, Spring MVC, Android, GWT, custom mix of topics
– Courses available in any state or country.
– Maryland/DC companies can also choose afternoon/evening courses.
• Courses developed
Slides and
© 2016 Marty taught
Hall, by coreservlets.com experts (edited by Marty)
hall@coreservlets.com
– Hadoop, Hibernate/JPA, HTML5, RESTful Web Services

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial


Contact hall@coreservlets.com forsection
detailscontains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
Topics in This Section
• Loading and using style sheets
• CSS selectors
• CSS properties
• Examples

coreservlets.com – custom onsite training

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

Loading an External Style Sheet


• Loading the style sheet
<head>
<link href="css/styles.css"
rel="stylesheet" type="text/css"/>
…
</head>

• Locating the style sheet


– The CSS file goes in normal directory, in location referred to by relative URL above
• For example, in the above example, the style sheet styles.css is in the “css” subfolder
of the current directory

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>

• Listing CSS styles inline


<h1 style="color: red; background-color: blue">…</h1>

Applying Styles to General Elements


• Styles that apply to elements
– Apply automatically
• Example CSS
h2 { color: blue; font-family: sans-serif }
• All <h2> elements automatically in blue non-serif font
• Example HTML
<h2>Hello</h2>

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>

• Separate multiple classes with spaces


<h2 class="class1 class2 class3">…</h2>

11

coreservlets.com – custom onsite training

CSS Selectors

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

• Only some of the selectors are shown here


– For complete list, with examples, see
http://www.w3.org/TR/css3-selectors/

13

CSS Selectors: Quick Examples


#some-id {
Styles that apply to <h1 id="some-id">
}
p{
Styles that apply to <p>
}
.note {
Styles that apply to <div class="note">
}
p span {
Styles that apply to <p>…<span>…</span>…</p>
}
h1, h2, td li {
Styles that apply to <h1> and also to <h2> and also to <td>…<li>…</li>…</td>
}
14
Basic Selectors
Selector Meaning Examples
element Matches all elements with given tag name. li {…} Matches all li elements
Could be many matches. p {…} Matches all p elements

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

* Matches all elements in entire page. * {…} Matches all elements.


Particularly useful for nesting and with the
:not selector. div * {…} Matches all elements that are
inside divs

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:empty Elements that have no child div:empty {…} Empty divs.


elements. Body content counts as a
child element (text node).

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.

coreservlets.com – custom onsite training

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.

• Only a few properties are shown here


– For complete list, with examples, see
http://www.w3.org/TR/CSS21/propidx.html

21

coreservlets.com – custom onsite training

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

coreservlets.com – custom onsite training

CSS Properties: Box


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

27 Image from http://www.w3schools.com/css/css_boxmodel.asp

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

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.

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

Aligned Textfields and R-Aligned Prompts


• Code
.formTable {
display: table;
}
.formTable td:first-child {
text-align: right;
}

• 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

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.

Summary
• Load style sheets
<link href="css/styles.css" rel="stylesheet"/>

• Apply styles (that start with “.” in the CSS file)


<tag class="name">

• 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

Questions? More info:


http://www.coreservlets.com/javascript-jquery-tutorial/ -- Tutorial on JavaScript, jQuery, and jQuery UI
http://courses.coreservlets.com/Course-Materials/java.html – General Java programming tutorial
http://www.coreservlets.com/java-8-tutorial/ – Java 8 tutorial
http://courses.coreservlets.com/java-training.html – Customized Java training courses, at public venues or onsite at your organization
http://coreservlets.com/ – JSF 2, PrimeFaces, Java 8, JavaScript, jQuery, Ext JS, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training
Many additional free tutorials at coreservlets.com (JSF, Android, Ajax, Hadoop, and lots more)

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.

You might also like