Web 102 INtro to CSS

Outline
• Review of HTML Elements
• What is CSS?
• What can you do with CSS?
• CSS Selectors
• Cascading Selectors
• Pseudo Classes
• Linking your CSS file

Learning Outcomes
• Basic understanding of web design with HTML
& CSS
• Create a simple web page using HTML and CSS
• Style images on a web page
• Basic page layout techniques

What is CSS?
• Cascading Style Sheets.
• Used with HTML to style the page.
• Defines the visual representation of the
content.
• Example
– colour, margins, borders, backgrounds, position in
the page.

HTML Recap
• Hyper Text Markup Language
• A markup language for describing web
documents (web pages).
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content

HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Tags
• Keywords (tag names) surrounded by angle
brackets:
– <tagname>content</tagname>
• Usually come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the
second tag is the end tag
• The end tag is written like the start tag, but
with a slash before the tag name

What makes a website?
• HTML: structure of a website
• CSS: presentation
• CSS works in conjunction with HTML

Anatomy of CSS
• Selector – identifies the element to be styled
• Attribute – the attribute of the element to
change
• Value – the value of the specified attribute
selector {
attribute: value;
}

CSS Example
• body – element to style
• color– the attribute of the element
• hotpink – the value of tbe color attribute
body {
color: hotpink;
font-size: 12px
}

Exercise 1 : Document
• Download web102 project from github
• https://github.com/hawkmanacademy/web10
2/archive/master.zip
• Add an empty script element to the <head>
element in the index.html file

Inline CSS
<head>
<title>I love owls</title>
<style type="text/css">
</style>
</head>

CSS Selectors
• Patterns used to select the element(s) to be styles
• Selector Types
– Element (e.g. body)
– Class (e.g. .pictures)
– Id (e.g. #id)
– Wildcard (*)
• Reference
– http://www.w3schools.com/cssref/css_selectors.asp

Element Selector
body {
font-family: Helvetica, Arial, sans-
serif;
}
• Element: <body>
Apply specified font to all text on the page

Element Selector
ul {
list-style: none;
}
• Element: <ul>
Remove bullets from unordered list element

Element Selector
a {
color: #a369d5;
test-decoration: none;
border-bottom: 1px dotted #a369d5;
}
• Element: <a>

Class Selectors
.pictures {
margin: 10px auto;
width: 900px;
}
• Class: <ul class=“pictures” >
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
Valid options for
margin property

ID Selector
#logo {
margin: 0 auto 30px;
width: 200px;
}
• Id: <div id=“logo” >
There can only be one element with a particular id.
If you define multiple elements, only the first one
will be selected.

Nested Elements
.pictures li {
display: inline;
margin: 3px;
}
Change inline to inline-block, and to block. Can you notice the
difference?

Cascading
img {
margin: 0;
border: 0;
}
.bigimg img {
margin: 15px 2px;
width: 439px;
border: 2px solid #b9b1bf;
}

CSS Properties
• Line height
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.3;
}

CSS Properties
• Centering content
#main {
width: 900px;
margin: 0 auto 40px;
padding: 0;
}

CSS Properties
• Floating Elements
.right-box {
float: right;
}

CSS Styling Tricks
• Using Empty Elements
#top-line {
width: 100%;
height: 50px;
background-color: #2d183d;
border-bottom: 3px solid #eedffb;
margin-bottom: 10px;
}

CSS Styling Tricks
• Using Empty Elements
#bottom-line {
width: 100%;
height: 75px;
background-color: #2d183d;
border-top: 3px solid #eedffb;
}

CSS Styling Tricks
• Restyling through element selectors
h1 {
font-size: 39px;
color: #2d183d;
text-align: center;
border-bottom: 1px solid #f6f4f8;
border-top: 1px solid #f6f4f8;
padding: 20px 0;
}

CSS Styling Tricks
h2 {
font-size: 28px;
margin: 15px 0;
color: #663095;
padding: 15px 0;
font-weight: 400;
text-align: center;
}

CSS Styling Tricks
h4 {
color: #6D6A6A;
font-size: 19px;
padding: 27px 25px 15px;
}

CSS Styling Tricks
small {
color: #6D6A6A;
font-size: 15px;
margin: 0 30px 10px;
text-align: right;
}

CSS Styling Tricks
ol {
margin: 14px 0;
}

CSS Styling Tricks
ol li {
background-color: #F6F4F8;
color: #663095;
font-size: 16px;
font-weight: 400;
margin: 10px 30px 10px 40px;
padding: 6px 20px;
border-radius: 9px;
}

More CSS Styling Tricks
• Using id selectors
#the-quote{
border-bottom: 1px solid #f6f4f8;
border-top: 1px solid #f6f4f8;
margin: 40px auto; width: 90%;
}

#links {
margin: 10px 15px 0 0;
}
#links li {
margin: 0 7px;
font-size: 18px;
display: inline;
}

#text-block {
height: 370px;
}

• Using class selectors
.pictures li img {
}
.bigimg img {
margin: 15px 2px;
width: 439px;
}

• Finishing touches
.bigimg{
display: inline;
}

Further Reading
• CSS Reference
– https://developer.mozilla.org/en-
US/docs/Web/CSS/Reference?redirectlocale=en-
US&redirectslug=CSS%2FCSS_Reference
• CSS Pseudo Classes
– https://developer.mozilla.org/en-
US/docs/Web/CSS/Pseudo-classes
• CSS Zen Garden
– http://www.csszengarden.com/
• W3Schools
– http://www.w3schools.com/css/default.asp

Web 102 INtro to CSS

More Related Content

What's hot

Similar to Web 102 INtro to CSS

More from Hawkman Academy

Recently uploaded

Web 102 INtro to CSS

Editor's Notes