HTML and CSS PDF

HTML and CSS
What are Html & CSS?

HTML, HyperText Markup Language, gives content structure and meaning by
defining that content as, for example, headings, paragraphs, or images. CSS, or
Cascading Style Sheets, is a presentation language created to style the
appearance of contentusing, for example, fonts or colors.
The two languagesHTML and CSSare independent of one another and

should remain that way. CSS should not be written inside of an HTML document
and vice versa. As a rule, HTML will always represent content, and CSS will
always represent the appearance of that content.
1 HTML
UNDERSTANDING COMMON HTML TERMS

1.1.1 Elements
Elements are designators that define the structure and content of objects within
a page. Some examples are
<h1>, <h2>, , <h6> <table>,<th>, <tr>, <td>
(headings) <ul>, <ol>, <li>
<p> (paragraph) <html>, <head>, <body>
<a> (anchor) <section>
<div> (division) <article>
<span> <header>, <footer>
<strong> <img>, <video>, <audio>
<em> <iframe>, <object>, <embed>

Elements are identified by the use of less-than and greater-than angle
brackets, < >, surrounding the element name.
1.1.2 Tags
The use of less-than and greater-than angle brackets surrounding an element

creates what is known as a tag. Tags most commonly occur in pairs of opening
and closing tags.
The content that falls between the opening and closing tags is the content of
that element. An anchor link, for example, will have an opening tag of <a> and a
closing tag of </a>. What falls between these two tags will be the content of the
anchor link.
1.1.3 Attributes
Attributes are properties used to provide additional information about an

element. The most common attributes include the id attribute, which identifies
an element; the class attribute, which classifies an element; the src attribute,
which specifies a source for embeddable content; and the href attribute, which
provides a hyperlink reference to a linked resource.
So putting this all together, we get:
SETTING UP THE HTML DOCUMENT STRUCTURE
HTML documents are plain text documents saved with an .html file extension rather than
a .txt file extension.
All HTML documents have a required structure that includes the following declaration and
elements: <!DOCTYPE html>, <html>, <head>, and <body>.
The document type declaration, or <!DOCTYPE html>, informs web browsers which version
of HTML is being used and is placed at the very beginning of the HTML document. Because
well be using the latest version of HTML, our document type declaration is
simply <!DOCTYPE html>. Following the document type declaration, the<html> element
signifies the beginning of the document.
Inside the <html> element, the <head> element identifies the top of the document,
including any metadata (accompanying information about the page). The content inside
the <head> element is not displayed on the web page itself. Instead, it may include the
document title (which is displayed on the title bar in the browser window), links to any
external files, or any other beneficial metadata.
All of the visible content within the web page will fall within the <body> element. A
breakdown of a typical HTML document structure looks like this:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Hello World</title>
6 </head>
7 <body>
8 <h1>Hello World</h1>
9 <p>This is a web page.</p>
10 </body>
11 </html>
12
ATTRIBUTES
In the previous example, the <meta> element had only one tag and didnt include a closing
tag. Fear not, this was intentional. Not all elements consist of opening and closing tags.
Some elements simply receive their content or behavior from attributes within a single tag.
The <meta> element is one of these elements. The content of the previous <meta> element
is assigned with the use of the charset attribute and value. Other common selfclosing
elements include
<br> <input> <source>

<embed> <link> <wbr>
<hr> <meta>
<img> <param>
IDENTIFYING DIVISIONS & SPANS
Divisions, or <div>s, and <span>s are HTML elements that act as containers solely
for styling purposes. As generic containers, they do not come with any overarching
meaning or semantic value. Paragraphs are semantic in that content wrapped within
a<p> element is known and understood as a paragraph. <div>s and <span>s do not
hold any such meaning and are simply containers.
Block vs. Inline Elements
Most elements are either block- or inline-level elements. Whats the difference?
Block-level elements begin on a new line, stacking one on top of the other, and occupy any
available width. Block-level elements may be nested inside one another and may wrap
inline-level elements. Well most commonly see block-level elements used for larger pieces
of content, such as paragraphs.
Inline-level elements do not begin on a new line. They fall into the normal flow of a
document, lining up one after the other, and only maintain the width of their content.
Inline-level elements may be nested inside one another; however, they cannot wrap block-
level elements. Well usually see inline-level elements with smaller pieces of content, such
as a few words.
Both <div>s and <span>s, however, are extremely valuable when building a website in that
they give us the ability to apply targeted styles to a contained set of content.
A <div> is a block-level element that is commonly used to identify large groupings of

