Java Web Development Course: Writing CSS Codes

Java Web Development Course
Chapter 4
Writing CSS codes
Contents
 What is CSS?
 Syntax of CSS
 Inclusion
 CSS Rules Overriding
 Selector Types
 Measurement Units
 CSS Color
 CSS Background
 CSS Font
 CSS Text
 CSS Image
 CSS Link
2 ACE Professionals Development Center

Contents
 CSS Table
 CSS Border
 CSS Margin
 CSS List
 CSS Padding
 CSS Outline
 CSS Dimension
 CSS Scrollbar

What is CSS?
 Cascading Style Sheets is a stylesheet language that describes the
presentation of an HTML or XML document. CSS describes how
elements must be rendered on screen, on paper or in other media.

Syntax of CSS
 A CSS rule-set consists of a selector and a declaration block:
 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated
by semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
 A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.

Inclusion
 There are four way to associate styles with your
HTML document.
1. Embedded CSS
2. Inline CSS
3. External CSS
4. Imported CSS

1. Embedded CSS
 Put CSS rules into an HTML document using the <style> element.
 Syntax
<head>
<style type="text/css" media="…">
.
.
.
</style>
</head>
Try It Out!!!
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: yellow;
}
h1 {
color: maroon; margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. Inline CSS
 Use style attribute of an HTML element.
 Syntax
<h1 style="color:#36C;">…</h1>
Try It Out!!!
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS </h1>
</body>
</html>
3. External CSS
 Use to include external stylesheet.
 Syntax
<head>
<link type="text/css" href="mystyle.css" rel="stylesheet"/>
</head>
4. Imported CSS
 Similar to the <link> tag.
 Syntax
<head>
<style>
@import url('mystyle.css');
</style>
</head>
CSS Rules Overriding
 Inline style sheet takes highest priority. It will override any rule
defined in <style> tag or the rules defined in any external style sheet
file.
 <style> tag will override the rules defined in any external style sheet.
 External style sheet is the lowest priority.
 External < Embedded < Internal
Selector Types
a) Type Selector – specific HTML tag
b) Universal Selector – any element type
c) Descendant Selector – to a particular element only when it lies
inside a particular element
d) Class Selector – style rules based on the class attribute of the
element. All the element having this class will be effected.
e) ID Selector – style rules based on the id attribute of the element.
All the element having this id will be effected.
f) Child Selector – one of Descendant select. Similar with
descendants but have different functionality.
g) Attribute Selector –style to HTML tag of attribute.
Try it out (Element selector)
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Try it out (ID selector)
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
Try it out (Class selector)
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Try it out (Class selector)
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Try it out (Descendant selector)
<!DOCTYPE html>
<html>
<head>
<style>
div p {
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>
Try it out (Child selector)
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
}
</style>
</head>
<body>
<div>
<span><p>Paragraph 3 in the div.</p></span> 
</div>

