Scribd
Upload
44 views

Css For JSF Developers: A Very Quick Overview: For Live Training On JSF 2, Primefaces, or Other

css

Uploaded by

Angel Abraham Saldaña
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
44 views

Css For JSF Developers: A Very Quick Overview: For Live Training On JSF 2, Primefaces, or Other

css

Uploaded by

Angel Abraham Saldaña
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/ 16

© 2015 Marty Hall

CSS for JSF Developers:


A Very Quick Overview
Originals of slides and source code for examples: http://www.coreservlets.com/JSF-Tutorial/jsf2/
Also see the PrimeFaces tutorial – http://www.coreservlets.com/JSF-Tutorial/primefaces/
and customized JSF2 and PrimeFaces training courses – http://courses.coreservlets.com/jsf-training.html

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

© 2015 Marty Hall

For live training on JSF 2, PrimeFaces, or other


Java EE topics, email hall@coreservlets.com
Marty is also available for consulting and development support
Taught by the author of Core Servlets and JSP, this tutorial,
and JSF 2.2 version of Core JSF. Available at public venues, or
customized versions can be held on-site at your organization.
• Courses developed and taught by Marty Hall
– JSF 2, PrimeFaces, Ajax, jQuery, Spring MVC, JSP, Android, general Java, Java 8 lambdas/streams, GWT, custom topic mix
Customized
– Courses available Java
in any location EE Training:
worldwide. http://courses.coreservlets.com/
Maryland/DC area companies can also choose afternoon/evening courses.
• Courses
Java 7, Java developed and taught Android,
8, JSF 2, PrimeFaces, by coreservlets.com expertsSpring
JSP, Ajax, jQuery, (editedMVC,
by Marty)
RESTful Web Services, GWT, Hadoop.
– Hadoop, Spring, Hibernate/JPA, RESTful Web Services
Developed and taught by well-known
Contactauthor and developer. At for
hall@coreservlets.com public venues or onsite at your location.
details
Overview
• Most JSF developers already know at least
the basics of 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
– I have been asked by several JSF students to give some
introductory material on HTML (earlier section) and CSS
(this section)
• Far more details are available online
– Any of the online CSS tutorials give more details than
this ultra-brief introduction
4

Topics in This Section


• Loading and using style sheets
– Standard HTML
– JSF-specific
• CSS selectors
– Applying styles in standard HTML elements
– Applying styles in JSF elements
• CSS properties
• Examples
• References

5
© 2015 Marty Hall

Loading and Using


Style Sheets

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

Loading an External Style


Sheet: Standard HTML
• Loading the style sheet
<head>
<link href="css/styles.css"
rel="stylesheet" type="text/css"/>
The type attribute is officially

… optional in HTML 5. In other


HTML versions, although it is
ignored by browsers, it should be
included for HTML validators.
</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.

7
Loading an External Style
Sheet: JSF-Specific Approach
• Loading the style sheet
<h:head>
<h:outputStylesheet name="styles.css" library="css"/>
…
</h:head>
• Locating the style sheet
– The CSS file goes in the folder referred to by “library”,
relative to the “resources” folder.
• For example, in above example, styles.css is in
…/resources/css/ (WebContent/resources/css/ in Eclipse)
• Motivation
– So that you can refer to style sheets when writing a page or a
piece of a page when you do not know the URL
• Examples and details of this approach are covered in tutorial
8 sections on JSF page templating and on composite components

Embedding Styles
(HTML and JSF)
• Embedding an internal style sheet
<head>
<head> for vanilla HTML pages, <h:head> for JSF pages.

<style type="text/css"> Again, the type can be omitted in HTML5

p { color: blue; }
.note { font-weight: bold; background-color: red; }
</style>
…
</head>

• Listing CSS styles inline


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

