c# pdf to image free : Export excel to pdf form software SDK project winforms wpf windows UWP Head_First_HTML_CSS_XHTML49-part789

464
Chapter 11
Adding <span>s in three easy steps
<span>
elements give you a way to logically separate inline content in the same 
way that 
<div>
s allow you to create logical separation for block level content. To 
see how this works, we’re going to style the music recommendations by first adding 
<span>
elements around the CDs and artists, and then we’ll write two CSS rules 
to style the 
<span>
s. Here’s exactly what you’re going to do: 
You’re going to nest the CDs and artists in separate 
<span>
elements.
You’re going to add one 
<span>
to the “cd” class and the 
other to the “artist” class.
1
2
3
You’re going to create a rule to style the “cd” class with italic, and 
the “artist” class with bold.
Steps one and t wo: adding the <span>s
Open your “lounge.html” file and locate the “Who’s playing at the Lounge” 
heading.  Just below that you’ll see the unordered list of recommendations. 
Here’s what it looks like:
<ul>
<li>Buddha Bar, Claude Challe</li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
<ul>
<li><span class=”cd”>
Buddha Bar</span>, 
<span class=”artist”>
Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Each list item consists of a CD title, a 
comma, and then the music artist.
Let’s try adding 
<span>
s to the first CD and artist:
Just add a <span> opening tag along with 
the class attribute and a value of “cd”.
Next, add a closing tag 
after the CD title.
Do the same for the artist. Nest it 
in a <span> element, only this time 
put the <span> in the “artist” class.
how to use spans
Export excel to pdf form - 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
pdf data extraction open source; extracting data from pdf to excel
Export excel to pdf form - 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
extracting data from pdf into excel; exporting data from excel to pdf form
divs and spans
you are here 
�
465
Nice job, guys. This 
next one’s for you.
Step three: styling the <span>s
Before we move on, save the file and reload it in your browser. Like a 
<div>
, by default 
a 
<span>
has no effect on style, so you should see no changes.
Now let’s add some style. Add these two rules to the bottom of your “lounge.css” file:
.cd {
font-style: italic;
}
.artist {
font-weight: bold;
}
We’re going to add a rule for each of 
the new classes, cd and artist.
For CDs we’ll make 
the font style italic.
And for artists we’ll 
set the font-weight 
to bold.
Test driving the spans
That’s it. Save and reload. Here’s what you’ll see:
Now the 
first music 
recommendation 
has the correct 
styling.
C# WPF PDF Viewer SDK to convert and export PDF document to other
PDF from Word. Create PDF from Excel. Create PDF PDF from RTF. Create PDF from Text. PDF Export. Convert PDF Edit, Delete Metadata. Watermark: Add Watermark to PDF
fill in pdf form reader; how to extract data from pdf file using java
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
extract table data from pdf; extract pdf form data to excel
466
Chapter 11
Q: 
When do I use a <span> rather 
than another inline element like <em> or 
<strong>?
A: 
As always, you want to mark up your 
content with the element that most closely 
matches the meaning of your content.  So, 
if you are emphasizing words, use <em>; 
if you’re trying to make a big point, use 
<strong>.  But, if what you really want is 
to change the style of certain words, say, 
the names of albums or music artists on a 
fan site Web page, then you should use a 
<span> and put your <span> elements into 
appropriate classes to group them and style 
them.
Q: 
Can I set properties like width on 
<span> elements? Actually, what about 
inline elements in general?
A: 
You can set the width of inline 
elements like <span>, <em> and <strong>, 
but you won’t notice any effect until you 
position them (which you’ll learn how to do in 
the next chapter). You can also add margin 
and padding to these elements, as well as 
a border.  Margins and padding on inline 
elements work a little differently from block 
elements – if you add a margin on all sides 
of an inline element, you’ll only see space 
added to the left and right.  You can add 
padding to the top and bottom of an inline 
element, but the padding doesn’t affect the 
spacing of the other inline elements around 
it, so the padding will overlap other inline 
elements.
Images are a little different from other 
inline elements.  The width, padding, and 
margin properties all behave more like they 
do for a block element. Remember from 
Chapter 5: if you set the width of an image 
using either the width attribute in the <img> 
element or the width property in CSS, the 
browser scales the image to fit the width you 
specify.  This can sometimes be handy if 
you can’t edit the image yourself to change 
the dimensions, and you want the image to 
appear bigger or smaller on the page.  But 
remember, if you rely on the browser to 
scale your image, you may be downloading 
more data than you need (if the image is 
larger than you need).
there are no
Dumb Questions
more on span
You need to finish the job. Add <span> elements to the rest of 
the music recommendations and test your page. You’ll find the 
solution in the back of the chapter.
<ul>
<li><span class=”cd”>
Buddha Bar</span>, 
<span class=”artist”>
Claude Challe</span></li>
<li>When It Falls, Zero 7</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
<li>Music for Airports, Brian Eno</li>
</ul>
Sharpen your pencil
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer
Create PDF from Word. Create PDF from Excel. Create PDF Create PDF from Text. PDF Export. Convert PDF to Word (.docx to PDF. Image: Remove Image from PDF Page. Image
export excel to pdf form; how to make pdf editable form reader
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Create PDF from Word. Create PDF from Excel. Create PDF Create PDF from Text. PDF Export. Convert PDF to Word (.docx to PDF. Image: Remove Image from PDF Page. Image
how to fill in a pdf form in reader; how to make a pdf form fillable in reader
divs and spans
you are here 
�
467
Think about the <a> element.  Is 
there something about its style that 
seems different from other elements?
brain
power
?
Hey guys, I know you think 
you’re about done, but you 
forgot to style the links. They’re 
still that default blue color, which 
kinda clashes with our site.
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
extract data from pdf to excel online; how to type into a pdf form in reader
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.
extract data from pdf into excel; extract data out of pdf file
468
Chapter 11
The <a> element and its multiple personalities
Have you noticed that links act a little differently when it comes 
to style? Links are chameleons of the element world because, 
depending on the circumstance, they can change their style at a 
moment’s notice. Let’s take a closer look:
Here’s a link you’ve never clicked on 
before. This is called an “unvisited link”, 
or just ‘link”, and it’s blue by default.
And if you hold your mouse over a link without 
clicking, this is called “hovering”.  On some 
browsers you’ll see a tool tip that displays the 
text of the “title” attribute. And, if you pay 
close attention, on some Web pages, you’ll see a 
different style as you hover.
And here’s a link you 
have clicked on before. 
We call these “visited 
links”.  Usually, visited 
links are displayed 
in a different color 
than unvisited links so 
that you can tell the 
difference. In most 
browsers, visited links 
are purple by default.
Unlike other elements, the style of an 
<a>
element changes depending 
on its state. If the link has never been clicked on, it has one style, and 
if it has been clicked on, another.  And if you hover over a link, it can 
have yet another style.  Perhaps there’s more to styling 
<a>
elements 
than meets the eye? You betcha... let’s take a look.
how to style links
C# HTML5 PDF Viewer SDK to convert and export PDF document to
PDF Create. Create PDF from Word. Create PDF from Excel. PDF from RTF. Create PDF from Text. PDF Export. Convert PDF Image to PDF. Image: Remove Image from PDF Page
saving pdf forms in acrobat reader; vb extract data from pdf
C# WPF PDF Viewer SDK to view, annotate, convert and print PDF in
PDF Create. Create PDF from Word. Create PDF from Excel. PDF from RTF. Create PDF from Text. PDF Export. Convert PDF Image to PDF. Image: Remove Image from PDF Page
export pdf form data to excel spreadsheet; pdf form save with reader
divs and spans
you are here 
�
469
How can you style elements 
based on their state?
A link can be in a few states: it can be unvisited, visited, 
or in the “hover” state (and a couple of other states too).  
So, how do you take advantage of all those states? For 
instance, it would be nice to be able to specify what the 
visited and unvisited colors are. Or maybe highlight the 
link when the user is hovering over it.  If only there were 
a way...
Well, of course there is, but if we told you it involves 
using pseudo-classes you’d probably just decide you’ve read 
enough for the night, and close the book. Right? But 
hold on! Pretend we never said the word pseudo-class and 
let’s just look at how you can style your links:
a:link { 
color: green;
}
a:visited { 
color: red;
}
a:hover { 
color: yellow;
}
This selector is applied 
to links when they are 
in an unvisited state.
And this selector is 
applied to links when 
they are visited.
And this selector 
is applied when you 
hover over a link.
Add these rules to the bottom of your 
“lounge.css” file and then save and reload 
“lounge.html”. Play around with the links to 
see them in each state. Note that you might 
have to clear your browser history to see the 
unvisited color (green).  
Once you’re done, 
make sure you take these rules out of your 
“lounge.css” file before you continue.
Q: 
What happens if I just style the <a> 
element like a normal element? Like:
    a {  color: red; }
A: 
You certainly can do that, but then your links 
will look the same in all states, which makes your 
links less user-friendly because you can’t tell which 
ones you’ve visited and which ones you haven’t.
Q: 
What are the other link states you 
mentioned?
A: 
There are two others: focus and active. The 
focus state occurs when the browser focuses on your 
link. What does that mean? Some browsers allow you 
to press your tab key to rotate through all the links on 
your page.  When the browser comes to a link, that 
link has the “focus.”  The active state occurs when 
the user first clicks on a link. One word of warning 
about these two states: they aren’t well supported by 
all browsers yet, so make sure and test them if they 
are important to your design.
Q: 
Can’t my links be in multiple states at 
the same time? For instance, my link could be 
visited, have the mouse hovering over it, and the 
user could be actively clicking on it all at once.
A: 
They sure can. You determine which style 
is applied by the ordering of your rules. So, the 
right ordering is generally considered to be: link, 
visited, focus, hover, and then active. If you use that 
ordering, you’ll get the results you expect.
Q: 
Okay, I give.  What’s a pseudo-class?
A: 
Only one of the most confusing words in the 
CSS language. But, as you’ve seen, styling links is 
pretty straightforward. So, let’s talk about pseudo-
classes...
there are no
Dumb Questions
Notice we have the element <a>, followed by a 
“:”, followed by the state we want to select.
Exercise 
470
Chapter 11
This week’s interview:
getting to know the 
pseudo-class.
The Pseudo-class Exposed
Head First: Welcome, Pseudo-class.  It’s a 
pleasure to have you here. I must confess that 
when they first asked me to do this interview, 
I drew a blank. Pseudo-class? The only thing 
that came to mind was that ’80s Phil Collins 
song.
Pseudo-class:  Uh, that would be Sussudio. 
My name is Pseudo. 
Head First:  Oops.  Honest mistake.  
Maybe we could start there.  Can you tell us 
a little about where Pseudo came from?
Pseudo-class:  Pseudo usually means 
something that looks like the real thing, but 
isn’t.
Head First:  And the last name? Class?
Pseudo-class:  Everyone knows what a 
CSS class is. It’s a grouping you create to 
place elements in so you can style them 
together. Put “pseudo” and “class” together 
and you have a pseudo-class: it acts like a 
class, but it isn’t a real class. 
Head First:  What’s not real about it if it 
acts like a class?
Pseudo-class:  Okay, open up an XHTML 
file and look for the class :visited, or :link, or  
:hover. Let me know when you find one.
Head First:  I don’t see any.
Pseudo-class:  And yet, a:link, a:visited, 
and even a:hover all allow you to specify 
style, just like they were classes. So, those are 
pseudo-classes. In other words, you can style 
pseudo-classes, but no one ever types them 
into their XHTML.
Head First:  Well then, how do they work?
Pseudo-class:  You can thank your browser 
for that. The browser goes through and adds 
all your 
<a>
elements to the right pseudo-
classes.  If a link’s been visited, no problem; 
it goes into the “visited” class.  Is the user 
hovering over a link?  No problem, the 
browser throws it in the “hover” class. Oh, 
now the user isn’t hovering?  The browser 
yanks it out of the “hover” class.
Head First:  Wow, I never knew. So there 
are all these classes out there that the browser 
is adding and removing elements from 
behind the scenes.
Pseudo-class:  That’s right, and it’s 
damned important to know about, otherwise 
how would you give your links style that 
adapted to what state the link was in?
Head First:  So, Pseudo, do you just do 
links? 
Pseudo-class:  No, I do other elements 
too. Some browsers already support pseudo-
classes like active and hover on other types of 
elements. And there are some other pseudo-
classes, too.  For instance, the pseudo-class  
:first-child is assigned to the first child of 
any element, like the first paragraph in 
a 
<blockquote>
.  But be careful on 
everything other than :link, :visited, and  
:hover because browser support isn’t fully 
there yet.
Head First:  Well, I’ve certainly learned 
something in this interview.  Who knew that 
song was actually called “Sussudio”?! Thanks 
for being here Pseudo-class.
more on pseudo-classes
divs and spans
you are here 
�
471
Putting those pseudo-classes to work
#elixirs a:link { 
color: #007e7e;
}
#elixirs a:visited { 
color: #333333;
}
#elixirs a:hover { 
background: #f88396; 
color: #0d5353;
}
Okay, let’s be honest. You’ve probably just learned the most important thing in this 
book: pseudo-classes. Why? No, no, not because it allows you to style elements based 
on various “classes” your browser decides they belong to, like 
:link
or :first-
child
.  And, no, not because they give you really powerful ways to style elements 
based on things that happen while your visitors are using your page, like :hover. 
It’s because the next time you’re in that design meeting and you start talking about 
pseudo-classes with a real understanding, you’re going to move to the head of the class.  
We’re talking promotions and bonuses... at a minimum, the awe and respect of your 
fellow Web buddies.
So, let’s put those pseudo-classes to good use. You’ve already added some pseudo-class 
rules to your “lounge.css” and they had a dramatic impact on the look of the links, but 
they’re probably not quite right for the lounge. So let’s rework the style a little:
Okay, big change here. We’re using a descendant selector 
combined with a pseudo-class. The first selector says 
to select any unvisited <a> element that is nested in an 
element with the id “elixirs”. So we’re JUST styling the 
links inside elixirs.
On these two we’re setting the color. 
For unvisited links, a nice aquamarine...
...and for visited links 
we’re using a dark gray.
Now for the really interesting rule. When 
the user is hovering over the link, we’re 
changing the background to red. This 
makes the link look highlighted when you 
pass the mouse over it. Give it a try!
Open up your “lounge.css” and rework your a:link, a:visited, and 
a:hover rules to use the new descendant selector and the new 
style definitions. Save, reload, and turn the page.
Exercise 
472
Chapter 11
Test drive the links
Your job is to give the “detailed directions” link in the lounge some style.  Just like the elixirs 
link, we want all unvisited links to be aquamarine, and all visited links to be gray.  However, 
we don’t want the other links in the lounge to have any hover style... that’s unique to the 
elixirs.  So, how would you do it?  Fill in the blanks to give the “detailed directions” link, and 
any other links you might add to the lounge later, this style. Check your answer in the back of 
the chapter and then make the changes in your lounge files.
____________ {  __________: #007e7e;  }
____________ {  __________: #333333;  }
When you reload you should see some new 
style in the elixirs section. Keep in mind, to see 
the unvisited links you may have to clear your 
browser’s history, otherwise the browser will 
know you’ve visited these links before.
Now we’ve got green unvisited 
links, gray visited links, and a 
very cool red highlight when 
you hover over the link.
Sharpen your pencil
using pseudo-classes for links
divs and spans
you are here 
�
473
Isn’t it about time we talk about the “cascade”?
Well, well, we’re quite far into this book (473 pages to be exact) and we still haven’t 
told you what the “Cascade” in Cascading Style Sheets is all about. Truth be told, 
you have to know a lot about CSS to fully understand the cascade.  But guess what, 
you’re almost there, so wait no more.
Here’s just one last piece of information you need to understand the cascade. You 
already know about using multiple style sheets to either better organize your styles 
or to support different types of devices. But there are actually some other style sheets 
hanging around when your users visit your pages. Let’s take a look:
The Author 
(that’s you!)
The Reader
(your users)
The Browser
First, there are all 
the style sheets you’ve 
written for your page.
But some browsers also allow users 
to create their own styles for 
XHTML elements. If your style 
sheet doesn’t define these styles, 
the user’s style sheet is used instead.
And finally, you already 
know that the browser 
itself maintains a set of 
default styles that are 
used if you don’t define 
the styles for an element. 
These are also the styles 
that are used if you don’t 
have any author or reader 
style sheets.
Note that there is a way for a reader 
to actually override your styles. To do 
that they put “!important” at the end 
of a property declaration.
When the browser needs to determine 
which style to apply to an element, it uses 
all these style sheets. Priority is given first 
to the author’s styles (that is, your styles), 
then to the reader’s styles, and then 
finally to the browser’s default styles. 
Documents you may be interested
Documents you may be interested