content, and which helps to build a web pages layout and design. A <span>, on the other
hand, is an inline-level element commonly used to identify smaller groupings of text within
a block-level element.
Well commonly see <div>s and <span>s with class or id attributes for styling purposes.
Choosing a class or id attribute value, or name, requires a bit of care. We want to choose
a value that refers to the content of an element, not necessarily the appearance of an
element.
For example, if we have a <div> with an orange background that contains social media
links, our first thought might be to give the <div> a class value of orange. What happens
if that orange background is later changed to blue? Having a class value of orange no
longer makes sense. A more sensible choice for a class value would be social, as it
pertains to the contents of the <div>, not the style.
1 

2 <div class="social">
3 <p>I may be found on...</p>
4 <p>Additionally, I have a profile on...</p>
5 </div>
6
7 
8 <p>Soon we'll be <span class="tooltip">writing HTML</span> with the best
9 of them.</p>
TEXT-BASED ELEMENTS
1.4.1 Headings
Headings are block-level elements, and they come in six different

rankings, <h1>through <h6>. Headings help to quickly break up content and establish
hierarchy, and they are key identifiers for users reading a page. They also help search
engines to index and determine the content on a page.
<h1>Heading Level 1</h1>

1.4.2 Paragraphs
Headings are often followed by supporting paragraphs. Paragraphs are defined using
the <p> block-level element. Paragraphs can appear one after the other, adding information
to a page as desired. Here is example of how to set up paragraphs.
1 <p>Steve Jobs was a co-founder and longtime chief executive officer at

2 Apple. On June 12, 2005, Steve gave the commencement address at Stanford
3 University.</p>
4
<p>In his address Steve urged graduates to follow their dreams and,
despite any setbacks, to never give up–advice which he sincerely
took to heart.</p>
BUILDING STRUCTURE
For the longest time the structure of a web page was built using divisions. The problem
was that divisions provide no semantic value, and it was fairly difficult to determine the
intention of these divisions. Fortunately HTML5 introduced new structurally based
elements, including the <header>, <nav>, <article>, <section>, <aside>,
and <footer>elements.
All of these new elements are intended to give meaning to the organization of our pages
and improve our structural semantics. They are all block-level elements and do not have
any implied position or style. Additionally, all of these elements may be used multiple
times per page, so long as each use reflects the proper semantic meaning.
Lets roll up our sleeves and take a closer look.

1.5.1 Header
The <header> element, like it sounds, is used to identify the top of a page, article, section,
or other segment of a page. In general, the <header> element may include a heading,
introductory text, and even navigation.
1 <header>...</header>
2
<header> vs. <head> vs. <h1> through <h6> Elements
It is easy to confuse the <header> element with the <head> element or the heading
elements, <h1> through <h6>. They all have different semantic meanings and should be
used according to their meanings. For reference
The <header> element is a structural element that outlines the heading of a segment of a
page. It falls within the <body> element.
The <head> element is not displayed on a page and is used to outline metadata, including
the document title, and links to external files. It falls directly within the <html> element.
Heading elements, <h1> through <h6>, are used to designate multiple levels of text
headings throughout a page.
1.5.2 Navigation
The <nav> element identifies a section of major navigational links on a page.

The <nav>element should be reserved for primary navigation sections only, such as global
navigation, a table of contents, previous/next links, or other noteworthy groups of
navigational links.
Most commonly, links included within the <nav> element will link to other pages within the
same website or to parts of the same web page. Miscellaneous one-off links should not be
wrapped within the <nav> element; they should use the anchor element, <a>, and the
anchor element alone.
1 <nav>...</nav>
2
1.5.3 Article
The <article> element is used to identify a section of independent, self-contained content