9
Using Styles from Style Sheets
• Styles that apply to elements
– Apply automatically
• h2 { color: blue; font-family: sans-serif }
– All <h2> elements automatically in blue non-serif font
• Styles that start with “.”
– Must be applied with “class” (HTML) or “styleClass”
(JSF) attributes
• .warning { color: red; font-weight: bold; font-size: 120% }
– Standard HTML elements
• <p class="warning"/>…</p>
• <span class="warning">…</span>
– JSF elements
• <h:message styleClass="warning" …/>
10 • <h:outputText styleClass="warning"…/>

© 2015 Marty Hall

CSS Selectors

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Big Idea
• Selectors are what designate which
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. For JSF elements, you would use
<h:blahTag styleClass="indented">
– 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
12
http://www.w3.org/TR/css3-selectors/

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>
}
13
Basic Selectors
Selector Meaning Examples
element Matches all elements with given tag li {…} Matches all li elements
name. Could be many matches. p {…} Matches all p elements
#id Matches the element with given id. #blah {…} Matches element with
Matches 0 or 1 elements. <…id="blah">
.class Matches all elements with given .important {…} Matches elements with
CSS style. <… class="important">
element.class Matches all elements with given tag div.important {…} Matches elements like
name that have given class. <div class="important">
element#id Matches the element that has given form#blah {…} Matches element with
tag name and given id. Since ids <form id="blah">
must be unique, you 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

14

Hierarchical Selectors
Selector Meaning Examples
s1 s2 Elements that match selector Matches all <span class="bar">
s2 and are directly or div.foo span.bar {…} elements that are somewhere
indirectly inside an element inside <div class="foo">.
that matches selector s1.

s1 > s2 Elements that match selector Matches all <span class="bar">


s2 and are directly inside an div.foo > span.bar {…} elements that are directly inside
element that matches s1. <div class="foo">.

s1, s2 Elements that match either ul,ol,dl.foo {…} Matches all ul, ol, and
selector. <dl class="foo"> elements.
s1 + s2 Elements that match s2 and label + input {…} Matches all input elements that
are immediately after a are immediately after a label
sibling element matching s1. element.

s1 ~ s2 Elements that match selector label ~ input {…} Matches all input elements that
s2 and are somewhere after a have a label element
sibling element matching s1. somewhere before them at the
same nesting level.

15
Attribute Selectors
Selector Meaning Examples
s[att] Elements that match selector s and div.blah a[name] {…} Matches all <a name="…">
also contain attribute named att. elements that are inside
<div class="blah">

