Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML & CSS (CSS (table (4. <th> (e.g. (a new row was added to…
HTML & CSS
HTML
HyperText Markup Language
Used to give websites structure
Markup Language
A
computer/programming language
that
defines the structure & presentation
of raw text
Works by surrounding raw text with information the computer can interpret,
"marking it up"
for processing
Used to make text
do more than just "
sit on a page
"
, it can turn texts into images, tables, links, lists & much more.
Hyper Text
Text displayed on a computer or device that provides access to other text through links
AKA:
Hyperlinks
i.e. Text with links in it
Anytime you click on a word that brings to to a new webpage, you've clicked on a
hypertext
.
Originally created just to markup or present text
Examples of elements used:
Text
Images
Links
Elements (HTML Elements)
Opening & Closing tags
e.g. <h1>
Closing tag: Ends all elements
e.g. </h1>
Website user only sees content between the opening & closing tags
Opening tag: Begins all elements
Heading
6 heading elements
h1 <h1> </h1>:
largest heading
h2 <h2> </h2>
h3 <h3> </h3>
h4 <h4> </h4>
h5 <h5> </h5>
h6 <h6> </h6>:
smallest heading
Paragraph
<p> </p>
Holds one or more sentences
For non-heading text, such as the bodies of articles or company descriptions
Anchor
Attribute:
Customise the
behaviour
or
appearance
of HTML elements
href
Specifies the webpage to link to
e.g.
<a href = "[insert URL}">Insert Comment!</a>
URL must be enclosed with double quotation marks " "
Provides even more information about an element's content
Add
links to other webpages
Attribute name: i.e.
href
Attribute value: in this case the URL in quotes
Link text: the text between the opening & closing tags <a></a>, can m=be as many or as few words as you like.
<a> </a>
target
Specifies that a link should open in a
new window or tab in modern browsers
Useful when:
one or more links on your web page
link to an entirely different website
, want readers to read the linked website but hope they
return to your page
Requires value:
"_blank"
to open link in new window
or tab in modern browsers
Can be added
directly to the opening tag
of the anchor element
Nearly
any element can be turned into a link
by wrapping that element with an anchor element
i.e. turn an image into a link by wrapping the
<img>
element with an
<a>
element
e.g.
Image
Just like websites have URLs, images
also
have URLs
Image URLs
Typically end with file extensions:
.jpg
.png
Attribute:
src
Sets the
source
for an image element
Attribute value: the URL of an image
alt
applied specifically to the
<img>
element
Helps support visually impaired users
Attribute value:
a description of the imaged
e.g.
Purposes:
1. If an image fails to load on a page, the user can mouse over the area originally intended for the image & read a brief description about the image
2. Visually impaired users often browse the web with the aid of screen reading software. When the
alt
attribute is included, the software can read the image's description out loud to the visually impaired user
NOTE: if the image on the page is not one the conveys any meaningful information to the user (visually impaired or otherwise) the
alt
attribute should not be used
Self-closing:
do not need a
closing tag
<img />
e.g.
<img src = "[insert image URL].jpg" />
Video
Attributes:
Width & height
Set the size of the screen that displays the video
Controls
Adds:
Play
Pause
Volume
source src
Sets URL of the video to play
Type
Specifies different video formats
<video> </video>
e.g.
<video width = " " height = " " controls> <source src = "video URL.mp4" type = "video/mp4">
</video>
Uses multiple attributes
Has a
nested source element
Lists
Unordered List
List items
items in an unordered list
<li> </li>
CHILDREN:
li
elements nested inside
ul
<ul> </ul>
e.g.
Can be used to order webpage contents in a number of ways, e.g. a website's navigation menu, AKA
navbar
PARENT ELEMENT
Code indentation
signifies the relationship between the parent & child elements
Requires
li
element nested inside an
ul
Bullets points,
not numbered
Ordered List
<ol></ol>
Each list item is
numbered
e.g.
Link
Links a CSS file to a HTML file
Applies CSS styling
e.g.
rel:
Specifies the relationship between the current file & the file being linked to
In this case the
rel
attribute is
"stylesheet"
type:
Specifies the
type
of file linked to
href:
Provides the
URL
of the file being linked to
Self-closing
Figures
Used to organise
visuals
,
e.g. photographs & diagrams
e.g.
Nav
Organises site navigation menus on a webpage
Header
Used to organise headers on a webpage
Footer
Used to
organise footers
on a webpage
Sections
Defines sections
on a webpage
THE SET UP:
Boilerplate Code
1. Document Type Declaration
An instruction
Lets the browser know what:
Type of document to expect
Version pf HTML is being used for the document
Must be the
first line of code
in
all
HTML documents
Lets web browsers know you are using HTML language
<head>
<title> </title>
Can be specified directly inside of the <head> element
Name of page
Appears at top of browser or tab
e.g.
One of the ways users can
find your site through a search engine
, like Google
Contains the site's title
<meta charset = "utf-8" />
Tells the web browser which character set to use
In this case, the character set is "utf-8"
Self closing
Contains information about your HTML file
Body
For adding HTML content that the browser will display
Many different type of contents can be added in the body,
e.g.
text
images
buttons
Metadata Processes
Without
all
of the elements in the boilerplate code, you'll risk starting without the minimum requirements considered to be best practice
The
minimum
amount of HTML code required to
successfully structure
a webpage
Communicates vital information to the web browser
Contains information about the page that isn't displayed directly on the web page, not visible to a webpage visitor
Can be through of as the
"brains"
of a webpage
2. Opening & Closing HTML Tags
<html> ... </html>
the
parent
of
all other
HTML elements on the webpage
The
root
of the HTML document
Anything in between will be considered HTML code
DEFINITION Tags: HTML code that lives inside of angle brackets < >
Nesting:
place one HTML tag
inside
another
Navigation
DEFINITION:
Linking to elements on the same page or to other pages on the same site
tag
<nav> </nav>
used to wrap these links in order to organise the content on your web page.
Semantic tag:
used to describe the content that they surround, which helps us modify and style our content later.
Descriptive, well-chosen tags are one key to high-quality web development.
A full list of available HTML tags can be found
here.
Non-semantic tag:
do not describe the content that is inside of them
e.g. <div>
Parent/Child element
Used to describe HTML elements that enclose or are enclosed by other HTML elements
e.g.
ul
is the parent & the
li
list items are children
Organising HTML Code
With proper labels for elements you can style specific HTML elements at will
id Attribute
Can label HTML elements with a unique identifier, or ID.
Has greater capacity than classes - if an HTML element is using both id & class attributes, the CSS rule for the id will take precedence over that of the class
Can only be used once because the id attribute is unique to the element it is assigned to
e.g.
Intended to label unique elements in an HTML file.
No 2 HTML elements should share the same ID
Allows an individual page element to be styled differently
e.g. label the heading with an
id
of
botswana
Plays a critical role when you move onto a language like JavaScript
click a link and have the page automatically scroll to a specific section
In order to link to a target on the same page, we must give the target an id, like this:
In this example, the <p> element contains id of top and the <h1> element contains id of bottom. An id can be added to most elements on a webpage.
An id should be descriptive to make it easier to remember the purpose of a link.
Target Link:
A string containing the # character and the target element's id
e.g.
the links to <p id="top"> and <h1 id="bottom"> are embedded in an ordered list.
These links appear in the browser as a numbered list of links.
classe Attribute
Quickly style elements that should all share a specific style
Used to label multiple elements that share the same styling
class
attribute
Used to label an HTML element with a class
e.g.
now all headings labelled with a class of science can be quickly styled to have the same styling
HTML elements are often labelled with class names that reflect the
content they represent on the webpage
Multiple class labels
It is possible to label HTML elements with more than 1 class
Elements that share a styling (
e.g. typeface
) are labelled with the same class. When those elements must also be differentiated, however, labelling with a different class is helpful.
e.g.
The HTML code uses main headings for 2 different book titles.
In this example all book titles must share the same typeface, so the headings are labelled with a class
book
& then styled with a typeface
Georgia
.
The books, however, must be differentiated based on their country of origin. To differentiate the book titles based on this information, 2 additional classes,
domestic
&
foreign
, are applied to the respective headings, which style the colour of the heading in the CSS code.
Label an HTML element with an additional class:
Include the class within the
double quotes
(" ") immediately
after the 1st class
HTML elements can be labelled with many different classes
Whenever possible, it is best to limit an element to
4 classes at most
.
Q: Why is this important?
Writing clear, maintainable code for you & other developers
Venturing into more advanced CSS styling
Organising HTML file contents
Q: Why?
Keep HTML code easy to:
Read
Maintain
Style
Group elements that belong together
Elements
The div
Divides
webpage by enclosing other elements
These enclosed groups of elements can be organised, moved & styled
independently from one another
.
Labelling
<div>
's with classes
Attribute:
Class:
often used together
*<div>'s
can be given a
class attribute
, rather than labelling individual elements with classes*
NOTE: Labelling individual elements with classes is still useful: there will be times when an individual element will need to be labelled with a class.
e.g.
a heading & a paragraph are contained within a div that has a class of
container
. In the
stylesheet
, the
background color
&
typeface
of the div has been styled.
*<div>
's are intended to
*contain other HTML elements
When a
<div>
is styled,
all elements inside
the
<div>**
will inherit the styling
applied to the
<div>**.
it is easy to
style sections of the webpage
using
<div>
e.g.
...
indicates where the HTML elements would normally be enclosed by the
div
Used to
organise HTML elements into different groups
Backbone of code organisation
Represented by
<div>
in HTML
Can be thought of as a container or box that groups elements that belong together
e.g. Can be used to group together all the elements that make up the navigation for a webpage, or any other section of a page
A heading for "Alice In Wonderland" & a brief paragraph description of the book are contained within a single
<div>
. If more books were to appear on the page, additional
<div>
's would be used to organise them
One of the
most commonly used elements
in all of HTML
Spacing
Whitespace
Browser ignores any present in HTML files
So if you wanted to add more space between two elements, you would
not
be able to do this by simple adding more space between the elements
Important to use in HTML files so that your code is easy to read & follow by increasing & decreasing the spacing between lines of code
Indentation
WorldWide Web Consortium(W3C) is responsible for maintaining the standard style of HTML
Intended for elements nested inside other elements
Current recommendation: 2 spaces of indentation when writing HTML code
Unless your text editor has been configured properly, the "TAB" key on your keyboard should
not
be used for indentation
Makes the structure of the code easier to read
DEFINITION:
the amount each line is spaced in from the margin
Formatting of the code in the
.html
document will not affect the positioning of the elements within the browser
Line break element
<br />
Self-closing tag
Comments
<!-- -->
e.g.
Benefits:
Helps you (& others) understand your code if you decide to review it at a much later date
Allows you to experiment with new code w/o deleting old code
e.g. Denoting that the following code belongs to a particular section of the page
e.g.
"commenting out"
a valid HTML element to experiment with new code w/o having to delete old code
Used to take notes inside a HTML file
All elements can be classified as one of the following:
1. inline elements
Elements that display
inline
with text
Does not disrupt the flow of text
e.g. links
2. block-level elements
Elements that use an entire line of space in a webpage
Disrupts the natural flow of text.
Most common HTML elements are block-level elements
e.g. headings, paragraphs, divs etc.
CSS
Cascading Style Sheets
Used to change the appearance of HTML elements
Like the skin & makeup that covers the bones of HTML.
DEFINITION attribute:
a characteristic or some description for the content within the element.
Methods to write CSS
External stylesheets
A separate file that contains only CSS code
Use the .css file extension,
e.g.
style.css
Write all the CSS code needed to style a page without needing to sacrifice the readability & maintenance of your HTML file.
Apply styling to webpage:
When HTML & CSS code are in separate files, the HTML file must know exactly where the CSS code is kept, otherwise the styling can't be applied to the webpage.
<link>
element
Link the HTML file & the CSS file together
Position: within the
<head>
of the html file
Self-closing tag
Attributes:
href:
Value:
address/path to the CSS file, this can be a URL.
If the CSS file is stored in the same
directory
as your HTML file then you can specify a
relative path
instead of an URL
DEFINITION Directory:
a file system cataloguing structure which contains references to other computer files & possibly other directories,
e.g. on computers many are known as folders or drawers
DEFINITION Relative Path:
starts from some given working directory, avoiding the need to provide the full absolute path. A file name can be considered as a relative path based at the current working directory. If the working directory is not the file's parent directory, a "file not found" error will result if the file is addressed by its name.
DEFINITION Absolute/Full Path:
points to the same location in the file system
regardless of the current working directory.
To do that, it must include the
root directory
.
e.g.
type:
Describes the
type of document
you are linking to
e.g. CSS file, then the value should be set to
text/css
rel:
Describes the relationship between the 2 files
e.g. when linking to a CSS file, the value should be
stylesheet
e.g. When linking a HTML & a CSS file together, the
<link>
element will look like the following:
Inline CSS
<style>
element
Allows you to write CSS code between its opening & closing tags
Must be placed inside the
<head>
e.g.
type
: text/css
Disadvantages:
Mix of CSS code within HTML files can result in files that's
difficult to read & maintain
(by you & other developers)
Creates a
large, long HTML file
Results in inefficient workflow
Lack clear distinction between web page structure(HTML) and web page styling(CSS)
Can cause confusion because structure(HTML) & aesthetics(CSS) are now combined
font styles:
bold: <strong></strong>
italic: <em></em> (i.e. make words italic for
em
phasis)
CSS Rule components
Rule
A list of CSS instructions
For how to style a HTML element or a group of HTML elements
Consists of the selector & all declarations inside of the selector
Selector
Specifies
exactly which HTML element
to style
Examples
:
Multiple element selector
Can select multiple elements at once
e.g.
class selector
Targets
all
HTML elements
of a particular class
e.g.
div is the parent element &
h2
&
p
are the children. CSS styles applied to the
header class selector
will automatically apply to the
h2
& the
p
.
In CSS, class selectors begins with a full stop( . ) followed by the class name
As a result of this code,
child elements
of
divs
with the header class will automatically have a font colour of #ffffff
: active
Pseudo class selector
Used to style an element
only when it's being clicked
element.class
selector
Allows multiple elements on a webpage to share a specific styling but for
one of those elements to differ slightly
.
e.g. a heading & paragraph (both with a class of
"breaking"
) may need to share the same typeface, but the paragraph may require a styling better suited for paragraphs:
A new selector -
p.breaking
is used.
The
.breaking
selector targets all elements with a class of
breaking
.
The p.breaking selector targets only <p> elements with a class of breaking. This type of selector allows you to be **
even more specific
*about a particular element's styling, even when that element
must share some styling with other elements
*.
multiple class selector
An efficient way of styling
multiple HTML elements
e.g.
Select elements belonging to the same class in CSS
e.g.
all elements with a class of **
science
*
will have their typeface, colour, and letter case modified
You are more likely to see classes more often than you see IDs, it is by far the most commonly used when styling groups of elements.
id selector
Used to style a HTML elements which has an
id attribute
Create a rule for the id selector in the CSS file using a # symbol
All ID selectors begin with the
octothorp
character #
The value of the ID immediately follows the octothorp
Once you've correctly targeted the element, you can proceed to style as normal
Universal selector
A special selector that can instantly select every single element on the webpage
e.g.
used to refer to every element on the page & set the font to Arial
To style a HTML element you must 1st
select
that element in the CSS file
Note: the CSS selector essentially matches the HTML tag for the element, without angle brackets
e.g. to style a
<p>
element the syntax to select it using CSS is:
This selects all paragraph
p
elements on the web page
.
Properties & values
Body of the selector
specify what
aspect of the selector
to style
Located inside { } brackets
Property:
the property you'd like to style of that element
e.g. size, color etc.
Value:
the value of the property,
e.g. 18px for size, blue for color etc.
e.g.
the
<h1>
element has being selected, inside of the
selector's body
the heading's color property is set to a value of
Blue
.
CSS declarations:
Consists of:
a property
a value
e.g. color: Blue
Must end in a semi-colon (;).
Style HTML elements
Redundant Declarations;
Include multiple versions of CSS declarations just in case a user's browser can't support a certain declaration
e.g. multiple colour declarations
In CSS, the latter of multiple declarations takes priority.
In the example above, if an user's browser supports
rgba()
then that colour will be applied to the heading. If not, then CSS will use the first
rgb()
colour declaration, as a backup
Allows you to
support as many users as possible
across multiple different versions of internet browsers
Not all browsers supports newer CSS features like HSL, RGBa, HSLa
Examples:
Font
font-family
e.g.
Set the
font-family
property of the
h1
selector's font to Georgia with Serif as a fallback value.
Fallback fonts
In case a visitor's web browser does not support the 1st font
Sometimes more than one is included
Most computers have a small set of
typefaces pre-installed
, this includes serif & sans-serif fonts e.g. Times New Roman & Arial respectively
When the stylesheet specifies a font not installed on a user's computer, the pre-installed fonts can be used as
fallback fonts
for users
e.g.
This says use the Garamond font for all
h1
elements. If that font is not available, use the Times font. If both of those fonts aren't available, use any
*serif
font pre-installed on the computer.
The fonts specified after Garamond are the
fallback fonts
Help ensure a
consistent experience
for the diverse audience of users that visit a site.
Q: why is font important?
A lot of information users see on a page is in text form
Styling text to make webpage content
accessible
&
visually engaging
creates a
great experience for users
AKA typeface, i.e. "type of font"
Points to remember:
1. The font specified in a stylesheet must be
installed on a user's computer
in order for that font to display when a user visit the webpage
2. The
default type face
for all HTML elements is Times New Roman
3. Good practice:
limit the number of typefaces
used on a webpage to
2 or 3
.
4. When the name of a typeface consists of more than 1 word, it must be enclosed in
double quotes
, otherwise it will not be recognised.
e.g.
Typography
Serif
Serif fonts have extra details on the ends of the main strokes of each letter
These strokes are called
serifs
e.g. Times New Roman, Georgia among others
Sans-serif
Letters in these fonts lack those extra strokes on the ends of each letter, instead letters have straight edges
This gives them a cleaner, more modern look.
e.g. Arial or Helvetica
Using new fonts
Many (but not all) of the new fonts that emerge on a daily basis are being centralised in directories made for public use
e.g.
Google Fonts
A directory of thousands of open-source fonts that are free to use by anyone
Using fonts:
5 more items...
font-face
Import fonts directly from style sheets
3 more items...
Use local font files
1 more item...
Sets the
font
of a CSS selector
color
Sets the
colour
of a CSS selector's font
Named Colours
CSS comes equipped with
147 named colours
, e.g. red, used above
There are available resources online that list all the named colours in CSS
More exact colour choice methods:
Hexadecimal colour (#RRGGBB)
Hexadecimal values
that represent mixtures of
red
,
green
&
blue
.
e.g. red can be represented with the hexadecimal value #FF0000, FF represents red, 00 represents green & 00 represents blue.
Offers 16,777,216 possible colours
Base 16
6 more items...
Starts with #
Each group of 2 characters respond to a value of red green & blue
NOTE:
When a hex code is composed of the same characters, the hex code can be abbreviated like so:
RGB (Red, Green, Blue)
Colours created by
3 numbers
representing
red
,
green
&
blue
.
When mixed together, the 3 values create a specific colour
e.g. Purple can be represented as rgb(128, 0, 128)
Offers 16,777,216 possible colours
Colour pickers
on the internet allows you to view the result of different RGB values
Base 10
2 more items...
Opacity:
3 more items...
Different ways of representing the same thing
It is possible to
convert
between RGB & Hexadecimals, often helped by
colour picker.
Can affect the following design aspects:
1. Foreground colour
The colour that the element appears in
e.g. when a heading has being styled to appear green, it's the foreground colour that's being styled.
Property:
color
2. Background colour
e.g. when a heading is styled so that its background appears yellow, the background colour of the heading is being styled
Property:
background-color
HSL Colours
stands for
H
ue,
S
aturation &
L
ightness
1. Hue:
The technical term for what we understand as colour
Represented on a colour wheel in HSL
Can take on values between 0 - 360
2. Saturation
The amount of grey in a given colour
Specified using a percentage between 0%(a shade of grey)-100%(full saturation)
3. Lightness
The amount of white in a given colour
Similar to
Saturation
, specified using a percentage between 0%(black) - 100(white), whereas 50% is normal.
e.g.
Introduced in
CSS3
*NOTE:
may not be supported by older browsers*
hsla( )
Can set opacity using alpha value
e.g.
font-size
Sets the
size
of an HTML element's text
e.g.
In CSS,
size
can be assigned in:
pixels(px)
Standard unit of measurement for sizing fonts & other HTML elements
A pixel is a small point on the display of a computer monitor, most computer screens have a display of 72 pixels per inch, so it is about 1/72nd of an inch.
Sometimes referred to as
points
Used to measure the exact size of an element, e.g. text.
A fixed
hard coded
value
rems
Represents the
default font size
of the web browser
Can be used to ensure HTML elements
scale in proportion to each
other on
various web browsers & screen sizes
On most browsers,
1rem = 16px
,
2rem = 32px
(a doubling),
3rem = 48px
(a tripling) & so on
ems
A relative unit of measure that
changes in proportion to the parent element
e.g. if a parent element has font-size: 20px; child elements with font-size: 1em; = 20px. Child elements with font-size: 0.5em = 10px(a halving) & so on.
Equal to the width of the letter "m".
Percentages %
A
relative
unit of measure
The default size of text in web browsers is 16px.
The size of text relative to this default size.
e.g.
setting the font size to 150% is equivalent to setting it to 24px
=
=
=
=
* px
&
rem
are the most commonly used today
*
line-height
When font size is increased, the vertical distance between lines can also increase, making text difficult to read, particularly in paragraphs.
Use to modify the spacing between lines of text
e.g.
The manipulates the
leading
(pronounced "ledding") of the font
Increased line height, i.e. space between lines can make text easier to read
Unit of measure
Can be modified using
pixels
or
ems
.
The unit of
ems
is
preferred
since
ems
offer a spacing relative to the size of the text on the page
A
unitless number
, such as 1.2. This number is an
absolute value
that will compute the line height as a
ratio
of the font size.
Generally the preferred method
since it is
responsive
and based exclusively on the current font size.
if we change the font size, a unitless line-height would automatically readjust, whereas the pixel value would remain static.
Leading is the space between lines, line-height is the space from the end of one line to the end of the next. When you increase the
line-height
property of an element, the leading is increased
Vertical spacing between lines.
word-spacing
The spacing between words in a body of text
The
default amount
of space between words is usually 0.25em
It's not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text.
The
preferred unit
is
ems
Horizontal spacing between words
letter-spacing
Kerning:
adjusting the spacing between individual letters.
Kerning can be adjusted with the
letter-spacing
property in CSS
e.g.
It's not common to increase the kerning in text, but sometimes it can increase the readability of uppercase text.
font-weight
Turns
bold
on or off
Its common to bold
important headings or keywords
e.g.
The
font-weight
property has a 2nd value:
normal
If we want all text on a webpage to appear bolded, we could select all text elements & change their value to
bold
. If a certain section of text was required to appear normal however, we could set the font weight of that particular element to
normal
Essentially "Shutting off" bold for that element.
Font weight can be set to 100(
thin
), 200, 300, 400(
normal weight
), 500, 600, 700, 800, 900(
bold
).
font-style
Values
italic
Makes texts appear in
italics
e.g.
normal
Same purpose as in
font-weight
text-transform
Style text to appear in upper or lowercase.
e.g.
formats all
<h1>
elements to appear in uppercase regardless of the case used for the heading within the HTML code.
Alternatively, the
lowercase
value could be used to format text in all lowercase.
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters.
e.g. a website that reports breaking news may decide to format all
<h1>
heading elements such that they appear in uppercase, as in the example above.
Avoiding uppercase text in the HTML file can also make the code easier to read.
text-align
To move or align text.
e.g.
Can be set to 1 of 3
values
:
left
Aligns the text to the left hand side of the page
centre
Centres text
right
Aligns text to the right hand side of the page
image
background
1. background-image
e.g.
assigns the image hosted at
https://h3.amazonaws.come/codecademy-content/projects/make-a-website/lesson-2/bg/jpg
to elements that have class attribute set to "hero"
Sets a
background image
of your choice for a given selector
value:
url(" ")
2 more items...
Colour gradient
Allows you to used colour gradients in your webpage
Due to the many browsers available, there is no standard way of defining a gradient using CSS (different browsers require different syntax)
One value supported on a couple of major web browsers:
1 more item...
5. background-size
Controls the
size
of a chosen background image
2 most common values:
cover:
3 more items...
contain:
2 more items...
2. background-repeat
How a background image repeats
values:
1. repeat:
2 more items...
2. repeat-x:
1 more item...
3. repeat-y:
1 more item...
4. no-repeat:
1 more item...
e.g.
the paragraph's background image will repeat horizontally.
3. background-position:
A
non-repeating
background image is positioned using a 3x3 grid (3 rows, 3 columns).
There are
9
possible positions for the image:
1. left top
2. center top
3. right top
4. left center
5. center center
6. right center
7. left bottom
8. center bottom
9 right bottom
NOTE:
the values are in pairs.
e.g.
the background-image is not repeated, its position is in the top right corner of the box.
NOTE:
if only one value is specified, the 2nd value will default to
center
4. background
Shorthand property for setting a background-image, its repetition pattern & its position (in that order).
e.g.
Included background properties 1-3(see above) which we previously styled individually.
It is considered best practice to follow the order: image, repetition, position when setting the
background
property.
6. background-attachment
Specify whether or not a background image should remain in 1 position on the webpage or move up & down as a user scrolls through a webpage.
values:
scroll
2 more items...
fixed
1 more item...
Dimensions
Can be set with the properties:
height
weight
e.g.
shows the HTML code on top inserting an image & the CSS code below setting the image's dimensions.
Specifying the dimensions of an image helps the browser determine
how much space should be reserved
for the image
NOTE: images should be saved at the dimensions they will be displayed on the webpage. Using dimensions for an image that
exceeds the original dimensions
will
distort the image
.
Centring
By default, images are
inline elements
For images to centre properly, they must behave as block-level elements by setting the image's display to
block
.
e.g.
the image is aligned using the
margin
property. The top & bottom of the image box are set to
0
margin, the left & right margins are set to
auto
- which
automatically
sets the exact amount of margin needed on the left & right side in order to centre the image.
To align images to the left or right side of a page, use the
float
property.
<img>
vs
background
When an image communicates important information (e.g. icons, logos, photo albums etc.), you can use the
<img>
element & style the image using CSS if needed
When an image is intended to style a webpage (e.g. header, background etc.) you can use the
background
property & further style it with CSS
Displays
Organising boundaries & space
The Box Model
2. border
e.g.
this gives a paragraph element a black border that is 2 pixels thick.
Used to visually define a
page element's outer edge
The value requires 3 parts:
4 more items...
Like a picture frame that contains the elements
The
outline
of an HTML page element
border-radius
4 more items...
3. padding
Like
inner space
Increasing the padding makes the space around the elements more spacious, while decreasing it make sit more compact.
e.g.
puts 20 pixels of space between the content of the paragraph (the text) & the box borders, on all 4 sides.
The space between the page elements'
content
& the
border
Particularly useful at
making text easier to read
when the text has a border around it
When padding is set for a box (as in the example above) it will be added to the
width
&
height
of a box,
increasing the dimensions of the box
.
Q: what if you don't want all four sides to have equal padding?
3 more items...
Shortcuts:
1 more item...
More specific settings:
6 more items...
1. margin
The space between the HTML page element & the next nearest element(s) on a webpage.
Use to bring elements closer together or move them further apart.
e.g.
Tells CSS to put 2rem of space between elements within the
class answer
and the other elements.
Creates space on all sides of a page element
Specify how much margin there should be on each side of the box:
3 more items...
The space
directly outside
of a
box
e.g.
will place
20 pixels of space
on the
outside of the paragraph's box, on all 4 sides
. This means the
other HTML elements on the page cannot come within 20 pixels
of the paragraph.
Understanding of the
margin
property is
crucial
in order to later understand
element positioning in the browser.
There are many different ways of positioning elements with the
margin
property
auto:
4 more items...
Margin collapse:
2 more items...
4. content
Includes text, images & other media contained within an HTML element.
Illustrates the space & boundary properties of an HTML element that can be controlled using CSS.
All HTML elements are understood by the browser as "living" inside of a container or a box
An element's box has 2 dimensions:
Height
Width
These default dimensions are automatically set to hold the raw contents of the box.
Modify the default dimensions of an element's box:
2 more items...
user agent stylesheets
"
user agent
":
technical term for the browser.
Default stylesheet used by browsers used in the absence of an external stylesheet.
Often have
default CSS rules
that set
default values
for the padding & margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page.
Many developers choose to
reset these values
so they can truly work with a clean slate.
e.g.
resets the default padding & margin values of all HTML elements. Often the 1st CSS rule in an external stylesheet.
Both properties are set to
0
- does not require a unit of measurement.
Limitation:
unreliable box dimensions.
display & position
Move elements on a page & create unique layouts
display
Determines how HTML elements will be displayed in relation to each other
Types: (Visual on a webpage)
block:
arranges HTML elements to take up a whole line
inline:
arrange HTML elements on the same line as other neighbouring elements.
flex
2 more items...
inline-block:
causes black elements to behave like an inline element but retains the
features
of a block-level element.
none:
removes an element from view. The rest of the webpage will act as if the element does not exist.
e.g.
commonly used to create a navigation bar from list items. The block-level list items will now behave as inline elements. The result will be list items appearing on the same line.
Can
overwrite
display types using the display property e.g. make list items appear on the same line with the
inline
property:
position
Enables you to position HTML elements in
exact locations
on the webpage
Properties:
Relative
4 values:
2. relative
3 more items...
1. static
2 more items...
3. absolute
4 more items...
4. fixed
3 more items...
z-index
Controls how far "back" or how far "forward" an element should appear on the webpage.
Accepts integer values
Depending on the values, the integers instruct the browser on the
order in which elements should be displayed on the webpage
.
e.g.
We set the .box-top position to
relative
(because the z-index position property does not work on static terms) & the z-index to 2 which moves the .
box-top
element forward because it is greater than the
box-bottom
z-index 1.
The top box is moved in front of the bottom box.
float
Floats HTML elements left or right of its neighbouring elements
e.g. the class selector .logo floats left, & the id selector #search-bar floats right
Values:
left:
move or floats elements as far left as possible
right:
moves or floats elements as far right as possible
Works for
static
&
relative
positioned elements.
Floated elements must have a width specified, otherwise the element will assume the full width of its containing environment, & changing the float value will not yield any visible results.
Can be used to
float
multiple elements
at once
When multiple floated elements have different heights, it can affect their layout on the page.
Specifically, elements can "bump" into each other & not allow other elements to properly move to its left or right.
clear
2 more items...
flex wrap
Makes sure no child element moves off the page
justify-content
Aligns contents
Left
Right
Center
visibility
Can hide elements from view.
Values:
hidden:
hides an elements
visible:
displays an element
e.g.
the list items with a class of
future
will be hidden from view in the browser
NOTE:
Users can still view the hidden content by viewing the source code in their browser.
The web page will only hide the
contents
of the element. It will still leave an empty space where the element is intended to display.
Q: whats the difference between
display: none
&
visibility: hidden
?
An element with
display: none
will be completely removed from the webpage. An element with
visibility: hidden
will not be visible on the webpage, but the space reserved for it still will.
Responsive Web Design(RWD)
Tasks include:
Offering the same support to a variety of devices for a single website.
Considering the viewer proximity as part of the viewing context as an extension to RWD
Adapts the layout to the viewing environment by using:
Fluid, proportion based grids:
Calls for page element sizing to be in relative units like percentages rather than absolute points like pixels or points.
Flexible images:
Also sized in relative units
Prevents them from displaying outside their containing unit
3. CSS3 Media Queries:
An extension of the
media
rule
Used to adapt a website's content to different screen sizes.
With media queries, CSS can detect the size of the current screen & apply different CSS styles depending on the width of the screen.
e.g.
5 more items...
Range
5 more items...
Screen Resolution
4 more items...
and
operator
4 more items...
Comma separated list
3 more items...
Breakpoints
9 more items...
Used to help with different
screen sizes
.
Has become more important:
The amount of mobile traffic now accounts for more than 50% of all internet traffic.
Google announced
mobilegeddon
in 2015:
Boosts ratings of sites that are mobile friendly if the search was made from from a mobile device.
An example of
user interface plasticity
DEFINITION:
The capability of a
user-interface
to withstand variations of both the system physical characteristics & the environment while preserving
usability
.
The ability of websites to resize & reorganise its contents based on:
The size of other content on the website
The size of the screen or browser the website is been viewed on
1st STEP: Relative Units of Measurements
Advantage over hard-coded measurements:
Allow for the proportions of a website to remain intact regardless of
screen-size
or
layout
Examples:
1. em
7 more items...
2. rem
7 more items...
3. Percentages
2 more items...
Used to size contents on a webpage
relative to other elements
on the page.
Setting element limits
min/max-width
Because the webpage can be viewed through devices of differing screen size, the content from the web page can lose integrity from those changes in size.
To avoid this problem, CSS offers 2 properties that can
limit how narrow or wide an element's box
can be sized to:
4 more items...
These 2 properties ensure that content is legible by limiting the minimum & maximum widths.
min/max height
min-height
1 more item...
max-height
2 more items...
e.g.
the height of all paragraphs will not shrink below 150px nor exceed 300px.
The unit of pixels is used to ensure hard limits on the dimensions of the elements.
Resizing images & videos
When a website contains media such as images & videos, it is important to ensure that it is
scaled proportionately
so
users can correctly view it.
e.g.
.container
represents a container div: set to a width of 50% (half of the browser's width, in this example) & a height of 200px.
Setting
overflow
to
hidden
ensures that any content with dimensions larger than the container will be hidden from view.
2nd CSS rule ensures images scale with the width of the container. If the image is
larger
than the container, the vertical portion of the container will
overflow & not display.
The height property is set to
auto
, meaning an image's height will
automatically
scale proportionately
with the width.
Finally, the last line will display images as
block level elements
(rather than inline-block, their default state). This will
prevent images from attempting to align with other contents on the page
(like text), which can add unintended margins to images.
NOTE:
this example represents a
very common
design pattern used to scale images & videos proportionately.
Worth memorising.
The example scales the width of an image to the width of the container. To
swap
this behaviour to scale with height, set
max-height
to
100%
and
width
to
auto
(essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow & not display.
Scaling Background Images
Background images of HTML elements can also be scaled responsively using CSS properties.
e.g.
1st declaration:
sets the background image
(# is a placeholder for an image URL in this example)
2nd declaration:
Instructs the CSS compiler
not to repeat
the image (
by default, images will repeat
)
3rd declaration:
centres
the image within the element
Final declaration:
scales the background image. The image will
cover
the entire background of the element, all while keeping the image in proportion. If the dimensions of the image exceed the dimensions of the container then only a portion of the image will display.
A
responsive website
is a website that responds to the size of the screen it is viewed on.
Default Values
font weight: normal
box-sizing
Controls the
type of box mode
l the browser should use when interpreting the web page
Default property:
content box
border thickness & padding
affects the dimensions of boxes
width + padding + border = actual rendered width of an element's box:
border-box
In this box model, the height & width of the box will remain fixed.
e.g.
the universal selector (asterisk) targets all elements on the web page & resets the box model to
border-box
.
The border thickness & padding will be
included inside
of the box - the overall dimensions of the box do not change.
e.g.
the box height & width would remain at 200px & 300px respectively.
The content area is
automatically sized based on the remaining height & width
, after the border & padding has being subtracted.
position
block-level elements
Default position:
left side of browser
Take up their own line of space & don't overlap each other.
e.g.
created with the CSS code:
The default position of an element can be changed by setting its
position
property.
If you favour the default position of an HTML elements, you
don't need
to set it's
position
property.
e.g.
CSS Framework
Bootstrap
A popular CSS framework
Contains pre-written rules designed to help you build web pages faster
1st: link to an
URL
that
hosts
bootstrap
In addition to linking to main.css
Link using the HTML link element:
<link ... >
Link element typically contained within HTML head tags
e.g.
Grid
Organises HTML elements using preconfigured columns
Why Bootstrap & framework like it is so popular
Can customise responsive page layouts
quickly
&
reliably
Grid example
12 equal sized columns
HTML elements are arranged to span different numbers of columns to create custom page layouts.
Header
An HTML
header
element with Bootstrap's pre-defined
container
class is used
Inside the
header
, a
row
is created by using a div with Bootstrap's
row
class
The row is cut into 2 parts:
the h1 with Bootstrap's class
col-sm-4
- it will take up 4 columns on the grid
the
nav
element with class
col-sm-8
- takes up the remaining 8 columns,
text-right
indicates the text will be arranged on the right side of the
nav
e.g.
Section
Bootstrap Classes
jumbotron
Spans the entire width of the webpage, beyond the borders of the grid
e.g.
Use below the
header
tags
Large showcase area featuring important content
container
col-sm-*
Inside 2nd "container"
Used to span a specific number of columns on the Bootstrap grid e.g. 6
This layout will appear when the user's screen is the width of a tablet (768px). On narrower screens(iPhone) only one image per row will appear.
Screen sizes smaller than 768px will not maintain this layout
*sm
is short for "small"*
Maintains desired CSS layout on small-screens (tablet sized)
btn-btn primary
embedded inside
anchor
element
Style page elements as buttons
row
Arranges HTML elements in rows
Can be useful when building header/navigation menus, main feature sections, supporting content sections & footers
Footer
Displays
Copyright information
Social media links
(Sometimes) site navigation
e.g.
Set of
prewritten
CSS rules designed to help you build webpages faster
Spacing & Indentation
1. 1 space should be used between the selector & the opening curly brace ({)
2. no extra spaces should exist between opening & closing curly braces ({&}) and CSS declarations
3. 2 spaces of indentation should be used for CSS declarations
4. 1 line of spacing should exist between CSS rules
CSS files can become lengthy as styling is added to a webpage
Proper spacing & indentations help keep CSS code maintainable & readable for you & other developers
Comments:
You can leave comments in CSS files
e.g.
(See HTML "Comments" section for reasons & further explanations)
UX: User experience
Important aspects:
Text
Colour
Font
table
1. <table>
Element that
creates the table
that contains data
e.g.
Contains all of the tabular data you plan on displaying
2. <tr>
In HTML, all of the components of a table that holds data- rows, columns & cells - must be created
The
table row
element: adds rows
e.g.
2 rows have been added to the table.
3. <td>
The
table data
element: Adds data to a row
Defines each cell element within a row.
e.g.
2 data point (73 & 81)were entered in the 1 row that exists. By adding 2 data points, we create 2 cells of data. If the table were displayed in the browser, it would show 1 row & 2 columns.
4. <th>
The
table heading
element: adds titles to rows & columns
Just like the table data element, except with a relevant title
Must be placed
within a row
e.g.
a new row was added to hold the 3 headings
i) a blank heading
Creates the extra table cell necessary to align the table headings correctly over the data they correspond to.
ii) a
Saturday
heading
iii) a
Sunday
heading
in the 2nd row, 1 table heading was added ad a row title:
temperature
scope
attribute:
values:
i) row:
makes it clear that the heading is for a row
ii) col:
makes it clear that the heading is for a column
Clarifies the meaning of data
5. table borders
older version:
WARNING:
this code is
deprecated
. Intended to help read older code only.
e.g.
a border could be added to a table using the
border
attribute & setting it equal to an integer. The integer would represent the thickness of the border.
The browser may still interpret your code correctly if using this attribute.
new version:
Uses
CSS
instead of HTML to show table borders.
e.g.
6. span
colspan
Data can
span multiple columns
using the
colspan
attribute
Accepts an integer (>=1) to denote the number of columns it spans across.
e.g. a personal calendar
the data
Out of Town
spans the
Monday
&
Tuesday
table headings using the value
2
(two columns). The data
Back in Town
appear only under the
Wednesday
heading
rowspan
Makes data
span multiple rows
Accepts an integer (>=1) to denote the number of rows it spans across.
e.g. in a personal calendar, an event that goes on for multiple hours in a certain day
There are 4 rows:
1. 1st row contains an empty cell & 2 column headings
2. 2nd row contains the
Morning
row heading, along with
Work
which spans 2 rows under the
Saturday
column. The
Relax
entry spans 3 rows under the
Sunday
column.
3. 3rd row contains only the
Afternoon
row heading
4. 4th row contains only the
Dinner
entry since "Relax" spans into the column next to it.
<span> </span>
Allows you to control styling for smaller parts of your page, such as text
e.g. style a single word by wrapping the word in <span> tags & using inline CSS
e.g.
Primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.
7. sections
1. <tbody>
The
table body
element: used to section off long tables
Should contain
all
of the table's data,
excluding
the table headings.
2. <thead>
The
table heading
element: used to section off & contain the table headings
e.g.
The headings are contained inside
<thead>
the data is contained inside
<tbody>
. NOTE: the tale's head still requires a row in order to contain the table's headings.
3. <tfoot>
The
table foot
element: used to section off the bottom part of a long table
Often used to contain sums, differences & other
data results
.
e.g.
the footer contains the totals of the data in the table
Tables can be split into 3 main sections: head, body & footer.
8. styling with CSS
Tables by default are bland: no border, black font, & typeface is the same type used for other HTML elements
You can use
CSS
to
style tables
It is just like styling other elements. Specifically you can style the various aspects mentioned above.
e.g.
Specificity
The order by which the
browser
decides which
CSS styles
will be
displayed
A
best practice
in CSS is to style elements while using the
lowest degree of specificity,
so that if an element needs a new style, it is
easy to override.
Most specific to least specific:
IDs
Classes
Tags
Important
There is one thing that is even more specific than IDs:
!important
can be applied to specific attributes instead of full rules
will override any style no matter how specific it is.
should almost never be used. Once !important is used, it is very hard to override.
e.g.
Since !important is used on the p selector’s color attribute, all p elements will appear blue, even though there is a more specific .main p selector that sets the color attribute to red
The !important flag is only useful when an element appears the same way 100% of the time.
Since it's almost impossible to guarantee that this will be true throughout a project and over time, it's best to avoid !important altogether.
If you ever see !important used (or are ever tempted to use it yourself) we strongly recommend reorganizing your CSS. Making your CSS more flexible will typically fix the immediate problem and make your code more maintainable in the long run.
The only way to override an ID is to add another ID with additional styling.
To make styles easy to edit, it's best to style with a tag selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.
Style buttons differently when your mouse hovers over it.
Webpage
An individual page of a website
URL
Web addresses
e.g. http:// google.com
Uniform/Universal Resource Locator
Web Browser
Commonly referred to as "browser"
A software application
Purpose
For information resources on the World Wide Web
Retrieve
Present
Traverse
e.g. Google Chrome, Safari, Internet Explorer etc.
A browser's job is to
transform the code
in the HTML document into a
recognisable webpage
. It knows how to layout the page by following the HTML syntax
What we use to open HTML code & browsers renders (shows us) the file.
Code Bloat
The production of code that is seen as
unnecessarily
Long
Or otherwise wasteful of resources
Slow
Likely causes:
Inadequacies in
the language in which the code is written
the compiler used to compile it
the programmer writing it
While code bloat generally refers to
source code size
(as produced by the programmer), it can be used to refer instead to the
generated code size
, or even the
binary file size
.
Root Directory.
A main folder where all the files for a multi-page static website project are stored.
As the size of the projects you create grows, you may use additional folders within the main project folder to organise your code.
This is where web developers often store HTML files
Relative Path
a filename that shows the path to a local file (a file on the same website, such as ./index.html)
versus an absolute path (a full url, like www.codecademy.com/learn/ruby which is stored in a different folder).
The ./ in ./index.html tells the browser to look for the file in the current folder.