that may be independently distributed or reused. Well often use the <article>element to
mark up blog posts, newspaper articles, user-submitted content, and the like.
When deciding whether to use the <article> element, we must determine if the content
within the element could be replicated elsewhere without any confusion. If the content
within the <article> element were removed from the context of the page and placed, for
example, within an email or printed work, that content should still make sense.
1 <article>...</article>
2
1.5.4 Section
The <section> element is used to identify a thematic grouping of content, which generally,
but not always, includes a heading. The grouping of content within the<section> element
may be generic in nature, but its useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
1 <section>...</section>
2
Deciding Between <article>, <section>, or <div> Elements
At times it becomes fairly difficult to decide which element<article>, <section>,

or<div>is the best element for the job based on its semantic meaning. The trick here, as
with every semantic decision, is to look at the content.
Both the <article> and <section> elements contribute to a documents structure and
help to outline a document. If the content is being grouped solely for styling purposes and
doesnt provide value to the outline of a document, use the <div> element.
If the content adds to the document outline and it can be independently redistributed or
syndicated, use the <article> element.
If the content adds to the document outline and represents a thematic group of content,
use the <section> element.
1.5.5 Aside
The <aside> element holds content, such as sidebars, inserts, or brief explanations, which
is tangentially related to the content surrounding it. When used within
an <article>element, for example, the <aside> element may identify content related to
the author of the article.
We may instinctively think of an <aside> element as an element that appears off to the left
or right side of a page. We have to remember, though, that all of the structural elements,
including the <aside> element, are block-level elements and as such will appear on a new
line, occupying the full available width of the page or of the element they are nested
within, also known as their parent element.
1 <aside>...</aside>
2
1.5.6 Footer
The <footer> element identifies the closing or end of a page, article, section, or other
segment of a page. Generally the <footer> element is found at the bottom of its parent.
Content within the <footer> element should be relative information and should not
diverge from the document or section it is included within.
1 <footer>...</footer>
2
CREATING HYPERLINKS
Along with text, one of the core components of the Internet is the hyperlink, which
provides the ability to link from one web page or resource to another. Hyperlinks are
established using the anchor, <a>, inline-level element. In order to create a link from one
page (or resource) to another, the href attribute, known as a hyperlink reference, is
required. The href attribute value identifies the destination of the link.
For example, clicking the text Shay, which is wrapped inside the anchor element with
the href attribute value of http://shayhowe.com, will take users to a website.
1 <a href="http://shayhowe.com">Shay</a>
2
1.6.1 Relative & Absolute Paths
The two most common types of links are links to other pages of the same website and links
to other websites. These links are identified by their href attribute values, also known as
their paths.
Links pointing to other pages of the same website will have a relative path, which does not
include the domain (.com, .org, .edu, etc.) in the href attribute value. Because the link is
pointing to another page on the same website, the href attribute value needs to include
only the filename of the page being linked to: about.html, for example.
Linking to other websites outside of the current one requires an absolute path, where
the href attribute value must include the full domain. A link to Google would need the
href attribute value of http://google.com, starting with http and including the
domain,.com in this case.
Here clicking on the text About will open the about.html page inside our browser.
Clicking the text Google, on the other hand, will open http://google.com/ within our
browser.
1 

2 <a href="/about.html">About</a>
3
4 
5 <a href="http://www.google.com/">Google</a>
6
1.6.2 Linking to an Email Address
Occasionally we may want to create a hyperlink to our email addressfor example,

hyperlink text that says Email Me, which when clicked opens a users default email client
and pre-populates part of an email. At a minimum the email address to which the email is
being sent is populated; other information such as a subject line and body text may also be
included.
To create an email link, the href attribute value needs to start with mailto: followed by
the email address to which the email should be sent. To create an email link to
shay@awesome.com, for example, the href attribute value would be
mailto:shay@awesome.com.
1.6.3 Opening Links in a New Window
One feature available with hyperlinks is the ability to determine where a link opens when
clicked. Typically, links open in the same window from which they are clicked; however,
links may also be opened in new windows.
To trigger the action of opening a link in a new window, use the target attribute with a
value of _blank. The target attribute determines exactly where the link will be displayed,
and the _blank value specifies a new window.
To open http://shayhowe.com/ in a new window, the code would look like this:
1 <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