s[att=val] Elements that match selector s and a[href=#sect2] {…} Matches all
also contain attribute named att <a href="#sect2"> elements
whose value is (exactly) val.

s[att^=val] Elements that match selector s and a[href^=#] {…} Matches all internal
also contain attribute named att hyperlinks
whose value starts with val.

s[att$=val] Elements that match selector s and a[href$=jquery.com] {...} Matches all hyperlinks
also contain attribute named att pointing to blah.jquery.com
whose value ends with val. home page (not subpages)

s[att*=val] Elements that match selector s and a[href*=jquery.com] {…} Matches all hyperlinks
also contain attribute named att pointing to any page at
whose value contains val. blah.jquery.com

s[att!=val] Elements that match selector s and a[href!=#sect2] {…} Matches all hyperlinks
either do not have the specified except <a href="#sect2">
attribute, or have a different value. elements

s:not([…]) Elements that match s but do not a:not([href^=http]) {…} Matches hyperlinks that do
match attribute specification. not start with http…
16

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
s:odd numbered elements in the page. matches the even numbered
0-based, so first match is even. ones from that overall list.
s:first-child Elements that are the first or last tr:first-child {…} Matches the first row of every
s:last-child child of their parents, or that have table.
s:only-child no siblings.

s:nth-child(n) Elements that are the nth child. tr:nth-child(3) {…} Matches the third row of each
First child is nth-child(1), not (0) table
s:nth-child(even) Elements that are even or odd tr:nth-child(even) {…} Matches rows that are even
s:nth-child(odd) children of their parent. Count numbered rows of their own
starts at 1, so first match is odd. table.
s:nth-child(xn+y) Elements matching formula. You tr:nth-child(4n+2) {…} Matches row 6, 10, 14, … of
list “n” literally. So, 3n means each table.
every third. 3n+1 means entry
17 after every third.
Content Filtering Selectors
Selector Meaning Examples
s:contains(text) Elements that match s and .foo li:contains(wow) {…} Matches li elements that
whose body content have “wow” in their body
contains given text. text and are inside
<… class="foo">

s:empty Elements that have no div:empty {…} Empty divs.


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

s:parent Elements that have child div:parent {…} Non-empty divs.


elements.

s1:has(s2) Elements that match s1 table:has(th) {…} All tables that have at
and have directly or least one th element
indirectly contain inside.
elements that match s2.

18

© 2015 Marty Hall

CSS Properties

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
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. For JSF elements, you would use
<h:blahTag styleClass="indented">
• Only a few properties are shown here
– For complete list, with examples, see
http://www.w3.org/TR/CSS21/propidx.html

20

Colors
• color
– Foreground text color
• background-color
– Color of the background
• border-color
– Color of the border (see upcoming “box model” slide)
• Example
.colored {
color: red;
background-color: #00ff00;
border-color: black;
}
• Example usage: <p class="colored">…</p>
21
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.
• Supported for historical reasons, because the first browser was
on OS that used X Windows
• RGB spec
– #ff00ff
– rgb(255, 0, 255)
• Examples
– .cool { color: red; background-color: #0000ff;
22
border-color: papayawhip}

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 }

23
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

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


24

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
25
© 2015 Marty Hall

A Few Examples

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

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
27
This and the other examples are part of the style sheet that applies to many of the JSF pages in the later tutorial sections.
3D Titles
• Code
<h1 class="title">Two Lists</h1>
h1.title {
display: table;
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
28

Forms with Aligned Textfields


and R-Aligned Prompts
.formTable {
display: table;
}
.formTable td:first-child {
text-align: right;
}
.formTable td:nth-child(3) {
color: red;
font-weight: bold;
}
• Meaning
– The first <td> of each <tr> is R-aligned when inside
<table class="formTable"> (or h:panelGrid)
• The prompt is in the first <td>, the textfield in the second,
29 and the red/bold error message (if any) in the third.
© 2015 Marty Hall

Wrapup

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

References
• Books
– CSS Cookbook by Christopher Schmitt
– CSS3: Visual Quickstart Guide
by Jason Cranford Teague
– HTML5 and CSS3 by Brian P. Hogan
• Online References
– All official CSS specs:
http://www.w3.org/Style/CSS/specs.en.html
– CSS tutorial: http://www.w3schools.com/css/
– Search on Google for “CSS tutorial[s]"
– Cool demo: http://www.csszengarden.com/
• Examples of how you can totally revamp a page by
changing only the CSS.
31
Summary
• Load style sheets
– HTML and JSF
• <link href="css/styles.css" rel="stylesheet" type="text/css"/>
– JSF only
• <h:outputStylesheet name="styles.css" library="css"/>
• Apply styles (that start with “.”)
– HTML elements: <tag class="name">
– JSF elements: <h:tag styleClass="name">
• Selectors
– h1 { …}
• Applies to all h1 elements
– .foo {…}
• Applies to <tag class="foo"> or <h:tag styleClass="foo">
– div table.bar td {…}
• Applies to tds inside <table class="bar"> that are inside divs
32

© 2015 Marty Hall

Questions?
More info:
http://www.coreservlets.com/JSF-Tutorial/jsf2/ – JSF 2.2 tutorial
http://www.coreservlets.com/JSF-Tutorial/primefaces/ – PrimeFaces tutorial
http://courses.coreservlets.com/jsf-training.html – Customized JSF and PrimeFaces training courses
http://coreservlets.com/ – JSF 2, PrimeFaces, Java 7 or 8, Ajax, jQuery, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training

Customized Java EE Training: http://courses.coreservlets.com/


Java 7, Java 8, JSF 2, PrimeFaces, Android, JSP, Ajax, jQuery, Spring MVC, RESTful Web Services, GWT, Hadoop.
Developed and taught by well-known author and developer. At public venues or onsite at your location.

You might also like