HTML and CSS basics

Lecture 2
CGS 3066 Fall 2016

September 15, 2016

Basics - Frimly Grasp It!!
Formatting

I You cannot change the output by adding extra spaces or lines

in HTML code. The browser will ignore whitespace.
I New horizontal line: <hr >
I New Line tag: <br >
I Whitespace: &nbsp
I There are a variety of ways to introduce tab spacing, most of
them using CSS.
Special formatting tags

Certain text usually has a conventional formatting, HTML has a

few special formatting tags, usueful especially for computer code.
I <pre>- for preformatted text. Forces the browser to render
white space as-is.
I <kbd>- for specifying keyboard input.
I <samp>- for specifying console output.
I <code>- for specifying computer code. Monotype font.
Ignores whitespace.
Text Formatting

I Use tags for formatting output.

I A list of formatting tags:
I <b>: defines bold text
I <i>: defines italic text
I <sub>: defines subscripted text
I <sup>: defines superscripted text
I <mark>: defines marked/highlighted text
Hyperlink

I The <a>tag defines hyperlink.

I A hyperlink is a word, group of words, or image that you can
click on to jump to another web page.
I The href is the most important attribute, which indicates the
links destination.
<a href=“http://www.google.com”>Go To Google </a>
I The target attribute specifies where to open the linked
document.
I blank: in a new window or tab
I self: in the same frame as it was clicked (default)
Images

I <img>tag is always an empty tag. It contains attributes and

has no closing tag.
I You need to use the src attribute. The value of this attribute
is the URL of the image.
Syntax: <img src=“sampleImage.JPEG” alt=“hint” >
I alt defines the text for an image when the image cannot be
displayed.
I The width and height attributes define the size of the image.
HTML Table Element

I To start off a tables, use the <table>

I A table consists of rows <tr>. Each row is divided into data
cells <td>(td stands for table data)
I A <td>tag can contain text, links, images, lists, forms, and
other tables.
HTML Lists

I Lists can be ordered and unordered.

I An unordered list starts with the <ul>tag.
I An ordered list starts with the <ol>tag.
I Each item starts with the <li>tag.
I A description list is a list of items with a description of each
term/name.
I The <dl>tag defines a description list. <dl>is used with
<dt>(defines items) and <dd>(describes each item).
Block and Inline Elements

I HTML elements are either block level elements or inline

elements.
I Block level Elements start with a new line.
E.g., <p>, <table>, <div>
I Inline elements are displayed without a new line.
E.g., <b>, <td>, <a>, <img>
<span>element

I <span>element is an inline element that can be used as a

container for text.
I <span>element usually is used to set style to parts of the
text.
DIV tag

I The <div>tag defines a division or a section in an HTML

document.
I The <div>tag is used to group block-elements to format
them with CSS.
CSS Syntax
I A CSS file consists of rule set, which define the presentation
element for a particular part of the HTML document.
I A CSS rule set consists of a selector and a declaration block.
I A Rule Set has a selector and a declaration block.
I The declaration block is enclosed in { }.
I The declaration block contains one or more declarations
separated by semicolons.
I Each declaration includes a property name and a value,
separated by a colon.
I To make the CSS code more readable, you can put one
declaration on each line.
CSS Comments

I CSS comments follow the multiline C comment syntax.

I A CSS comment starts with /* and ends with */.
I Comments can also span multiple lines and are ignored by
browsers.
I Single line comments can start with “//”.
CSS Selectors

I CSS selectors allow you to select and manipulate HTML

elements.
I They are used to “find” HTML elements based on id, classes,
types, attributes, values of attributes, etc.
I Typically, selectors are one of 3 kinds:
I id selector
I element selector
I class selector
Element Selector

I The element selector selects elements based on the element

name.
I Applied to all elements with the same name (tag).
I Example:
p{
text-align: center;
color: red;
}
ID Selector

I The id selector uses the id attribute of an HTML tag to find

the specific element.
I An id should be unique within a page.
I To find an element with a specific id, write the character
formerly known as the pound (#), followed by the id of the
element.
I Example
#para1 {
text-align: center;
color: red;
}
Class Selector

I The class selector finds elements with the specific class.

I The class selector uses the HTML class attribute.
I To find elements with a specific class, write a period
character, followed by the name of the class.
I Example:
.center {
text-align: center;
color: red;
}
I You can also specify that only specific HTML elements should
be affected by a class.
I p.center {
text-align: center;
color: red;
}
Grouping Selectors

I In style sheets there are often elements with the same style.
I In the interest of code minimization, we can group selectors.
I Selectors are separated by commas.
I Example:
h1, h2, p {
text-align: center;
color: red;
}
Adding CSS to your HTML document

There are 3 ways to do styling

I Inline Style - Style elements are included as HTML attributes.
I Internal Style Sheets - A <style>tag is used in the HTML
document to specify the presentation elements. External
Style Sheets - A separate “.css” file is used as a part of your
set of documents. It contains all the styling elements.
Inline CSS

I What little styling weve been doing so far.

I Mixes content with presentation. Loses many of the
advantages of a style sheet.
I Used very rarely (when very few elements require styling).
I Add the style attribute to the relevant tag. The style attribute
can contain any CSS property.
I Example:
<h1 style=“color:blue; margin-left:30px;”>This is a heading.
</h1>
Internal CSS
I Used when the current document has a unique style.
I A <style>tag is used under the <head>tag of the document
to define the styles.
I The content of the <style>tag follows CSS syntax.
I Example:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
External CSS

I Used when a style is applied to many pages (like a theme).

I The look of the webpage can be changed by just changing one
file.
I Each page must include a link to the style sheet with the
<link>tag. The <link>tag goes inside the head section.
I An external stylesheet is written as a separate file with a
“.css” extension.
I The file should go into the same relative path as the rest of
the files (or can be referred by absolute path).
I The external stylesheet should not contain any HTML tags.
External Stylesheet Example

I myStyle.css

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
I In the head tag of the HTML document

<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head>
Why “Cascading”?

I Multiple styles will cascade into one.

I Styles can be specified:
I inside an HTML element
I inside the head section of an HTML page
I in an external CSS file
I Generally speaking we can say that all the styles will
“cascade” into a new “virtual” style sheet by the following
rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. Internal style sheet (in the head section)
3. External style sheet
4. Browser default