2
1.6.4 Linking to Parts of the Same Page
We can create an on-page link by first setting an id attribute on the element we wish to link
to, then using the value of that id attribute within an anchor elements href attribute.
Using the Back to top link as an example, we can place an id attribute value of top on
the <body> element. Now we can create an anchor element with an href attribute value
of #top, pound sign and all, to link to the beginning of the <body> element.
Our code for this same-page link would look like the following:
1 <body id="top">
2 ...
3 <a href="#top">Back to top</a>
4 ...
5 </body>
USING CSS AND JAVASCRIPT IN HTML

1.7.1 CSS
CSS code can be added to our HTML pages between <style type=text/css> and </style>
tags. This tags can be placed either in the <head> or in the <body> of our page.
1 <body>
2 ...
3 <style type=text/css>
4 div { background: green; }
5 </style>
6 ...
7 </body>
Another method of styling elements is using CSS inline, as value of style attribute.
1 

2 <div style=background:green>
3 <p>I may be found on...</p>
4 <p>Additionally, I have a profile on...</p>
5 </div>
1.7.2 JavaScript
JavaScript code can be added to our HTML pages between <script type=text/javascript>
and </script> tags. This tags can be placed either in the <head> or in the <body> of our
page.
1 <body>
2 ...
3 <script type=text/javascript>
4 alert(This is JavaScript!);
5 </script>
6 ...
7 </body>
Loading External resources
Some websites might become really large, and putting all the code in one file is not the
best idea. A good practice is to separate html code from CSS and JS code, so we can place
the CSS and JS code in separate files and load them in HTML.
1.7.3 Loading external CSS
We use the <link> tag to load external CSS into our HTML file.
<link href="/style.css" type="text/css" rel="stylesheet" />
1.7.4 Loading external JS
We use the <script> tag to load external JavaScript code into our HTML file.
<script src="/script.js" type="text/javascript"></script>

2 GETTING TO KNOW CSS
INTRODUCTION TO CSS
CSS is a complex language that packs quite a bit of power.
It allows us to add layout and design to our pages, and it allows us to share those styles
from element to element and page to page. Before we can unlock all of its features,
though, there are a few aspects of the language we must fully understand.
A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content
from its style. As always you use your (X)HTML file to arrange the content, but all of the
presentation (fonts, colors, background, borders, text formatting, link effects & so on)
are accomplished within a CSS.
At this point you have some choices of how to use the CSS, either internally or externally.
2.1.1 Internal Stylesheet
First we will explore the internal method. This way you are simply placing the CSS code
within the <head></head> tags of each (X)HTML file you want to style with the CSS. The
format for this is shown in the example below.
<head>
<title><title>
<style type=text/css>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page.
Meaning that any changes you want to make to one page, will have to be made to all. This
method can be good if you need to style only one page, or if you want different pages to
have varying styles.
2.1.2 External Stylesheet
Next we will explore the external method. An external CSS file can be created with any text
or HTML editor such as Notepad or Dreamweaver. A CSS file contains no (X)HTML, only
CSS. You simply save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every (X)HTML file you want to
style with the CSS file.
<link rel=stylesheet type=text/css href=Path To stylesheet.css />
Or you can also use the @import method as shown below
<style type=text/css>@import url(Path To stylesheet.css)</style>
Either of these methods are achieved by placing one or the other in the head section as
shown in example below.
<head>
<title><title>
<link rel=stylesheet type=text/csshref=style.css />
</head>
<body>
or
<head>
<title><title>
<style type=text/css> @import url(Path To stylesheet.css)</style>
</head>
<body>
By using an external style sheet, all of your (X)HTML files link to one CSS file in order to
style the pages. This means, that if you need to alter the design of all your pages, you only
need to edit one .css file to make global changes to your entire website.
Here are a few reasons this is better.
Easier Maintenance
Reduced File Size
Reduced Bandwidth
Improved Flexibility
2.1.3 Cascading Order
In the previous paragraphs, I have explained how to link to a css file either internally or
externally. If you understood, than I am doing a good job. If not dont fret, there is a long
way to go before we are finished. Assuming you have caught on already, you are probably
asking, well can I do both? The answer is yes. You can have both internal, external, and
now wait a minute a third way? Yes inline styles also.
2.1.4 Inline Styles
I have not mentioned them until now because in a way they defeat the purpose of using
CSS in the first place. Inline styles are defined right in the (X)HTML file along side the
element you want to style. See example below.
<p style=color: #ff0000;>Some red text</p>
Inline styles will NOT allow the user to change styles of elements or text formatted this way
2.1.5 So, which is better?
So with all these various ways of inserting CSS into your (X)HTML files, you may now be
asking well which is better, and if I use more than one method, in what order do these
different ways load into my browser?
All the various methods will cascade into a new pseudo stylesheet in the following order:
1. Inline Style (inside (X)HTML element)