</body>
</html>
Try it out (Attribute selector)
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
}
</style>
</head>
<body>
<p>The links with a target attribute gets a yellow background:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Try it out (Attribute selector)
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Measurement Units
Unit Description Example
% Defines a measurement as a p{font-size:16pt; line-
percentage relative to another value, height:125%;}
typically an enclosing element.
cm Defines a measurement in div{margin-bottom:2cm;}
centimeters.
em A relative measurement for the p{letter-spacing:7em;}
height of a font in em spaces.
Because an em unit is equivalent to
the size of a given font, if you assign
a font to 12pt,each "em" unit would
be 12pt; thus, 2em would be 24pt.
ex This value defines a measurement p{font-size:24pt;line-
relative to a font’s x-height. The x- height:3ex;}
height is determined by the height of
the font’s lowercase letter x.
Measurement Units
Unit Description Example
in Defines a measurement in inches. p{word-spacing:.15in;}
mm Defines a measurement in p{word-spacing:15mm;}
millimeters.
pc Defines a measurement in picas. A p{font-size:20pc;}
pica is equivalent to 12 points; thus,
there are 6 picas per inch.
pt Defines a measurement in points. A body{font-size:18pt;}
point is defined as 1/72nd of an inch.
px Defines a measurement in screen p{padding:25px;}
pixels.
Try it out (cm unit)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p{
font-size: 0.5cm;
line-height: 1cm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>

<p>This is another paragraph.</p>
</body>
</html>
Try it out (em unit)
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 16px;
line-height: 1em;
}
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to
0.5x30 = 15px</span>.</div>
</body>
</html>
Try it out (ex unit)
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 2ex;
}
</style>
</head>
<body>
<div>The font-size of the div element is set to 20px. <span>The span element inside the div element has a font-size of
1ex</span>.</div>
</body>
</html>
Try it out (px unit)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
p{
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>

</body>
</html>
Try it out (px unit)
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>

</body>
</html>
Try it out (pt unit)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p{
font-size: 15pt;
line-height: 25pt;
}
</style>
</head>
<body>

</body>
</html>
CSS Color
Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50
%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
Keyword Aqua, black, etc. p{color:teal;}
CSS Background
Syntax Description
background-color To set the background color of an element.
background-image To set the background image of an element.
background-repeat To control the repetition of an image in the
background.
background-position To control the position of an image in the
background.
background-attachment To control the scrolling of an image in the
background.
background To define the background.
CSS Font
Syntax Description
font-family To change the face of a font.
font-style To make a font italic or oblique.
font-variant To create a small-caps effect.
font-weight To increase or decrease how bold or light a
font appears.
font-size To increase or decrease the size of a font.
font To specify a number of other font
properties.
CSS Text
Syntax Description
color To change the face of a font.
direction To make a font italic or oblique.
letter-spacing To create a small-caps effect.
word-spacing To increase or decrease how bold or light a font
appears.
text-indent To increase or decrease the size of a font.

text-align To specify a number of other font properties.
text-decoration To underline, over line and strikethrough text.
text-transform To capitalize text or convert text to uppercase or lower
case letters.
white-space To control the flow and formatting of text.
text-shadow To set the text shadow around a text.
CSS Image
Syntax Description
border To set the width of an image border.
height To set the height of an image.
width To set the width of an image.
CSS Link
Syntax Description
:link To signify unvisited hyperlinks.
:visited To signify visited hyperlinks.
:hover To signify an element that currently has
the user’s mouse pointer hovering over it.
:active To signify an element on which the user is
currently clicking.
CSS Table
Syntax Description
border-collapse To specify whether the browser should
control the appearance of the adjacent
borders that touch each other or whether
each cell should maintain its style.
border-spacing To specify the width that should appear
between table cells.
caption-side To control the placement of the table
caption.
padding To control the space between the border
and the content in a table
text-align To sets the horizontal alignment (like left,
right, or center) of the content in <th> or
<td>.
CSS Table
<!DOCTYPE html> <table>
<html> <tr>
<th>Firstname</th>
<head>
<th>Lastname</th>
<style> </tr>
table { <tr>
border-collapse: collapse; <td>Peter</td>
} <td>Griffin</td>
</tr>
<tr>
table, td, th { <td>Lois</td>
border: 1px solid black; <td>Griffin</td>
} </tr>
</style> </table>
<p><b>Note:</b> If a !DOCTYPE is not
</head> specified, the border-collapse property can
<body> produce unexpected results
in IE8 and earlier versions.</p>
</body>
<h2>Let the borders </html>
collapse:</h2>
CSS Table
<!DOCTYPE html> <tr>
<html>
<td>Peter</td>
<head>
<td>Griffin</td>
<style>
<td>$100</td>
table, td, th {
border: 1px solid #ddd; </tr>
text-align: left; <tr>
} <td>Lois</td>
table { <td>Griffin</td>
border-collapse: collapse;
<td>$150</td>
width: 100%;
</tr>
}
<tr>
th, td {
padding: 15px; <td>Joe</td>
} <td>Swanson</td>
</style> <td>$300</td>
</head> </tr>
<body> <tr>
<h2>The padding Property</h2>
<td>Cleveland</td>
<p>This property adds space between the border and the content in a
table.</p> <td>Brown</td>
<table> <td>$250</td>
<tr> </tr>
<th>Firstname</th>
</table>
<th>Lastname</th>
</body>
<th>Savings</th>
</tr>
</html>
CSS Border
Syntax Description
border-color To specify the color of a border.
border-style To specify whether a border should be
solid, dashed line, double line or one of
the other possible values.
border-width To specify the width of the border. Default
value is "medium"
CSS Margin
Syntax Description
margin To specify a shorthand property for setting
the margin properties in one declaration.
margin-bottom To specify the bottom margin of an
element.
margin-top To specify the top margin of an element.
margin-left To specify the left margin of an element.
margin-right To specify the right margin of an element.
CSS List
Syntax Description
list-style-type To control the shape or appearance of the
marker.
list-style-position To specify whether a long point that wraps
to a second line should align with the first
line or start underneath the start of the
marker.
list-style-image To specify an image for the marker rather
than a bullet point or number.
list-style To serve as shorthand for the preceding
properties.
market-offset To specify the distance between a marker
and the text in the list.
CSS Padding
Syntax Description
padding-bottom To specify the bottom padding of an
element.
padding-top To specify the top padding of an element.
padding-left To specify an image for the marker rather
than a bullet point or number.
padding-right To serve as shorthand for the preceding
properties.
padding To define the padding.
CSS Outline
Syntax Description
outline-width To set the width of the outline.
outline-style To set the line style for the outline.
outline-color To set the color of the outline.
outline To set the color of the outline.
CSS Dimension
Syntax Description
height To set the height of a box.
width To set the width of a box.
line-height To set the height of a line of text.
max-height To set the maximum height that a box can
be.
min-height To set the minimum height that a box can
be.
max-width To set the maximum width that a box can
be.
min-width To set the minimum width that a box can
be.
CSS Scrollbar
Value Description
visible To overflow the borders of its containing
element.
hidden Simply cut off at the border of the
containing element and no scrollbars is
visible.
scroll The size of the containing element does
not change, but the scrollbars are added
to allow the user to scroll to see the
content.
auto Same as scroll, but the scrollbar will be
show only if the content does overflow.
Try It Out!!!
 The goal of this exercise is to become more skilled
at applying CSS styles. Try to apply styles to the
original table (below) to create something along the
lines of the table below.
Try It Out!!!
 The goal of this exercise is to become more skilled
at applying CSS styles. Try to apply styles to the
original table (below) to create something along the
lines of the table below.
Thank you!!
Q&As
References
 http://www.w3schools.com/css/default.asp
 http://www.w3schools.com/css/css_examples.asp

Java Web Development Course: Writing CSS Codes

Uploaded by

Java Web Development Course: Writing CSS Codes

Uploaded by

Java Web Development Course

2 ACE Professionals Development Center

3 ACE Professionals Development Center

4 ACE Professionals Development Center

 The selector points to the HTML element you want to style.

5 ACE Professionals Development Center

6 ACE Professionals Development Center

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Hello World!</p>

<h1 class="center">Red and center-aligned heading</h1>

<h1 class="center">This heading will not be affected</h1>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 4. Not in a div.</p>

<p>The links with a target attribute gets a yellow background:</p>

<p>The link with target="_blank" gets a yellow background:</p>

<h1>This is heading 1</h1>

<h1>This is heading 1</h1>

<h1>This is heading 1</h1>

<h1>This is heading 1</h1>

text-indent To increase or decrease the size of a font.

50 ACE Professionals Development Center

You might also like