HTML and CSS Flashcards
HTML
HTML is an interpreted language, used to describe the format and content of a webpage to a web browser. It uses tags as commands and each tag usually has additional attributes e.g.
is the tag
Width is an attribute
Height is an attribute
<p> </p>
Paragraph
<br></br>
Line break
Table
Table row
Table column
<h1></h1>
Heading 1
<img></img>
Include an image
<a>displayed link</a>
Hyperlink to a new page
<div></div>
Section of the document
<ol></ol>
n
Ordered/numbered list
<ul></ul>
Unordered list
<li>
</li>
List item
Defines the document type
Defines a comment
<a></a>
Defines a hyperlink
<b></b>
Defines bold text
Defines a documents body
A footer section in a document
Defines header for a document or section
Defines the root of a html document
<img></img>
Defines an image
Defines navigation links
CSS
Background-color
determines the colour of the background, can be specified as a named colour (e.g. red) or as red/green/blue in hex 6 digit number (e.g. A6F2CC)
CSS
Text-color
determines the colour of the font
CSS
Text-align
justifies the text
CSS
Float (left or right)
positions the div element to the right or left of the surrounding element
CSS
Border
colours and styles the border
CSS
align-content
Specifies the alignment between the lines inside a flexible container when the items do not use all available space
CSS
align-items
Specifies the alignment for items inside a flexible container
CSS
Align-self
Specifies the alignment for selected items inside a flexible container
CSS
background-attachment
Defines whether or not the back face of an element should be visible when facing the user
CSS
Background-blend-mode
Specifies the blending mode of each background layer (color/image)
CSS
Background-clip
Defines how far the background (color or image) should extend within an element
CSS
background-image
Specifies one or more background images for an element
CSS
background-origin
Specifies the origin position of a background image
CSS
Background-position
Specifies the position of a background image
CSS
background-repeat
Sets if/how a background image will be repeated
CSS
background-size
Specifies the size of the background images
CSS
border-bottom
A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
CSS
border-bottom-color
Sets the color of the bottom border
CSS
border-bottom-left-radius
Defines the radius of the border of the bottom-left corner
CSS
Border-bottom-style
Sets the style of the bottom border
CSS
border-bottom-width
Sets the width of the bottom border
CSS
Color
Sets the color of text
CSS
columns
A shorthand property for column-width and column-count
CSS
direction
Specifies the text direction/writing direction
CSS
float
Specifies whether or not a box should float
CSS
font
A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties
CSS
font-family
Specifies the font family for text
CSS
font-size
Specifies the font size of text
CSS
font-style
Specifies the font style for text
CSS
justify-content
Specifies the alignment between the items inside a flexible container when the items do not use all available space
CSS
width
Sets the width of an element
Inline CSS
<h1>
| This is called inline CSS because it is directly within the HTML</h1>
Embedded CSS
in the style tags in the head section
h1 {color: blue;}
The purpose of this is to separate the content (the words on your webpage and images), from the style (where they are positioned, the font you use, font size, colours)
What makes a good web design?
Limited colour palette Maximum 3 colours (+ black & white) Limited font selection Maximum 3 different font styles Common interface across all pages All pages in a site look similar with a similar layout Navigation bar Helps to find your way around the site
.bmp
Used for larger images, this file is the default type for paint files
.jpg
This file is usually high quality images such as photographs, but they can be quite large files. Jpg files fo not support transparency.
.gif
These tend to be “cartoony” images. But the format allows layering of different images to produce an animation.
.png
These are vector images and tend to be a compromise between the high quality jpg files and low quality gif images. PNG files support transparency.