2. Internal Style Sheet (inside the <head> tag)
3. External Style Sheet
CSS SYNTAX
The syntax for CSS is different than that of (X)HTML markup. Though it is not too
confusing, once you take a look at it. It consists of only 3 parts.
selector { property: value }

The selector is the (X)HTML element that you want to style. The property is the actual
property title, and the value is the style you apply to that property.
Each selector can have multiple properties, and each property within that selector can have
independent values. The property and value are separated with a colon and contained
within curly brackets. Multiple properties are separated by a semi colon. Multiple values
within a property are sperated by commas, and if an individual value contains more than
one word you surround it with quotation marks. As shown below.
body {
background: #eeeeee;
font-family: Trebuchet MS, Verdana, Arial, serif;
INHERITANCE
When you nest one element inside another, the nested element will inherit the properties
assigned to the containing element. Unless you modify the inner elements values
independently.
For example, a font declared in the body will be inherited by all text in the file no matter
the containing element, unless you declare another font for a specific nested element.
body {font-family: Verdana, serif;}
Now all text within the (X)HTML file will be set to Verdana.
If you wanted to style certain text with another font, like an h1 or a paragraph then you
could do the following.
h1 {font-family: Georgia, sans-serif;}

p {font-family: Tahoma, serif;}
Now all <h1> tags within the file will be set to Georgia and all <p> tags are set to Tahoma,
leaving text within other elements unchanged from the body declaration of Verdana.
There are instances where nested elements do not inherit the containing elements
properties.
For example, if the body margin is set to 20 pixels, the other elements within the file will
not inherit the body margin by default.
body {margin: 20px;}
COMBINING SELECTORS
You can combine elements within one selector in the following fashion.
h1, h2, h3, h4, h5, h6 {

color: #009900;
font-family: Georgia, sans-serif;
}
As you can see in the above code, I have grouped all the header elements into one selector.
Each one is separated by a comma. The final result of the above code sets all headers to
green and to the specified font. If the user does not have the first font I declared it will go
to another sans-serif font the user has installed on their computer.
CSS CLASSES
The class selector allows you to style items within the same (X)HTML element differently.
Similiar to what I mentioned in the introduction about inline styles. Except with classes the
style can be overwritten by changing out stylesheets. You can use the same class selector
again and again within an (X)HTML file.
To put it more simply, this sentence you are reading is defined in my CSS file with the
following.
p{
font-size: small;
color: #333333
}
Pretty simple, but lets say that I wanted to change the word sentence to green bold text,
while leaving the rest of the sentence untouched. I would do the following to my (X)HTML
file.
<p>
To put it more simply, this <span class=greenboldtext>sentence</span> you are
reading is styled in my CSS file by the following.
</p>
Then in my CSS file I would add this style selector:
.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}
Please note that a class selector begins with a (.) period. The reason I named it
greenboldtext is for example purposes, you can name it whatever you want. Though I do
encourage you to use selector names that are descriptive. You can reuse the
greenboldtext class as many times as you want.
CSS IDS
IDs are similar to classes, except once a specific id has been declared it cannot be used
again within the same (X)HTML file.
I generally use IDs to style the layout elements of a page that will only be needed once,
whereas I use classes to style text and such that may be declared multiple times.
The main container for this page is defined by the following.
<div id=container>
Everything within my document is inside this division.
</div>
I have chosen the id selector for the container division over a class, because I only need
to use it one time within this file.
Then in my CSS file I have the following:
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
CSS BOX-MODEL
In a document, each element is represented as a rectangular box. Determining the size,

properties like its color, background, borders aspect and the position of these boxes
is the goal of the rendering engine.
In CSS, each of these rectangular boxes is described using the standard box model. This
model describes the content of the space taken by an element. Each box has four edges:
the margin edge, border edge, padding edge, and content edge.
The content area is the area containing the real content of the element. It often has a
background, a color or an image (in that order, an opaque image hiding the background
color) and is located inside the content edge; its dimensions are the content width, or
content-box width, and the content height, or content-box height.
If the CSS box-sizing property is set to default, the CSS properties width, min-width, max-
width, height, min-height and max-height control the content size.
The padding area extends to the border surrounding the padding. When the content area
has a background, color, or image set on it, this will extend into the padding, which is why
you can think of the padding as extending the content. The padding is located inside the
padding edge, and its dimensions are the padding-box width and the padding-box height.
The space between the padding and the content edge can be controlled using the padding-
top, padding-right, padding-bottom, padding-left and the shorthand padding CSS
properties.
The border area extends the padding area to the area containing the borders. It is the area
inside the border edge, and its dimensions are the border-box width and the border-box
height. This area depends on the size of the border that is defined by the border-width
property or the shorthand border.
The margin area extends the border area with an empty area used to separate the element
from its neighbors. It is the area inside the margin edge, and its dimensions are the
margin-box width and the margin-box height.
The size of the margin area is controlled using the margin-top, margin-right, margin-
bottom, margin-left and the shorthand margin CSS properties.
POSITIONING
The position property (as you may have guessed) changes how elements are positioned on
your webpage.
position: value;
Values:
a) static
b) relative
c) absolute
d) fixed
Now, what does all that mean?

2.8.1 Static
Static positioning is by default the way an element will appear in the normal flow of your
(X)HTML file. It is not necessary to declare a position of static. Doing so, is no different
than not declaring it at all.
position: static;
2.8.2 Relative
Positioning an element relatively places the element in the normal flow of your (X)HTML file
and then offsets it by some amount using the properties left, right, top and bottom. This
may cause the element to overlap other elements that are on the page, which of course
may be the effect that is required.
position: relative;
2.8.3 Absolute
Positioning an element absolutely, removes the element from the normal flow of your
(X)HTML file, and positions it to the top left of its nearest parent element that has a
position declared other than static. If no parent element with a position other than static
exists then it will be positioned from the top left of the browser window.
position: absolute;
2.8.4 Fixed
Positioning an element with the fixed value, is the same as absolute except the parent
element is always the browser window. It makes no difference if the fixed element is
nested inside other positioned elements.
Furthermore, an element that is positioned with a fixed value, will not scroll with the
document. It will remain in its position regardless of the scroll position of the page.
At this time IE6 (Internet Explorer 6) does not support the fixed value for the positioning of
an element. Thus it will not position fixed elements correctly and will still scroll with the
page. To see this effect in action you will need to use a standards compliant browser, such
as Firefox 1.0
position: fixed;
When positioning elements with relative, absolute or fixed values the following properties
are used to offset the element:
top
left
right
bottom
position: absolute; top: 10px; right: 10px;
MARGINS
As you may have guessed, the margin property declares the margin between an (X)HTML
element and the elements around it. The margin property can be set for the top, left, right
and bottom of an element. (see example below)
margin-top: length percentage or auto;

margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;
As you can also see in the above example you have 3 choices of values for the margin
property
length
percentage
auto
You can also declare all the margins of an element in a single property as follows:
margin: 10px 10px 10px 10px;
If you declare all 4 values as I have above, the order is as follows:
1. top
2. right
3. bottom
4. left
If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;
If you only declare two or three values, the undeclared values are taken from the opposing
side. (see below)
margin: 10px 10px; /* 2 values */

margin: 10px 10px 10px; /* 3 values */
You can set the margin property to negative values. If you do not declare the margin value
of an element, the margin is 0 (zero).
margin: -10px;
Elements like paragraphs have default margins in some browsers, to combat this set the
margin to 0 (zero).
p {margin: 0;}
Padding is the distance between the border of an (X)HTML element and the content within
it.
Most of the rules for margins also apply to padding, except there is no auto value, and
negative values cannot be declared for padding.
PADDING
Padding is the distance between the border of an (X)HTML element and the content within
it.
Most of the rules for margins also apply to padding, except there is no auto value, and
negative values cannot be declared for padding.
WIDTH AND HEIGHT PROPERTIES

