Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Break Into Tech Foundation > HTML & CSS > Flashcards

HTML & CSS Flashcards

1
Q

Block vs Inline Elements

A

HTML tags fall into one of these two categories. Block elements fill the entire width of the page. Inline elements sit next to one another and always go inside block elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

!doctype html (in open & closed brackets)

A

First line of HTML document.. Tells computer you are looking at a Hyper Text Markup Language page. MUST HAVE. Don’t forget to close at the very end of doc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

meta charset=”utf-8” (in open & closed brackets)

A

Tells the computer what character set you are using. Goes inside the Head tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

title (in open & closed brackets)

A

Site’s name. Goes inside Head tag. MUST HAVE.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

script (in open & closed brackets)

A

Links to external JavaScript files vis the src attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

link (in open & closed brackets)

A

Links to external stylesheets via the href attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

head (in open & closed brackets)

A

The area where your meta tags go. Includes charset & title. Content not visible to website viewer. MUST HAVE.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

body (in open & closed brackets)

A

Content for your website. Everything visible to website viewer. MUST HAVE.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

div (in open & closed brackets)

A

Use divs for different site sections, sidebars, footers, etc. All about organization. Can use divs within divs as nested elements and should be indented within your code. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

header (in open & closed brackets)

A

Site headers and headers for sections/articles. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

nav (in open & closed brackets)

A

Site navigation. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

section (in open & closed brackets)

A

Denote major sections of website. NOT allowed to put sections inside one another. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

article (in open & closed brackets)

A

Use for individual pieces of content on a site such as news articles, blog posts, or comments. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

aside (in open & closed brackets)

A

Use to add secondary type of content such as sidebars. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

footer (in open & closed brackets)

A

These tags are used for footers for your site or major pieces of content like articles or sections. STRUCTURAL TAG.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Structural Tags

A

Header, Nav, Main, Aside, Section, Article, Footer - can all be used to organize elements in place of Div tags.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Inline Tags

A

Bold, Italic, Line Breaks, Links to external sites using the href attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

img (self closing bracket)

A

Adds images. Be sure to put image link in src attribute and add a name in the alt attribute. SELF CLOSING.
<img></img>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

a (in open & closed brackets)

A

Adds links to external sites via the href attribute. INLINE ELE TAG. <a>…</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

span (in open & closed brackets)

A

Span tags allow you to add style to portions of inline text. You will add style with CSS. INLINE TAG. Example: <p>This text is plain <span>and this will be fancy!</span></p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

CSS Definition

A

Cascading Style Sheet. The design of the content on your website.

22
Q

font-family

A

Sets the font for the text in CSS. Will accept any web safe font.

Example:
font-family: Helvetica;

23
Q

text-align

A

Sets the alignment of the text in CSS. Options are left, right, center or justify.

Example:
text-align:center;

24
Q

font-style

A

In case you want to italicize text in CSS rather than using HTML tags. Options are normal, italic, and oblique.

Example:
font-style:italic;

25
Q

font-weight

A

Stying text in CSS in different weights without using bold HTML tags. Options are normal, bold, bolder, lighter or a number from 100 to 900.

Example:
font-weight:bold;

26
Q

text-transform

A

CSS. Allows you to make all text uppercase or lowercase. Options are capitalize, uppercase and lowercase.

Example:
text-transform:uppercase;

27
Q

font-variant

A

CSS. This is a fun one - you can actually make your text small caps by giving this attribute the descriptor: small-caps.

Example:
font-variant: small-caps;

28
Q

text-decoration

A

CSS. Underline, overline, line-through, none. This can be used to remove the default underline on elements.

Example:
text-decoration: none;

29
Q

line-height

A

CSS. The default is for the line-height to be equivalent to the font-size. If you want to make it smaller or bigger, you set it with the line-height property. Accepts pixels, em, numbers, and percentages.

Example:
line-height: 150%;

30
Q

text-indent

A

CSS. Sets the width of the tab indent - takes pixels, ems, or percentages.

Example:
Text-indent: 3em;

31
Q

