HTML and CSS: Digital Media Landscapes
Uploaded by
Tiffany Tick-Tick BoomHTML and CSS: Digital Media Landscapes
Uploaded by
Tiffany Tick-Tick BoomHTML / CSS
Slide 1
d i g i ta l m e d i a l a n d s c a p e s
HTML and CSS
HTML is fundamentally a language that defines content,
but its not great for styling content on a pageenter
CSS. CSS was introduced with HTML 4 to provide a
better way to style HTML elements. CSS stands for
Cascading Style Sheets.
HTML was never intended to contain tags for
formatting a document. It was intended to define
the content of a document, however tags like <font>,
and color attributes were added to the HTML 3.2
specification, it became a long and expensive to update
large websites. To solve this problem, the World Wide
Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the
HTML document, and stored in a separate CSS file. All
browsers support CSS today.
HTML / CSS
Slide 2
d i g i ta l m e d i a l a n d s c a p e s
Syntax
CSS has two parts: a selector and one more declarations:
h1 {color: blue; font-size: 12px}
selector
d e c l e r at i o n s
HTML / CSS
Slide 3
d i g i ta l m e d i a l a n d s c a p e s
Selectors
There are three types of selectors, id, classes and html elements
i d s e l e c t o r s s ta r t w i t h #
#container {text-align:center}
c l a s s s e l e c t o r s s ta r t w i t h .
.center {text-align:center}
html element selectors
p {text-align: center}
HTML / CSS
Slide 4
d i g i ta l m e d i a l a n d s c a p e s
Implementation
Inline
Using the style attribute in HTML elements
Internal
Using the <style> element in the <head> section
External
Using an external CSS file
HTML / CSS
Slide 5
d i g i ta l m e d i a l a n d s c a p e s
Inline Example
<!DOCTYPE html>
<html>
<body style=background-color:yellow;>
<h2 style=background-color:red;>This is a
heading</h2>
<p style=background-color:green;>This is a
paragraph.</p>
</body>
</html>
HTML / CSS
Slide 6
d i g i ta l m e d i a l a n d s c a p e s
Internal Example
<head>
<style type=text/css>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
HTML / CSS
Slide 7
d i g i ta l m e d i a l a n d s c a p e s
External Example
External style sheet is basically linked to in the head tag. Its
the most effective way to manage styles.
<head>
<link rel=stylesheet type=text/css
href=mystyle.css>
</head>
HTML / CSS
Slide 8
d i g i ta l m e d i a l a n d s c a p e s
Box Model
All HTML elements can be considered as boxes. In CSS, the
term box model is used when talking about design and
layout. The CSS box model is essentially a box that wraps
around HTML elements, and it consists of: margins, borders,
padding, and the actual content. The box model allows us to
place a border around elements and space elements in relation
to other elements.
Margin
Content
Border
Padding
HTML / CSS
Slide 9
d i g i ta l m e d i a l a n d s c a p e s
Box Model
Margin
Clears an area around the border. The margin does not
have a background color, it is completely transparent
To calculate the full width of an
element you have to include all the
elements above:
Border
A border that goes around the padding and content. The
border is affected by the background color of the box
Total element height = height + top
padding + bottom padding + top
border + bottom border + top margin
+ bottom margin
Padding
Clears an area around the content. The padding is
affected by the background color of the box
Content
The content of the box, where text and images appear
HTML / CSS
Slide 10
d i g i ta l m e d i a l a n d s c a p e s
Cascading and Nesting
CSS allows styles to cascade, which allows you to
build very robust style rules. For example:
p {text-align:center}
p.noCenter{text-align:left}
These two rules say all paragraphs should center
its text, but if a paragraph has a class called
noCenter than the text should be left aligned.
HTML / CSS
Slide 11
d i g i ta l m e d i a l a n d s c a p e s
Page Layout
Originally HTML used tables and the columns and
rows were manually manipulated to create the
structure. Now we use imaginary divisions called
divs. A div is an HTML element and is assigned
an id attribute.
The right selectors for the right attribute
Generally people assigns ids to divs, and classes
to html elements. Its an easy way to keep them
visually separated
HTML / CSS
Slide 12
d i g i ta l m e d i a l a n d s c a p e s
W3C
They release updates of HTML and CSS. They also set
the standards
HTML / CSS
Slide 13
d i g i ta l m e d i a l a n d s c a p e s
Browser Compatibility
Browser have their own rendering engine, so HTML/
CSS can be rendered differently across different
browsers. Safari, Chrome and Firefox are pretty
standards compliant, but Internet Explorer still has
some weird quirks so sometimes front end quicks have
to have ie hacks to get things to look right in IE. IE 6 and
7 were the worstwhole IE stylesheets had to be created
to make websites render right in those browsers.
HTML / CSS
Slide 14
d i g i ta l m e d i a l a n d s c a p e s
Inspecting Code
HTML / CSS is not protected, meaning you can see the
source code of any website. Modern browsers actually
allow you inspect the content and return the css rules for
the html elements.
HTML / CSS
Slide 15
d i g i ta l m e d i a l a n d s c a p e s
HTML Editors
There is no such things as pure WYSIWYG HTML
editor. In order to build a site that actually renders
correctly, you have to learn HTML/CSS. Understanding
how Dreamweaver works doesnt mean you write
markup. HTML editors exist to for efficiency.
HTML / CSS
Slide 16
d i g i ta l m e d i a l a n d s c a p e s
Common CSS Properties
background-color: #000000
color: #cccccc
font-family: Skolar, Georgia, Times-New Roman; sans-serif
font-size: 20px;
margin: 0 10 0 20;
float: left;
border: 1px solid #000000
height: 100px
weight: 20px
text-align: center;
HTML / CSS
Slide 17
d i g i ta l m e d i a l a n d s c a p e s
Web Fonts
CSS is being rendered real time by your browser this includes fonts.
So when a website specifics a typeface, the browser searches your
computer for that particular font. CSS uses a font stack so that if
your computer does not have the font, it defaults to the second,
third, etc... Given the vast number of typefaces in existence, its hard
to anticipate what fonts a user will have installed. This lead to the
creation of web safe fontsthese are typefaces that are on 99% of
computers. They include:
Serif
Georgia, Palatino Linotype, Times New Roman
Sans Serif
Arial, Helvetica, Comic Sans, Impact, Lucinda, Tahoma, Trebuchet,
Verdana
Monospace
Courier