2.11.1 Height
You can control the height of an element with the height property
height: value;
Values:
auto
length
percentage
2.11.2 Line Height
You can control the height between lines with the line-heightproperty
line-height: value;
Values:
normal
number
length
percentage
2.11.3 Max Height
You can control the maximum height of an element with the max-height property
max-height: value;
Values:
none
length
percentage
2.11.4 Min Height
You can control the minimum height of an element with the min-height property
min-height: value;
Values:
length
percentage
2.11.5 Width
You can control the width of an element with the width property
width: value;
Values:
auto
length
percentage
2.11.6 Max Width
You can control the maximum width of an element with the max-width property
max-width: value;
Values:
none
length
percentage
2.11.7 Min Width
You can control the minimum width of an element with the min-width property
min-width: value;
Values:
length
percentage
TEXT PROPERTIES
2.12.1 Color
You can set the color of text with the following:
color: value;
Possible values are
color name example:(red, black)

hexadecimal number example:(#ff0000, #000000)
RGB color code example:(rgb(255, 0, 0), rgb(0, 0, 0))
2.12.2 Letter Spacing
You can adjust the space between letters in the following manner. Setting the value to 0,
prevents the text from justifying. You can use negative values.
letter-spacing: value;
Possible values are
normal
length
2.12.3 Text Align
You can align text with the following:
text-align: value;
Possible values are
left
right
center
justify
2.12.4 Text Decoration
You can decorate text with the following:
text-decoration: value;
Possible values are
none
underline
overline
line through
blink
2.12.5 Text Indent
You can indent the first line of text in an (X)HTML element with the following:
text-indent: value;
Possible values are
length
percentage
2.12.6 Text Transform
You can control the size of letters in an (X)HTML element with the following:
text-transform: value;
Possible values are
none
capitalize
lowercase
uppercase
Examples:
This First Letter In Each Word Is Capitalized, Though It Is Not In My File.
THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE.
this text is all lowercase. though it is all uppercase in my file.
2.12.7 White Space
You can control the whitespace in an (X)HTML element with the following:
white-space: value;
Possible values are
normal
pre
nowrap
2.12.8 Word Spacing
You can adjust the space between words in the following manner. You can use negative
values.
word-spacing: value;
Possible values are
normal
length
FONT PROPERTIES
2.13.1 Font
The font property can set the style, weight, variant, size, line height and font:
font: italic bold normal small/1.4em Verdana, sans-serif;

The above would set the text of an element to an italic style a bold weight a normal variant
a relative size a line height of 1.4em and the font to Verdana or another sans-serif
typeface.
2.13.2 Font-Family
You can set what font will be displayed in an element with thefont-family property.
There are 2 choices for values:
family-name
generic family
If you set a family name it is best to also add the generic family at the end. As this is a
priortized list. So if the user does not have the specified font name it will use the same
generic family. (see below)
font-family: Verdana, sans-serif;
2.13.3 Font Size
You can set the size of the text used in an element by using thefont-size property.
font-size: value;
There are a lot of choices for values:
xx-large
x-large
larger
large
medium
small
smaller
x-small
xx-small
length
% (percent)
2.13.4 Font Style
You can set the style of text in a element with the font-styleproperty
font-style: value;
Possible values are
normal
itailc
oblique
2.13.5 Font Variant
You can set the variant of text within an element with the font-variant property
font-variant: value;
Possible values are
normal
small-caps
2.13.6 Font Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;
Possible values are
lighter
normal
100
200
300
400
500
600
700
800
900
bold
bolder
BACKGROUNDS
2.14.1 Background
You can style the background of an element in one declaration with

the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
Values:
attachment
color
image
position
repeat
Or you can set each property individually
2.14.2 Background Attachment
If you are using an image as a background. You can set whether the background scrolls
with the page or is fixed when the user scrolls down the page with the background-
attachment property
background-attachment: value;
Values:
fixed
scroll
2.14.3 Background Color
You can specifically declare a color for the background of an element using
the background-color property.
background-color: value;
Values:
color name
hexadecimal number
RGB color code
transparent
2.14.4 Background Image
You can set an image for the background of an element using the background-
image property.
background-image: url(path_to_image);
Values:
url
none
2.14.5 Background Position
You can position an image used for the background of an element using the background-
position property.
background-position: value;
Values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
2.14.6 Background Repeat
You can set if an image set as a background of an element is to repeat

(across=x and/or down=y) the screen using thebackground-repeat property.
background-repeat: value;
Values:
no-repeat
repeat
repeat-x
repeat-y
OTHER FREQUENTLY USED CSS PROPERTIES

Heres a list of frequently used CSS properties you should also look into:
Display Pseudo classes (selector)

Float Pseudo elements (selector)
Clear List-style
Cursor Box-radius
Overflow Box-shadow
Visibility CSS transitions
Z-index CSS gradient
Border
3 RESOURCES
Heres a list of resources that can help you learn the basics of HTML and CSS:
http://learn.shayhowe.com/html-css/
http://www.cssbasics.com/
http://www.codecademy.com/learn
https://developer.mozilla.org/en-US/docs/Web/HTML
https://developer.mozilla.org/en-US/docs/Web/CSS
For questions: http://stackoverflow.com/

HTML and CSS PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML and CSS PDF

Hochgeladen von

Copyright:

Verfügbare Formate

HTML and CSS

What are Html & CSS?

The two languagesHTML and CSSare independent of one another and

UNDERSTANDING COMMON HTML TERMS

<h1>, <h2>, , <h6> <table>,<th>, <tr>, <td>

(headings) <ul>, <ol>, <li>

<p> (paragraph) <html>, <head>, <body>

<a> (anchor) <section>

<div> (division) <article>

<span> <header>, <footer>

<strong> <img>, <video>, <audio>

<em> <iframe>, <object>, <embed>

The use of less-than and greater-than angle brackets surrounding an element

Attributes are properties used to provide additional information about an

So putting this all together, we get:

SETTING UP THE HTML DOCUMENT STRUCTURE

<br> <input> <source>

Block vs. Inline Elements

A <div> is a block-level element that is commonly used to identify large groupings of

1

Headings are block-level elements, and they come in six different

<h1>Heading Level 1</h1>

1 <p>Steve Jobs was a co-founder and longtime chief executive officer at

Lets roll up our sleeves and take a closer look.

<header> vs. <head> vs. <h1> through <h6> Elements

The <nav> element identifies a section of major navigational links on a page.

The <article> element is used to identify a section of independent, self-contained content

At times it becomes fairly difficult to decide which element<article>, <section>,

1.6.1 Relative & Absolute Paths

1

1.6.2 Linking to an Email Address

Occasionally we may want to create a hyperlink to our email addressfor example,

1.6.3 Opening Links in a New Window

1 <a href="http://shayhowe.com/" target="_blank">Shay Howe</a>

1.6.4 Linking to Parts of the Same Page

USING CSS AND JAVASCRIPT IN HTML

1

1.7.3 Loading external CSS

<link href="/style.css" type="text/css" rel="stylesheet" />

1.7.4 Loading external JS

<script src="/script.js" type="text/javascript"></script>

CSS is a complex language that packs quite a bit of power.

2.1.1 Internal Stylesheet

<link rel=stylesheet type=text/css href=Path To stylesheet.css />

Or you can also use the @import method as shown below

<style type=text/css>@import url(Path To stylesheet.css)</style>

Here are a few reasons this is better.

2.1.3 Cascading Order

2.1.4 Inline Styles

<p style=color: #ff0000;>Some red text</p>

2.1.5 So, which is better?

1. Inline Style (inside (X)HTML element)

selector { property: value }

font-family: Trebuchet MS, Verdana, Arial, serif;

body {font-family: Verdana, serif;}

h1 {font-family: Georgia, sans-serif;}

body {margin: 20px;}

h1, h2, h3, h4, h5, h6 {

Then in my CSS file I would add this style selector:

The main container for this page is defined by the following.

Then in my CSS file I have the following:

In a document, each element is represented as a rectangular box. Determining the size,

Now, what does all that mean?