word-spacing & letter-spacing

A

CSS. Sets the space between words or letters. Accepts pixels or ems, also accepts negative values.

Example:
letter-spacing:-2px;
word-spacing: 3px;

32
Q

Classes - CSS

A

A group of elements that are the same or similar. Can have as many elements as you want in a class. Each element can be the member of multiple classes.

Add to HTML:

<div>

~~~
Add to CSS:
.bio {
width: 100px;
height: 300px;
background: purple;
}</div>

~~~

33
Q

IDs - CSS

A

Singular identifier of ONE html tag.

Add to HTML:

<div>

~~~
Add to CSS:
#main {
width: 200px;
height: 200px;
}</div>

~~~

34
Q

Class & ID naming

A

Can’t start a name with a number and use a name that relates to what the element is, but not how it looks.

35
Q

CSS Text Styles

A

color, font-family, text-align, font-style, font-weight, text-transform, font-variant, text-decoration, line-height, text-indent, word-spacing, letter-spacing.

36
Q

Box Model

A

Every element in an HTML document can be considered a box. Each box has characteristics like width, height, border, margin and padding. The values of these characteristics can all be altered with CSS.

37
Q

Height & Width - Box Model

A

my-box {

These set the height and width of an element, and they accept either pixel dimensions or percentages. Percentages set the height and width relative to its parent element.

width:200px;
height:200px;
}

width:100%;
height:20%;
}

38
Q

Margin - Box Model

A

margin sets the distance between one element and the adjacent element, as if it’s pushing elements away from one another. margin accepts pixels or percentages.

39
Q

Padding - Box Model

A

is for inside the element. makes the element itself bigger. It also accepts pixels or percentages.

40
Q

Floating - CSS

A

Allows you to float elements alongside one another which is key to creating multi-column web layouts. You can float elements using values: left, right or none.

WARNING: floating an element removes it from the document flow. Be sure to use the clear or overflow properties to fix these issues.

41
Q

Clear - CSS

A

Tells your element to stay clear of floated elements using the values: none, both, left or right.

Example:
.clear-fix {
   clear:both;
   width:100%;
}
42
Q

Overflow - CSS

A

Useful for telling an element what to do with its child elements that may overflow their container. overflow: auto; tells a parent element to automatically increase to the size big enough to encapsulate all of the floated elements within it. Overflow uses the values: auto, scroll or hidden.

Example:
.parent-div {
overflow: auto;
}

43
Q

Position - CSS

A

The position property sets the position of the element relative to its parent, the website, or the browser window. The default position for all elements is static. Relative sets the position relative to its parent element, absolute sets the position relative to the website, and fixed sets it relative to the browser window.

In order to then set the element’s position, you need to use the top, left, bottom & right properties. They each accept pixels or percentages.

Example:
#my-modal {
   position: fixed;
   top: 10px;
   left: 500px;
}
44
Q

Shortening a CSS Declaration

A

Condensing CSS code into a single line where each number represents top, right, bottom and left (clockwise).

Example:
.sidebar {
margin: 0 10px 20px 30px;
}

45
Q

Add Comments for Organization - CSS

A 
Examples:
/* Hello there! I am a comment. */

or

/* Hello there!
I am a comment with many lines.
So there. */

Or calling attention to sections like a header:
/****** HEADER AREA ******/
46
Q

Add Comments to HTML

A

Example:

Or

47
Q

Image Link

A

This is for using an image as a clickable link. Not just inserting an image!

<a><img></img></a>

48
Q

Internal Link

A

If you need an internal link, instead of the url, you will link to the file location.
Example: <a>About Me</a>

49
Q

Anchor Link

A

<a>Text!</a>

**If you want to have the link pop up in a new window, add target=”_BLANK” example below.
<a>Text!</a>

50
Q

Inserting an Image

A

Self-closing tag. src = URL for the image. alt = alternative attribute. Images should be smaller than 1mb for fast load times.

<img></img>

Example:
<img></img>

51
Q

ampersand (&) code

A

&

Break Into Tech Foundation (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions