xml to pdf c# itextsharp : How to bookmark a page in pdf document Library control class asp.net azure wpf ajax Build%20Your%20Own%20Web%20Site%20The%20Right%20Way%20Using%20HTML%20&%20CSS%203rd%20Ed12-part768

Here, I’ve chosen to use the Verdana font. It’s applied to the
body
element because
body
contains every element that you will see on the web page. The nature of how
CSS is applied means that every element contained in the
body
element will take
on the same font (unless another font is specified for a given element or elements
within
body
—but more on that a little later).
Great, Verdanaitis! Butwhatif somepeoplewhoview your sitedon’thave Verdana
installed on their computers? Hmm, that’s atrickyone. The shortanswer is thatthe
browser will make its bestguess on which fontit should useinstead, butthebrowser
need notdoalltheguesswork. The
font-family
propertyallowsus to enter multiple
fonts in the order in which we’d prefer them used if a particular font is missing on
auser’s computer. So, we could type the following:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
To translate: “Style everything in the body of my web page so that the text appears
as Verdana. Failing that, use Helvetica and, failing that, Arial. If none of the above
are installed, just use whichever sans-serif font is available.”
This is known as a font stack, and there are various combinations that you might
like to trylater on. Checkout whatAaron Boodman has tosay in “8 Definitive Web
Font Stacks” if you can’t wait to have a play around with the fonts available to you.
We’ll usethis selection ofthree fonts (and the sans-serif fallback)in our divingsite,
so let’s open the stylesheet file and play around with some CSS.
1. Type the above CSS into
style1.css
.
2. Save the file, and then open the home page (
index.html
)in your browser.
Ifeverythingwenttoplan, your webpage (allthreeof them, actually)should display
slightly differently to how they did before. Figure 3.4 shows how our newly styled
home page appears.
Build Your Own Website The Right Way Using HTML & CSS
84
How to bookmark a page in pdf document - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
pdf bookmarks; creating bookmarks in a pdf document
How to bookmark a page in pdf document - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
pdf bookmark editor; create bookmark pdf file
Figure 3.4. A font change in the stylesheet affects the body of our web pages
Sans-serif Fonts: Better for Onscreen Viewing
Aserif font isdefined assuch for the little flourishesevident at the endsof each
letter. These flourishes,shownin Figure 3.5, are knownas serifs. They’re great
for printed material, as they give a little shape to the words,making them easier
to read.
However, onthe screen, serif fonts canbe a little messy, especially when they’re
usedfor smallertype—most screens lackthe pixelsto do these flourishesjustice.
For thisreason, many websites use sans-serif fonts (from French, translating as
“without serif”) whenthe size isset quite small.
Note that when yourefer to a sans-serif font inCSS,you must hyphenate the two
words, i.e. sans-serif.
85
Adding Some Style
VB.NET PDF Page Delete Library: remove PDF pages in vb.net, ASP.
VB.NET PDF - How to Delete PDF Document Page in VB.NET. Please follow the sections below to learn more. DLLs for Deleting Page from PDF Document in VB.NET Class.
bookmark pdf reader; convert word to pdf with bookmarks
VB.NET PDF Page Insert Library: insert pages into PDF file in vb.
Easy to Use VB.NET APIs to Add a New Blank Page to PDF Document in VB.NET Program. DLLs for Adding Page into PDF Document in VB.NET Class.
export pdf bookmarks; creating bookmarks in pdf from word
Figure 3.5. Highlighting the serifs in the Georgia font
Exploring the Font Universe
Incase you’re thinking,“Thisis all well and good, but there’s a really cool font
I’d prefer to use,” you may just be in luck.There are ways of providing browsers
withnonstandardfonts,butit’saninvolvedprocessdueto the different waysthat
browserssupport them.There are alsoa number of servicesonthe Web (free ones
too!) that help to make this processeasier for you. We’ll take a look at what’sin-
volvedwhenproviding more fancy-pantsfonts in Chapter 10.
Stylish Headings
The firstelementthatwe’llstyleistheleveloneheading,denoted by the
h1
element.
Let’s add some rules to our CSS file to see what’s possible when it comes to those
headings. In your text editor, add the following to
style1.css
:
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
Save the CSS file and refresh your view of the home page in your browser. Can you
see what’s changed? All the first-level headings now display in the Trebuchet MS
font, while everything else displays in Verdana.
We’ve chosen another sans-serif font, but it’s different enough to provide plenty of
contrast with the paragraphs, as Figure 3.6 illustrates.
Build Your Own Website The Right Way Using HTML & CSS
86
C# PDF Page Delete Library: remove PDF pages in C#.net, ASP.NET
C#.NET PDF Library - Delete PDF Document Page in C#.NET. Able to remove a single page from PDF document. Ability to remove a range of pages from PDF file.
create pdf bookmarks online; how to bookmark a page in pdf document
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
String filepath = @""; String outPutFilePath = @""; PDFDocument doc = new PDFDocument(filepath); // Copy the first page of PDF document.
copy bookmarks from one pdf to another; delete bookmarks pdf
Some Font Names Deserve Quotes
In the code example above, “Trebuchet MS” appears in quotation marks. You
don’t needto wrap quote marks aroundfont namesunless the font comprises
several words, suchas “Courier New” or “Times New Roman.” Asingle-word
font name,such asArial or Verdana, does not need to be wrapped inside quotes.
Figure 3.6. 
h1
headings displayed in one sans-serif font (Trebuchet MS) while paragraph text displayed in another
(Verdana)
Have a quick look around your fledgling website, and you’ll see that the new styles
have been applied to all your web pages. Let’s now go a step (or two) further.
What’s going on? Nothing’s Changed!
If you try refreshing your browser’sview of a page and nothing appearsto be dif-
ferent, check that you saved the changes you made to the CSS file. If you did,
check that youtyped the CSS exactly asdescribed. If there’s no problems there,
youmay be experiencing a caching problem withyour browser.
Web browsers cache some content.Caching is when your browser accesses files
previously saved to the harddrive whenyou visit a given web page, rather than
downloadingnew fileseachtime.Forexample,youentertheURL,andthebrowser
pulls the page—or resources required for the page such as images—that’sstored
in its cache. This speedsupthe process of displaying a web page that has been
87
Adding Some Style
C# PDF Page Insert Library: insert pages into PDF file in C#.net
Support to create new page to PDF document in both web server-side application and Windows Forms. DLLs for Inserting Page to PDF Document.
acrobat split pdf bookmark; add bookmarks to pdf online
VB.NET PDF File Split Library: Split, seperate PDF into multiple
file by defined page range in VB.NET class application. Divide PDF file into multiple files by outputting PDF file size. Split PDF document by PDF bookmark and
edit pdf bookmarks; bookmark a pdf file
previously loaded. Unfortunately, your cache can soon become out-of-date, and
when that happens, the page you visit might not display the most recent data.
This happens most frequently withimages, but it canalso occur using CSS files.
The goodnewsis that you have control over your browser’s cache settings.
Therefore,theamountofspacethecache takesuponyour harddiskbeforecached
content is replaced withnewer data can be adjusted.Youcan poke around your
browser’s settings for terms like “Cache” or“Temporary Internet Files” to change
these settings;however,most usersopt toleavetheir cachestothe default settings.
If you’re positive that you’ve made the necessary changes to your CSS file (and
savedthem) correctly,you may need toforce-reloadthe CSSfile in your browser.
To force the browser to retrieve the most up-to-date versionof your CSS file,
simplyholddownthe Shift key (CtrlforInternet Explorer) andclickonthe
Refresh
(or
Reload
)iconon your browser’s toolbar.
A Mixture of New Styles
Let’s make some more changes to the look of the site—we’ll add more styles to the
body, and alter the appearance of the navigation. Copy the CSS below into your
style1.css
file (or copy it from the book’s code archive):
chapter3/website_files/07_blue_background/style1.css
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li {
font-size: small;
}
Build Your Own Website The Right Way Using HTML & CSS
88
C# PDF Page Rotate Library: rotate PDF page permanently in C#.net
Using this C# .NET PDF rotate page control SDK, you can easily select any page from a multi-page PDF document file, rotate selected PDF page to special
convert word pdf bookmarks; add bookmarks to pdf file
C# PDF Library SDK to view, edit, convert, process PDF file for C#
APIs for editing PDF document hyperlink (url) and quick navigation link in PDF bookmark. can be drawn and added to a specific location on PDF file page.
create pdf bookmarks; display bookmarks in pdf
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
p {
font-size: small;
color: navy;
}
Save the CSS file, and then click
Reload
(or
Refresh
)in your browser. With some
luck, you’ll be looking at a page like the one shown in Figure 3.7.
Figure 3.7. Applying subtle changes to the CSS to affect the font’s display
89
Adding Some Style
A New Look in a Flash!
We’ve introduced quite a few style declarations here. Let’s examine them in the
order in which they appear in the CSS file:
chapter3/website_files/07_blue_background/style1.css
(excerpt)
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
The
background-color
property can be applied to most elements on a web page,
and there are many different ways in which you can specify the color itself. One is
to use recognized color names
4
such as
navy
,
blue
,
red
,
yellow
,and so on. These
are easy to remember and spell, but you can be limited by the range. Another way
of referencing colors is to use a hexadecimal color specification. Yes, you’re right,
that does sound a little scary. I mean, just look at the code for it:
background-color: #e2edff;
It’s hardly intuitive, is it? This obscure-looking reference (
#e2edff
)translates to a
light shade of blue. But you could not, as a beginner, begin to guess what the color
was. Thankfully, there are numerous tools on the Web that let you choose a color
froma chart(often called acolor picker),and then give you the code to match. Take
alookatsomeofthese tools,and you’llsoon beabletofind thehexadecimalnumbers
you need to create your ideal color schemes.
5
4
http://reference.sitepoint.com/html/color-names
5
Agoodselection oflinks to color scheme toolsis availableathttp://www.clagnut.com/blog/260/.
Build Your Own Website The Right Way Using HTML & CSS
90
What the Heck’s Hex?
ColorsinHTMLcanbewrittenasahexadecimalcolorspecification.Hexadecimal
is that weird counting system that goes upto 16 instead of 10. That’sright: when
youcount in hexadecimal,there are not ten, but 16 digits. The hexadecimal se-
quence looks like this:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 …
After we reach9, we go through A, B, C,D, E, and Fbefore we hit 10. That gives
ussixextradigitstousewhenwecount.Soundconfusing?Well,asit so happens,
computers cancount in hexadecimal far better than humans can!
The key isthat all those numbersthat we know andlove in the decimal system,
like 2,748,15,000,000, and42,canbe represented inhexadecimal.AndTable 3.1
provesit!
Table 3.1. Decimal to Hexadecimal Conversion
Hexadecimal
Decimal
7
7
F
15
ABC
2,748
E4E1C0
15,000,000
2A
42
Whenacolorisexpressedasahexadecimal number,suchasff0000,that number
actually comprises three valuesjoined together.The values represent the propor-
tions of red(the ff part), green (the first two zeros),andblue (the secondtwo
zeros) that are mixedto create the specifiedcolor.Those three primary colorscan
be combined to display any color on the screen,similar to the way a television
set usesdifferent amounts of red,green, and blue to create a single dot onits
screen.
6
Inthisexample, ffis the value for red,while the green and blue values
are zero. It may not surprise you,then, to learn that #ff0000will give you the
color red.
6
Ifyouthoughtthe primary colorswerered, blue, and yellow, you’re not wrong! Headover to
http://en.wikipedia.org/wiki/Primary_colortolearnallabouttheadditiveandsubtractivemethods
of color mixing.
91
Adding Some Style
The
line-height
property is an interesting one. By increasing that value (we used
125% in our example), you can increase the space between lines of text—which
can greatly increase legibility. Try tweaking this value, saving your CSS file, and
seeing how the new value affects the text on your web page.
The
padding
property is used to provide space between the outside edge of the
element in question and the content that sits inside it. Because we’re referring to
the
body
element, you can think of the outside edge as being the top, bottom, and
sides of the browser’s viewport—the part of the browser where the web page is
viewable, excluding the browser’s tool bars, menus, or scroll bars. We’lltake a look
at
padding
in more detail in Chapter 4.
The value we’ve given to this property specifies how much space should exist
between theedgeof the viewportand the content. In this case, we’vespecified
15px
,
or 15 pixels. We mentioned pixels before, when we specified the size of an image,
but what is a pixel? Basically, one pixel is one of the tiny dots that make up what
you see on the computer screen. The screen itself is made up of hundreds of thou-
sands of these pixels, so a 15-pixel border will barely take up much space on your
screen!
Now, to the paragraph styles:
chapter3/website_files/07_blue_background/style1.css
(excerpt)
p {
font-size: small;
color: navy;
}
We’ve alreadyseen thatit’s possible to change the color oftextin a paragraph; now,
we’ll settle on the appropriate color of navy.
Let’s see what’s changed with the list-item style:
chapter3/website_files/07_blue_background/style1.css
(excerpt)
li {
font-size: small;
}
Build Your Own Website The Right Way Using HTML & CSS
92
The size of each list item has changed ever so slightly through our application of
the
font-size
property. Here, we’ve decided to set the font size using the
small
keyword, but we could just as easily have used the percentage or pixel methods.
As we’ve already seen, there are many ways to alter the look of your pages using
CSS! Font-size keywords range from
xx-small
to
xx-large
,and offer a quick way
to style text. Unfortunately, each browser implements font-size keywords slightly
differently, so there’s no guarantee that an
xx-large
font will render at the same
size in all browsers. Still, unless you’re extremely worried about precise sizing,
these keywords make a good starting point.
7
We’ve also introduced a new rule for the
h1
element (the main heading on our web
pages that displays the site name) and, once again, used a
font-size
property to
specify the size of the text (extra large!):
chapter3/website_files/07_blue_background/style1.css
(excerpt)
h1 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
The
h2
element also receives a minor makeover:
chapter3/website_files/07_blue_background/style1.css
(excerpt)
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
Browsers usually display headings in bold type, but we can have them display in
standard type by giving the
font-weight
property a value of
normal
.
7
For morereasons thanwehavespaceto discuss, text sizinginCSS isatopicthat causesheateddebate
in somecircles. As youbecome familiar withCSS, you may want to learnmoreaboutthe other text-
sizingtechniques that it offers. Agood placeto start is at SitePoint’s CSS discussionforum at
http://www.sitepoint.com/launch/cssforum/.
93
Adding Some Style
Documents you may be interested
Documents you may be interested