Day 1 Flashcards
True or false: When it comes to block type elements. Their height will grow to match the content and they stack one on top of each other.
True
We can turn off the default styling by setting the margin of the _______ element to value of ____.
body, zero
When you put the value of hex code only in its first three values (e.g. #123) it will be converted to __________.
112233
To start using internal CSS. We need to place ________ tag inside the < head > tag.
< style >
True or false: When you set a width on an element you are only setting the width on the actual content itself!
True
True or false: Spaces can cause problems when naming classes and IDs. Use hyphens if you want to space your names.
True
In CSS, the class attribute is referenced by using a __________.
Period / full stop / dot
Tags are inside of ______.
<>
Tag and ________ are used interchangeably.
Element
The ______ keyword will automatically place all the available space on that side.
auto
If we use auto on both the left and the right margins, it will center the element on the page. Like this margin: ____________;
0 auto
True or false: Attributes are normally followed by an equal sign and quotation marks
True
True or false: The browser comes with a default space to prevent text from touching the edge of the window. Just to make it more readable if nobody did any CSS on a website.
True
This element contains the content that will be visible for the user when they visit a page.
< body >
True or false: You can control the border of the different sides independently.
True
True or false: Images should be placed in a subfolder.
True
Next, we write ______ tag to indicate that we’re starting to write HTML.
< html >
True or false: Headings from < h2 > to < h6 > can not be used all over again.
False - headings from < h2 > to < h6 > can be used all over again as long as it makes sense and are in an equal value.
What are the three primary ways to select something.
Element selector, class selector, and id selector.
True or false: Margin is empty space while padding is more background.
True
True or false: The < link > tag is a self-closing tag.
True
You also need the _____ attribute or the relationship. This attribute specifies the relationship between the current document (HTML) and the linked document (in this case; stylesheet).
rel
What is shorthand for border with solid, 3px wide, and colored yellow?
border: 3px solid yellow;
Internal CSS is awesome, but what if we want to change the background color, or text color, to be the same on ALL of our pages? We then use _________.
External CSS
If you wanted 10px of margin in all sides:
margin: 10px;
It’s called a ______________ when linking a part within the same page or when you link another page from your website.
Relative path
Sets background color.
background-color
In a tag, there is an ________ and a ________.
Opening tag and a closing tag
Everything from an opening and closing tag is called an ________.
Element
This tag contains your regular text.
Paragraph
True or false: It’s common to have a dedicated subfolder for your external CSS. It is also common to name your external CSS file as style.css.
True
How to write comments in CSS?
/* comment here */
Use the _____ tag to specify bold text without any extra importance!
< b >
True or false: Attributes are always within the closing tag.
False - Attributes are always within the opening tag.
While some are inline, most elements are ________ elements by default.
block level or block
True or false: You can have more than one < title >element in an HTML document.
False
Lists have default styling, they are _______ at default.
Indented
There are different ways to add CSS to your HTML file, we are going to start now by using __________, it’s the simplest way (and should be used for demo purposes only).
Inline CSS
File naming an HTML file should be _________.
Descriptive
Another term for property: value; pair.
Declaration
There must be a ______ between property and value.
Colon
If you want to link a page that is NOT part of your website, it MUST start with _________ or ________ to let the browser know that you’re linking an external website. Otherwise, it’s not going to work.
http:// or https://
The main folder is called the _______.
Root folder
The< link > element is an _________ element, it contains attributes only.
Empty
What are the 6 layout elements?
Header, main, section, footer, nav, and div.
The < strong > and < em > are both examples of _______ elements.
Inline elements
There is a shorthand margin property. Its sequenced is like _____________.
Clock-wise
The __________ are used to control the position of an element relative to those around it.
Margin
The ________ denotes hierarchy and page structure.
Headings
This attribute allows you to write CSS in an element.
Style attribute
True or false: There can only be one< body > element in an HTML document.
True
We wrap everything in _____ to tell browser what is what.
Tags
True or false: We don’t have to use four values when doing the shorthand method.
True
The < img > is a _________ tag (void elements or singleton tag). It means that it doesn’t require a closing tag to be valid.
Self-closing
Images are not valid without an _______ attribute. Even it contains src attribute.
alt
Then we have the ______ tag, nothing inside of here is visible to the visitor.
< head >
There must be a __________ after the value.
Semicolon
True or false: Try to avoid setting a height of a block type element.
True
True or false: One external CSS file means it controls all of the styles of all of your pages. If you delete or change something in your stylesheet, it is changing for ALL of the pages.
True
When naming a homepage, it must be named ________.
index.html
CSS is all about _________ pairs.
property: value;
True or false: The class and ID are both attributes that we can put in most of elements.
True
Closing tag include a _________ between <>.
Forward slash
With an ______________, we can have one stylesheet controlling ALL of our pages at the same time.
External CSS
The tag of anchor tag.
< a >
True or false: Each HTML heading has a default size. However, you can specify the size for any heading with thestyleattribute, using the CSSfont-size property.
True
This tag is located inside of the < head > of the document. It is shown in the browser’s title bar or in the page’s tab.
< title >
If you want to add left border, what property you should use?
border-left
A link or < a > uses href attribute to link to an external site or page within your page. While images use ______ attribute.
src
It takes three properties to set a border. We needed to do all of these three properties to get a border work properly. What are they?
border-width, border-style, and border-color
True or false: You can use the same ID in more than one element in a page.
False - You can only have one specific ID per page.
If you wanted 10px of margin for both top and bottom but 20px for left and right:
margin: 10px 20px;
In the __________. The total width and height of an element is calculated by adding all the different parts of the element together.
Box model
It’s recommended to use __________ when defining colors.
Hex values/code
A CSS ________ is made up of a selector, and property: value declarations.
Rule
The ______ tag is used to link two documents together.
< link >
True or false: In general, inline CSS is never used.
True
This property sets the font size. For now let’s stick to px (pixels).
font-size
Margin accept a set width, but you can also use the _______ keyword.
auto
True or false: You can center an element without the need of specifying its width first
False - Centering an element only works if you give it a width first!
The text inside these tags has stress emphasis. Browser make this text italic.
< em >
True or false: You can get away by just using div and everything would work and be fine. But using header, main, section, footer, and nav makes more sense.
True
Sometimes you’ll also see a _____ attribute inside of the < link > element, but it’s not that important anymore.
type
True or false: Anchor tag is completely useless if you did not put href attribute and you did not specify where do you want the link to go.
True
In CSS, an ID is represented by a _______.
hashtag
Is this valid or not: < img src=”image.jpg” / >
Yes but it’s now deprecated. You don’t need to put / at end of tag.
The ________ are what we want to change in CSS (e.g. color, font-size, font-weight)
Properties
Instead of using the < style > element like in the previous lesson, we use _______ element to connect our external CSS.
< link >
Shortcut for commenting
Ctrl + /
This tag indicates strong importance. Browser make this text bold.
< strong >
This tag is not visible in the page, but shows up in the tab of the browser and in search results.
< title >
What is the tag for unordered list?
< ul >
True or false: Don’t use spaces when naming files, use underscore or hyphens instead.
True
The _________ provideadditional informationabout elements.
Attributes
The anchor tag will not work without _______ attribute.
href
Colors can be set with ___________, ________, ________, or _______.
Keywords, hex codes, rgb, or hsl values.
Each bullet or numbered list in a list item is represented by ______ tag.
< li >
The _______ are what we want to set that property to.
Values
True or false: You can use HTML headings whenever you want to make a text big or bold.
False - Use HTML headings for headings only. Don’t use headings to make textBIGorbold.
True or false: It’s much easier to just use class for everything. You’re lowering your cognitive load.
True
True or false: ID will NOT overwrite a class if they are both selecting the same thing!
False - ID will overwrite a class if they are both selecting the same thing!
What is the tag for ordered list?
< ol >
Aligns the text to the left, right, or center.
text-align
This is the very first line of code we should write in a HTML document. This tells the browser that this is an HTML5 document.
< !DOCTYPE html >
True or false: To use an element as selector we just need to put its name without the <>.
True
The_______ element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
< body >
True or false: You can include numbers when naming classes and IDs, and number can be the first character.
False - You can include numbers but the number cannot be the first character.
The _______ element is a container for metadata (data about data) and is placed between the html tag and the body tag.
< head >
What is the HTML tag for paragraph element?
< p >
True or false: If it is a decorative element or logo, it doesn’t need alt text but it does STILL require the alt attribute.
True
While_______ defines the least important heading.
< h6 >
True or false: It’s considered bad practice to link off images to external site. Some sites blocked you from doing that. It’s more recommended to use your own images.
True
This adds a border around your element. They are similar to a stroke if you are used to vector software.
Border
There are six levels of headings that we can use fromto______ to ______ tags.
< h1 > to < h6 >
How to write comments in HTML?
< !– comment here – >
True or false: You can actually write HTML, CSS, and JS inside an HTML document.
True
True or false: What the instructor is encourage for you to do is DON’T USE AN ID.
True
The _____ attribute specifies an alternate text for the image, if the image for some reason cannot be displayed. Helpful for people who use screen readers.
alt
True or false: The page title is used by search engine algorithms to decide the order when listing pages in search results.
True
This tag represents the ‘root’ of an HTML document.
< html >
True or false: ID is an individual, whereas a class is a group; a class can be used all over and over again.
True
It’s called an _____________ if we link a page outside our website.
Absolute path
What are the two types of lists?
Ordered and unordered list
In CSS, ________ are patterns used to select the element(s) you want to style.
Selectors
True or false: The index.html file must be in a subfolder.
False - The index.html file must be in the root folder, not in any of the subfolders.
What is the most basic boilerplate for HTML? It contains atleast the 5 main elements
It must contain < !DOCTYPE html >, < html >, < head >, < title >, < body >
True or false: Can list be used to make navigation bar?
True
True or false: Like links, we can point external images by including the entire URL of the image, or we can point to images within our site by writing its file name.
True
Images are like links, and that they require an _________ to work.
Attribute
True or false: Describe the image as much as you can when using alt attribute.
True
Used to link a different location within the current page or to another page.
Anchor tag or < a >
True or false: Generally, there should be just one < h1 > per page.
True
The ______ defines the most important heading.
< h1 >
The _________ is to control the positioning of the content inside of an element.
Padding
This is another way of writing CSS, much easier than inline CSS.
Internal CSS
True or false: You need to include “an image of” in an alt text.
False: You do NOT need to include “an image of” in an alt text.
True or false: Classes can be used only once if you wanted to.
True
It tells the browser what the content we are writing actually is.
HTML
True or false: Image element uses href attribute to point the path of the image file or URL.
False - it uses src attribute
The _______ is data about the HTML document.
Metadata
True or false: Borders do also have a shorthand property and the order you put them in doesn’t matter.
True
