convert pdf to image c# itextsharp : Export pdf data to excel Library application class asp.net html windows ajax Head_First_HTML_CSS_XHTML32-part771

292
Chapter 8
Adding style to the lounge
Now that you’ve got the 
<style>
element in your XHTML, you’re going to 
add some style to the Lounge to get a feel for writing CSS. This design probably 
won’t win you any “design awards,” but you gotta start somewhere.
The first thing we’re going to do is change the color (something to match those 
red lounge couches) of the text in the paragraphs.  To do that, we’ll use the CSS 
color property like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=“Content-Type” 
content=”text/html; charset=ISO-8859-1” />
<title>Head First Lounge</title>
<style type=”text/css”>
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<p>
<img src=“images/drinks.gif” alt=“Drinks” />
</p>
<p>
Join us any evening for refreshing
<a href=“beverages/elixir.html”>
elixirs</a>,
conversation and maybe a game or two
of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You’ll find us right in the center 
of downtown Webville. If you need 
help finding us, check out our
<a href=“about/directions.html”>
detailed directions</a>.
Come join us!
</p>
</body>
</html>
Here’s the rule 
that is going to 
specify the font 
color of the 
paragraphs.
The p selector 
selects all the 
paragraphs in the 
XHTML.
The property to change the font color is 
named “color” (you might think it would be 
“font-color” or “text-color”, but it’s not).  
We’re selecting just 
the <p> element to 
apply this style to.
We’re setting the text to a lovely 
maroon color that happens to 
match the lounge couches.
adding a style to the lounge
Export pdf data to excel - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
how to save a filled out pdf form in reader; export pdf form data to excel spreadsheet
Export pdf data to excel - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
pdf form field recognition; extract data from pdf using java
getting started with css
you are here 
293
Cruising with style: the test drive
Instead of setting the 
color
, what if you set 
background-color
of 
the <p> elements to 
maroon
instead?  How would it change the way 
the browser displays the page?
Here’s our 
new maroon 
paragraph text.  
Go ahead and make all the changes from the last couple of 
pages to your “lounge.html” file in the “chapter8/lounge” folder, 
save, and reload the page in your browser.  You’ll see that the 
paragraph text color has changed to maroon:
brain
power
?
Everything else is 
as it should be: the 
headings are still black, 
because all we selected 
to style were the <p> 
elements.
Notice that the color of 
the links didn’t change. 
Keep that in the back of 
your mind...
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Create PDF from Text. PDF Export. Convert PDF to Word (.docx Image to PDF. Image: Remove Image from PDF Page. Image Data: Read, Extract Field Data. Data: Auto Fill
export pdf data to excel; extract data from pdf into excel
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Merge all Excel sheets to one PDF file. Export PDF from Excel with cell border or no border. Free online Excel to PDF converter without email.
pdf form save in reader; pdf form data extraction
294
Chapter 8
How about a different 
font for the Lounge 
headings?  Make them 
really
stand out.  I’m seeing big, 
clean, gray...
Style the heading
h1 {    
font-family: sans-serif;
color:       gray;
}
h2 {    
font-family: sans-serif;
color:       gray;
}
p {
color: maroon;
}
Now let’s give those headings some style. How about changing the 
font a bit?  Let’s change both the type of font, and also the color of 
the heading fonts:
Actually, since these rules are exactly the same, we can 
combine them, like this:
h1, h2 {    
font-family: sans-serif;
color:       gray;
}
p {
color: maroon;
}
Here’s the rule to select <h1> 
elements and change the 
font-family to sans-serif 
and the font color to gray. 
We’ll talk a lot more about 
fonts later.
And here’s another rule to do 
the exact same thing to the 
<h2> element.
To write a rule for more than one 
element, just put commas between 
the selectors, like “h1, h2”.
Test drive...
Add this new CSS to your “lounge.html” file 
and reload.  You’ll see that with one rule, you’ve 
selected both the 
<h1>
and 
<h2>
headings.
Both of the headings on 
the page are now styled 
with a sans-serif font 
and colored gray.
styling headings
C# WPF PDF Viewer SDK to convert and export PDF document to other
PDF from RTF. Create PDF from Text. PDF Export. Convert PDF Edit, Delete Metadata. Watermark: Add Watermark to PDF. Form Process. Data: Read, Extract Field Data.
how to fill in a pdf form in reader; html form output to pdf
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer
Create PDF from Text. PDF Export. Convert PDF to Word (.docx Image to PDF. Image: Remove Image from PDF Page. Image Data: Read, Extract Field Data. Data: Auto Fill
pdf form data extraction; vb extract data from pdf
getting started with css
you are here 
295
Let’s put a line under the welcome message too
Let’s touch up the welcome heading a bit more.  How about a line under it?  
That should set the main heading apart visually and add a nice touch.  Here’s 
the property we’ll use to do that:
border-bottom: 1px solid black;
This property controls how the 
border under an element looks.
We’re going to style the bottom 
border so that it is a 1 pixel 
thick, solid black line.
The trouble is, if we add this property and value to the combined “h1, h2” 
rule in our CSS, we’ll end up with borders on both our headings:
h1, h2 {    
font-family:   sans-serif;
color:         gray;
border-bottom: 1px solid black;
}
p {
color: maroon;
}
If we do this...
... we get bottom borders on both 
our headings.  Not what we want.
Here we’re adding a property to 
change the bottom border for 
both the <h1> and <h2> elements.
So, how can we set the bottom border 
on just the 
<h1>
element, without 
affecting the 
<h2>
element?  Do we 
have to split up the rules again? Turn the 
page to find out...
C# PDF Converter Library SDK to convert PDF to other file formats
Able to export PDF document to HTML file. for C#.NET supports file conversion between PDF and various and images, like Microsoft Office (Word, Excel, and PPT
collect data from pdf forms; extracting data from pdf to excel
VB.NET PDF Converter Library SDK to convert PDF to other file
PDF Export. |. Home ›› XDoc.PDF ›› VB.NET PDF: PDF Export. for converting MicroSoft Office Word, Excel and PowerPoint document to PDF file in VB
how to make pdf editable form reader; exporting pdf form to excel
296
Chapter 8
We have the technology: specifying a 
second rule, just for the <h1>
We don’t have to split the “h1, h2” rule up, we just need to add another 
rule that is only for “h1” and add the border style to it.
h1, h2 {    
font-family:    sans-serif;
color:          gray;
}
h1 { 
border-bottom: 1px solid black;
}
p {
color: maroon;
}
The first rule stays the same. We’re 
still going to use a combined rule 
for the font-family and color for 
both <h1> and <h2>.
But now we’re adding a second rule 
that adds another property just to 
<h1>: the border-bottom property. 
Another test drive...
Change your CSS and reload the page.  You’ll see that the new rule 
added a black border to the bottom of the main heading, which gives 
us a nice underline on the heading and really makes it stand out.
Here’s the bottom 
border in black.
And no border 
here, just what we 
wanted.
getting more sophisticated with selectors
C# WPF PDF Viewer SDK to view, annotate, convert and print PDF in
PDF from RTF. Create PDF from Text. PDF Export. Convert PDF Image to PDF. Image: Remove Image from PDF Page. Form Process. Data: Read, Extract Field Data. Data: Auto
pdf data extraction open source; how to save editable pdf form in reader
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Create PDF from Text. PDF Export. Convert PDF to Word (.docx Image to PDF. Image: Remove Image from PDF Page. Image Data: Read, Extract Field Data. Data: Auto Fill
export excel to pdf form; export pdf form data to excel
getting started with css
you are here 
297
So, how do selections really work?
h1 { 
color: gray; 
}
You’ve seen how to select an element to style it, like this:
Or, how to select more than one element, like this:
You’re going to see that CSS allows you to specify all kinds of selectors that determine which elements 
your styles are applied to. Knowing how to use these selectors is the first step in mastering CSS, and 
to do that you need to understand the organization of the XHTML that you’re styling. After all, how 
can you select elements for styling if you don’t have a good mental picture of what elements are in the 
XHTML, and how they relate to one another? 
So, let’s get that picture of the Lounge XHTML in your head, and then we’ll dive back into selectors.
h1, h2 { 
color: gray; 
}
We call this the selector. 
Another selector. The style is applied to <h1> and <h2> elements.
The style is applied to the elements 
described by the selector - in this 
case, <h1> elements.
Q: 
So how does that work when you 
have more than one rule for an element?
A: 
You can have as many rules as 
you want for an element. Each rule adds to 
the style information of the rule before it. 
In general, you try to group together all the 
common styles between elements, like we 
did with <h1> and <h2>, and then any style 
that is specific to an element, you write in 
another rule, like we did with the border-
bottom style for the main heading.
Q: 
What’s the advantage of that 
approach? Isn’t it better to organize each 
element separately, so you know exactly 
what styles it has?
A: 
Not at all. If you combine common 
styles together, then if they change, you 
only have to change them in one rule. If you 
break them up, then there are many rules 
you have to change, which is error-prone. 
Q: 
Why do we use a bottom border 
to underline text? Isn’t there an underline 
style for text?
A: 
Good question. There is an 
underline style for text and we could use 
that instead.  However, the two styles have 
slightly different effects on the page: if you 
use border-bottom then the line will extend 
to the edge of the page. An underline is only 
shown under the text itself. The property to 
set text underline is called text-decoration 
and has a value of “underline” for underlined 
text. Give it a try and check out the 
differences.
there are no
Dumb Questions
VB.NET PDF- HTML5 PDF Viewer for VB.NET Project
Create PDF from Text. PDF Export. Convert PDF to Word (.docx Image to PDF. Image: Remove Image from PDF Page. Image Data: Read, Extract Field Data. Data: Auto Fill
online form pdf output; extracting data from pdf forms to excel
298
Chapter 8
body
html
head
style
meta
h1
p
h2
p
p
img
a
em
Markup Magnets
Remember drawing the diagram of HTML elements in Chapter 3? 
You’re going to do that again for the Lounge’s main page.  Below, 
you’ll find all the element magnets you need to complete the 
diagram.  Using the Lounge’s XHTML (on the right), complete the 
tree below. We’ve done a couple for you already. You’ll find the 
answer in the back of the chapter.
title
head
body
html
p
q
a
title
Like this.
drawing the lounge’s structure
getting started with css
you are here 
299
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=“Content-Type” content=”text/html; charset=ISO-8859-1” />
<title>Head First Lounge</title>
<style type=“text/css”>
h1, h2 {    
font-family:   sans-serif;
color:         gray;
}
h1 { 
border-bottom: 1px solid black;
}
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<p>
<img src=“images/drinks.gif” alt=“Drinks” />
</p>
<p>
Join us any evening for refreshing
<a href=“beverages/elixir.html”>
elixirs</a>,
conversation and maybe a game or two
of <em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You’ll find us right in the center of downtown
Webville. If you need help finding us, check out our
<a href=“about/directions.html”>
detailed directions</a>.
Come join us!
</p>
</body>
</html>
The Head First 
Lounge XHTML.
300
Chapter 8
body
html
h1
h2
p
p
img
a
em
a
Seeing selectors visually
h1 { 
font-family: sans-serif; 
}
Let’s take some selectors and see how they map 
to the tree you just created. Here’s how this “h1” 
selector maps to the graph: 
This selector matches any 
<h1> elements in the page, and 
there’s only one.
We can only style 
elements in the body, 
so we’re not showing 
the <head> element 
and everything under it.
head
body
html
h1
h2
p
p
img
a
em
a
h1, h2 { 
font-family: sans-serif; 
}
Now the selector 
matches both <h1> and 
<h2> elements.
p
p
And here’s how the “h1, h2” selector looks:
If we use a “p” selector, here’s how that looks:
body
html
h1
h2
p
p
img
a
em
a
p
p { 
font-family: sans-serif;
}
This selector matches all the 
<p> elements in the tree.
visual selectors
getting started with css
you are here 
301
Color in the elements that are selected by these selectors:
p, h2 { 
font-family: sans-serif; 
}
p, em { 
font-family: sans-serif;  
}
body
html
h1
h2
p
p
img
a
em
a
p
body
html
h1
h2
p
p
img
a
em
a
p
Sharpen your pencil
Documents you may be interested
Documents you may be interested