HTML recap
<p>
An HTML tag is surrounded with these angled brackets
<p>
Tag
<p>These tags define this as a paragraph.</p>
Opening tag
Closing tag
Most HTML elements are containers/wrappers, with opening and closing tags that describe the content in-between them.
<body>
<p>These <strong>tags</strong> define this as a paragraph.</p>
<p>This is another paragraph.</p>
</body>
Some wrapping elements can be nested within each other to create levels of sectioning.
<body>
<p>These <strong>tags</strong> define this as a paragraph.</p>
<p>This is another paragraph.</p>
</body>
Some wrapping elements can be nested within each other to create levels of sectioning.
Indent nested items with the “tab” key on your keyboard to keep orderly
Anything added to a tag is called an attribute.
Attributes have two parts: a name and a value.
Attributes provide additional information about an element and are added to an opening tag.
<a href="http://www.google.com">Click here!</a>
Attribute name
Attribute value
Attributes provide additional information about an element and are added to an opening tag.
<a href="http://www.google.com">Click here!</a>
Equal sign follows attribute name
Attributes provide additional information about an element and are added to an opening tag.
<a href="http://www.google.com">Click here!</a>
Attribute value is surrounded by quotes
<img src="dog.jpg">
Some elements exist as individual, standalone elements and don’t wrap content. Therefore, they do not need a close tag.
<img src="dog.jpg"></img>
Your standard HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Name your page here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
!!Your page content and elements goes here!!
</body>
</html>
File structure -- linking to pages or images inside HTML
To target something in the same folder:
Just use the file name on it’s own.
dog.jpg
File structure -- linking to pages or images inside HTML
To target something in a folder below it:
Add the folder name with a slash in front of the file name.
images/dog.jpg
File structure -- linking to pages or images inside HTML
To target something in a folder above it:
Use ../ to go back a folder, then add the file name.
../dog.jpg
File structure -- linking to pages or images inside HTML
To target something in a folder above it, and then a folder below it:
Use ../ to go back a folder, then add the folder name with a slash, then the file name.
../images/dog.jpg
CSS
Week 5
Connects to the HTML and applies style. (E.g., font, colour, sizing, advanced positioning, backgrounds, drop shadows, etc)
CSS
In order to understand CSS, �we need to look at our HTML again.
Imagine there is a border around every HTML element.
There are three types of elements by default: �block, inline, and inline-block elements.
A block element has a box around it taking up the full space (left and right) of the screen. Nothing can sit next to it, regardless of its width.
It has an adjustable width and height.
An inline element is NOT a box. It wraps around the item tightly, and sits next to neighbouring elements.
Its width and height are natural to the object and cannot be changed.
Block elements
Inline elements
Block elements
<header>
<h1>Why <em>Alien</em> is great</h1>
<h2>Sigourney Weaver plays Ripley and the computer is called Mother.</h2>
<img src="img/alien-ripley.jpg" alt="Sigourney Weaver holding a cat">
<div class="byline">
By <u>Katrina Lovrick</u>
</div>
</header>
<h3>Back to the movie:</h3>
<p>The movie <a href="https://en.wikipedia.org/wiki/Alien_(film)" target="_blank"><em>Alien</em></a> came out in 1979, starring a young <a href="https://en.wikipedia.org/wiki/Sigourney_Weaver" target="_blank">Sigourney Weaver</a>. The Alien and its accompanying artifacts were designed by the Swiss artist <a href="https://en.wikipedia.org/wiki/H._R._Giger" target="_blank">H. R. Giger</a>.</p>
<p><em>Alien</em> is <strong>more a classic horror movie</strong> than compared to its follow-up popular <em>Aliens</em>.This movie was directed by relatively unknown at the time, Ridley Scott. It was regarded first as a classic "B movie" horror. However, as it gained in popularity, James Cameron took on the helm to direct <em>Aliens</em>, the more action focused sequel.</p>
<h3>Cool scenes in <em>Alien</em>:</h3>
<ul>
<li>Dallas in the vents with the beeping thing</li>
<li>The cafeteria scene</li>
<li>Landing on LV-426</li>
<li>Exploring the weird alien ship</li>
</ul>
More examples of block elements
<h3>Back to the movie:</h3>
<p>The movie <a href="https://en.wikipedia.org/wiki/Alien_(film)" target="_blank"><em>Alien</em></a> came out in 1979, starring a young <a href="https://en.wikipedia.org/wiki/Sigourney_Weaver" target="_blank">Sigourney Weaver</a>. The Alien and its accompanying artifacts were designed by the Swiss artist <a href="https://en.wikipedia.org/wiki/H._R._Giger" target="_blank">H. R. Giger</a>.</p>
<p><em>Alien</em> is <strong>more a classic horror movie</strong> than compared to its follow-up popular <em>Aliens</em>.This movie was directed by relatively unknown at the time, Ridley Scott. It was regarded first as a classic "B movie" horror. However, as it gained in popularity, James Cameron took on the helm to direct <em>Aliens</em>, the more action focused sequel.</p>
<h3>Cool scenes in <em>Alien</em>:</h3>
<ul>
<li>Dallas in the vents with the beeping thing</li>
<li>The cafeteria scene</li>
<li>Landing on LV-426</li>
<li>Exploring the weird alien ship</li>
</ul>
Examples of inline elements (purple)
Inline-block elements have a box around them like standard block elements and therefore, have adjustable widths and heights. However, they will sit next to each other if there is space—they do not take up the full space (left and right) of the screen’s width.
Inline-block elements (small width screen)
Inline-block elements (wide enough space to fit both):
Inline-block elements
Block elements
Inline elements
Inline-block elements
<header>
<h1>Why <em>Alien</em> is great</h1>
<h2>Sigourney Weaver plays Ripley and the computer is called Mother.</h2>
<img src="img/alien-ripley.jpg" alt="Sigourney Weaver holding a cat">
<div class="byline">
By <u>Katrina Lovrick</u>
</div>
</header>
Block �element behaviour
Inline/inline-block element behaviour
When mixed together, block elements take up the full space, inline elements can sit next to each other.
Block element
Inline/inline-block element
Back to CSS
CSS
CSS rule anatomy: a selector and a declaration
p { font-family: Arial; }
Selector
Declaration
What element do you want to change?
What do you want to change about it?
OUTPUT:
Title
This is a paragraph.
This is a paragraph.
A selector references an element in HTML.
In this example, I am targeting every instance of the <p> (paragraph) tag.
p { font-family: Arial; }
Selector
<h1>Title</h1>
<p>This is a paragraph.</p>
<img src="dog.jpg">
<p>Different paragraph.</p>
OUTPUT:
Title
This is a paragraph.
This is a paragraph.
CSS rule anatomy: a selector and a declaration
p { font-family: Arial; }
Selector
Declaration
What element do you want to change?
What do you want to change about it?
CSS rule anatomy: a selector and a declaration
p { font-family: Arial; }
Declarations always end in a semi-colon!
CSS rule anatomy: a selector and a declaration
p { font-family: Arial; }
Two curly brackets { } follow a selector with any declarations falling in-between them.
CSS selectors can have multiple declarations
p {
font-family: Arial;
font-size: 20px;
}
Declaration
Declaration
Whatever is written last will take precedence/override.
p {
font-family: Arial;
font-size: 20px;
font-size: 14px;
}
Paragraph will be 14px as it overrides the previous line
CSS selectors can have multiple declarations
p {
font-family: Arial;
font-size: 20px;
}
Note how each declaration ends in a semi-colon
Let’s look at the declaration more closely...
h1 { font-family: Arial; }
Declaration anatomy: a property and a value, separated by a colon.
h1 { font-family: Arial; }
Property
Value
What aspect of the element do you want to change.
What will it change to
h1 { font-family: Arial; }
Selector
Declaration
font-family: Arial;
font-family: Arial;
Property
Value
A library of CSS items
h1 { font-family: Arial; }
Font-family defines the font you are using.
What is the name of the font I’m using?
Arial, Times New Roman, and Georgia are default fonts. You can just call them.
Otherwise, you need to call your font in with Google Fonts or Typekit. (see tutorial end of lecture)
Title output example
h1 { font-size: 46px; }
Font-size allows you to change the font-size.
Font-size values:
Title output�example
h1 { line-height: 1.2; }
Line-height allows you to change the leading.
Line-height values:
Title output�example
h1 { font-style: italic; }
Font-style defines the font style.
Font-style values:
If you don’t declare anything, this is the default value.
Title output example
h1 { text-transform: uppercase; }
Text-transform allows you to change the text case.
Text-transform values:
If you don’t declare anything, this is the default value.
TITLE OUTPUT
h1 { text-align: right; }
Text-align allows you to change which alignment items flow in an element.
Text-align values:
If you don’t declare anything, this is the default value.
Title output example
h1 { text-decoration: underline; }
Text-decoration allows you to add minor decoration to text
Text-decoration values:
If you don’t declare anything, this is the default value.
If you don’t declare anything, on a link (<a href=...></a>) this is the default value.
Title output example
h1 { opacity: 50%; }
Opacity allows you to reduce the opacity of an element.
Opacity values:
If you don’t declare anything, this is the default value.
Title output example
h1 { color: #ff9900; }
Color (american spelling) changes the font colour of something.
Color values:
Title output example
h1 { background-color: #ff9900; }
background-color (american spelling) changes the background colour.
Color values:
Title output example
h1 { border: 2px solid #000000; }
Border applies a border around elements.
Border values:
Title output example
ul { list-style-type: disc; }
You can decide how bullets appear in a list
list-style-type values:
If you don’t declare anything, this is the default value.
h1 { width: 50px; }
If an element is a block or an inline-block element, change the width.
Width values:
If you don’t declare anything, this is the default value.
Title output example
ul { list-style-type: none; }
You can decide how bullets appear in a list
list-style-type values:
If you don’t declare anything, this is the default value.
Bullet 1
Bullet 2
Bullet 3
h1 { height: 200px; }
If an element is a block or an inline-block element, change the width.
Width values:
If you don’t declare anything, this is the default value.
Title output example
img { width: 50px; }
If an element is a block or an inline-block element, change the width.
Width values:
If you don’t declare anything, this is the default value.
img { height: 150px; }
If an element is a block or an inline-block element, change the width.
Width values:
If you don’t declare anything, this is the default value.
recommended
img {
height: 150px;
}
img {
width: 20px;
height: 150px;
}
img {
width: 100%;
height: 150px;
}
img {
width: 100%;
height: auto;
}
img {
width: 100%;
}
img {
width: 50%;
}
img { max-width: 100%; }
Apply a maximum width on an element so that it can’t expand past
This does not change the width of the image, simply says it can’t go past a certain width. This is helpful for images in-case they might be so big they expand wide past your screen and create a scrollbar on the bottom.
This max-width says, image can be whatever size it is, except if it’s bigger than the screen, it should not be bigger than 100%.
img {
width: 100%;
}
img {
width: 100%;
max-width: 50%;
}
Max-width is often paired with height auto, instead of any specified exact height, so that dimensions don’t go wonky.
img {
max-width: 100%;
height: auto;
}
img { display: block; }
Display allows you to change what an element’s ‘block level’ is
Display values:
Default for most HTML elements
Default for usually type styling elements. Links. etc.
Default for images
Allows you to hide an element/disappear it from the screen
Text
OUTPUT:
Title
Text link.
img { display: inline-block; }
<h1>Title</h1>
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Title
Text link.
img { display: block; }
<h1>Title</h1>
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Title
Text link.
img {
display: block; � width: 100%;
}
<h1>Title</h1>
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Title
Text link.
OUTPUT:
Title
Text link.
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
OUTPUT:
Home
About Us
Contact
ul {
list-style-type: none;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
OUTPUT:
Home
About Us
Contact
ul {
list-style-type: none;
}
li {
display: inline-block;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
OUTPUT:
Home
About Us
Contact
ul {
list-style-type: none;
padding: 0px;
}
li {
display: inline-block;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
OUTPUT:
H1 { padding: 20px; }
Padding adds space inside the block’s element.
Padding values:
Title output example
h1 {
background-color: #ff9900;
}
Title output example
h1 {
background-color: #ff9900;
padding: 20px;
}
Title output example
H1 { padding: 20px; }
Padding adds space inside the block’s element.
Padding values:
Title output example
H1 { padding-left: 20px; }
Padding can include a hyphen after to target a specific side
Padding values:
Title output example
H1 { padding-top: 20px; }
Padding can include a hyphen after to target a specific side
Padding values:
Title output example
H1 { padding-right: 20px; }
Padding can include a hyphen after to target a specific side
Padding values:
Title output example
H1 { padding-bottom: 20px; }
Padding can include a hyphen after to target a specific side
Padding values:
Title output example
H1 { padding: 0px 0px 20px 20px; }
Padding can be short-form written like above. �(Values entered clockwise starting with padding-left)
Padding values:
Title output example
H1 { padding: 20px 0px; }
If only 2 values are entered instead of 4, it reads the first value as top and bottom, and the second value as left and right.
Padding values:
Title output example
H1 { margin: 0px; }
Adds space around a block element. Follows the same structure and short-form rules as padding
Margin values:
When applied to an element’s left and right at the same time, centers the object if it isn’t full-width
img {
display: block; � width: 100%;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
img {
display: block; � width: 100%;
margin-bottom: 10px;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
OUTPUT:
Text link.
img {
display: block; � width: 100%;
padding-bottom: 10px;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
OUTPUT:
Text link.
OUTPUT:
Text link.
img {
display: block; � width: 100%;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
img {
display: block; � width: 100%;
background-color: #ff0000;
padding: 10px;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
OUTPUT:
Text link.
img {
display: block; � width: 100%;
background-color: #ff0000;
padding: 10px;
margin-bottom: 10px;
}
<img src="dog.jpg">
<a href="page.html">Text link.</a>
OUTPUT:
Text link.
* { box-sizing: border-box; }
* means every single element
box-sizing values:
Default. Override this immediately.
ALWAYS add this to the top of your CSS file. Calculates the width of an element after adding padding and border (considers padding and border the inside of an element).
CSS declarations better explained by the internet:
Selectors:
“What and how can I select elements?”
<p>
Element selector: Use the tag name in css
HTML
p { }
CSS
<p class="large">
Class selector: Use an attribute in the opening tag to define a class. Use a period in front of the class ‘name’ in css to target it.
HTML
.large { }
CSS
<p id="intro">
ID selector: Use an attribute in the opening tag to define a unique id. Use a hashtag in front of the id ‘name’ in css to target it.
HTML
#intro { }
CSS
Avoid using ID!!!
Selectors:
“Which selector should I use?”
If you can, use the broadest possible version.
In CSS you want to avoid duplication.
Element <p> p { }
Class <p class="large"> .large
Selector <p id="intro"> #intro
Broad
Specific
Each selector overrides the previous one
Rules:
Let’s set up our files
Your standard HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>Name your page here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
!!Your page content and elements goes here!!
</body>
</html>
Add this line in your index.html <head> tag to link your CSS file
<!DOCTYPE html>
<html>
<head>
<title>Name your page here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
!!Your page content and elements goes here!!
</body>
</html>
Micro-Assignment