CSS Foundation Flashcards
What does CSS stand for?
Cascading Style Sheet
What is CSS used for?
CSS is used to style web pages e.g. the layout, colour etc.
True or false:
CSS is used to create page layouts in websites?
True.
True or false:
There is more than one way to add CSS to a web page.
True e.g. you can add CSS via an external stylesheet or in the style element in the head of a web page.
What is a CSS ‘style block’?
It is an opening and closing CSS tag with CSS code in between, which is located in the head element.
What are the opening and closing tags for a CSS style block?
No, there is no HTML code, just CSS.
In this code, which is the ‘selector’:
In this code, which is the value:
‘blue’
In this code, which is the property:
‘color’
What would you call this chunk of code:
A CSS declaration block, as there are more than one declarations:
What does this code do:
It selects ALL h2 tags in the page(s), and sets the text color to blue.
If you don’t set the font-size in CSS, what does the web browser do?
It will use the default/automatic font-size set by the browser.
How many CSS declarations do we have in this chunk of code: {color: red; font-size: 24px;}
There are two declarations:
color: red;
font-size: 24 px;
What are the Web Developer Tools and how can you access them?
They are tools to assist web developers which are accessible via hitting F12 in Chrome.
How do you inspect the element in Google Chrome?
Via one of two ways:
- Select a section of the page, right click and select Inspect Element
- Select a section of the page and press Ctrl + Shift + i
What does this tag do?
Links the web page to an external CSS style sheet.
What would the code look like for a link tag which points to an external CSS style sheet called page.css?
What do div tags do?
Div tags create sections/divisions in the web page.
Why does it sometimes help to leave a comment next to a closing tag?
To clearly mark where the tag ends.
Why would you indent code?
To clearly show which tags are nested/sub tags to make the code easier to read.
What do you call the logical meaning of HTML tags? And what does that term mean?
The semantic meaning. A semantic element clearly describes its meaning to both the browser and the developer.
What is the SEMANTIC meaning of these tags:
What are the four ways to set the color value in CSS?
The code appears as the following:
- RGB
- HSL
- HEX
- Named colours
How can you quickly access a colour picker?
- Select Inspect Element (or CTRL+SHIFT+I)
- Select the colour box next to any code with a colour.
- Use SHIFT+click to change the colour method.
When changing code in the web developer tools, WHERE are you changing the code?
You are changing the code that is ONLY in the browser’s memory. Your changes will not be saved to the web page.
What does a CSS comment look like?
/* This is a CSS comment */
When code is in HTML or CSS comments, what does the browser do when it reads those comments?
Ignore all text in the Comments.
What’s a prototype web page?
A page built quickly as a mock up.
What CSS color type/value gives you the LEAST amount of control?
Name colours.
What color will the h1 tag be and why?
h1 {
color: red;
color: blue;
color: green;
}
Green, because the browser will use the last line of code.
What is the CSS property text-transform used for and what values can be defined?
Text-transform is used primarily for capitalization.
The following can values be defined:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
What is the CSS property text-align used for and what values can be defined?
To align text to the center, left, right or justify
What is the CSS property text-decoration used for and what values can be defined?
Text-decoration sets the decoration of the text e.g. overline, line-through, underline
What is the CSS property text-indent used for and what values can be defined?
It indents the first line by how many pixels you set.
What term is used to mean ‘render the web page’?
For the browser to display the web page.
What is the CSS property font-weight used for and what values can be defined?
To change the font weight, make it bolder, lighter, bold or normal
What is the difference between these two selectors:
p.italic
p .italic
When setting font weight, you have the options ‘bold’ and ‘bolder’ … is there any difference displayed in the browser?
There is no visible difference in most browsers.
True or false: Not all of the official CSS rules work in the web browsers
True
What are the 3 basic font types?
Sans serif, Serif, Monospace
What are Web Safe Fonts?
Fonts that you are SURE people have on their computers.
When you declare your fonts after the font-family property, what do you need to do for the fonts which have more than one word as part of their name? For example, Times New Roman.
Ensure that the font is enclosed with quotes e.g.
{font-family:
“Times New Roman”, Arial, Verdana}
What CSS property will set the size of a text?
font-size
How would you set the font size in a body selector to 14px?
Using only ONE declaration block, how would you set both the h1 and h2 tags to have a red text color?
Using only ONE declaration block, how would you set the text color to black using the LONG FORM HEX code for both the h1 and h2 tags?
What is a pixel?
The pixel (a word invented from “picture element”) is the basic unit of programmable color on a computer display or in a computer image.
Which option below is true?
a) When you set a font size to pixels, the font size can change depending on the size of the browser window.
b) When you set font size to pixels, the font size is fixed - it does not change.
c) Both are false.
b) When you set font size to pixels, the font size is fixed - it does not change.
What is VW short for?
Viewport Width
VW = viewport width. How is this best described?
Viewport width is a relative unit of measure - it flexes.
If you set your font size to 5vw, what will happen to the font when you EXPAND the browser window?
The font size will increase as you expand it.
VW (viewport width) is a slice of the WIDTH of your browser window, so what is 4 vw?
a) 4/100th of the width of your screen.
b) 4% of the width of your screen.
c) 4vw is equal to 4 slices out of 100 of your screen’s width
d) All of the above.
d) All of the above.
When would you use Viewport Width?
For creating websites for tablets and mobile phones.
What is the viewport?
The browser window.
When creating websites or web apps for tablets or any mobile device, which unit of measure should you use?
Viewport Width (vw)
What font size type is an ‘em’?
Relative
The ‘em’ is a relative font size, but relative to what?
The base font size set for the page.
What are the typical child tags of ol?
tr tag
What will the font family of the p tags be, if I set the body to use a monospace font?
Since p is a child of body, it will use the same monospace font.
What are one of the benefits of recognising parent / child relationships within CSS?
We can make the code cleaner.
Can the CSS color property be used with CSS inheritance? For example:
Yes, it is inherited.
With regards to CSS inheritance, what is the easiest way to set the text color in your entire page?
Set it via the body tag.
How do you add a CSS comment?
Please choose the correct way to add the font family value:
a) Comic Sans MS, cursive, sans-serif
b) “Lucida Sans Unicode, “Lucida Grande”, sans-serif
c) Lucida Sans Unicode, “Lucida Grande”, sans-serif
d) “Comic Sans MS”, cursive, sans-serif
d) “Comic Sans MS”, cursive, sans-serif
What is the default font family type in the Chrome web browser?
Serif
Why would you want to use Google fonts in your web pages?
By using Google fonts, you can select from 700 hundred fonts instead of just the 13 web safe fonts.
Which is TRUE below:
a) The web browser loads the page from the bottom up.
b) You cannot use Google Fonts unless the web browser is Chrome.
c) The web browser loads the page from the top down.
d) There are more web safe fonts than Google Fonts.
c) The web browser loads the page from the top down.
I’ve used a Google Font in the code below, please add it to the p tag selector:
What is the @font-face CSS rule?
With the @font-face rule, web designers no longer have to use one of the “web-safe” fonts. In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
Why should you be using the browser’s developer tools?
To save time; because you get instant feedback with the browser’s developer tools.
True or false: the changes made to web pages in the browser developer tools are permanent.
False.
What is the easiest way to select colors for your web pages?
Use the browser’s developer tools and use the color pickers there.
What are the three ways to add CSS to a page?
- Inline - by using the style attribute in HTML elements
- Internal - by using a style element in the head section
- External - by using an external CSS file
If you put CSS right on the tag, this is called?
Inline CSS
If you use ‘inline’ CSS, that is, CSS code directly applied to a tag:
a) It will always take effect.
b) CSS in the style block will override it.
c) CSS in the external stylesheet will win.
a) It will always take effect.
Is this true: class selectors will override tag selectors?
True
Which color will the text be and why:
Brown, because the last code wins.
Add the following image, to the background of the body tag, with CSS:
frog.gif
Please choose the proper ‘background-repeat:’ value:
a) repeat-x
b) repeat-y
c) Both are good.
c) Both are good.
Please add the css declaration code, so that a background image is fixed.
What CSS code will cause a background image to fill the entire space in a tag?
When using the compact way to add background images with CSS, what is the proper order of the code:
a) background: link, color, repeat, position, attachment
b) background: color, link, position attachment, repeat
c) background: color, link, repeat, attachment, position
d) background: color, link, repeat, position, attachment
d) background: color, link, repeat, position, attachment
Why would you want to put your CSS code into external style sheets?
To make your web pages cleaner by sharing CSS code across many web pages.
What is the box model?
a) The box model is another word for the browser window.
b) The box model is a virtual box that wraps around tags.
c) The box model is an actual model box that you build with plastic that helps you visualize tags.
b) The box model is a virtual box that wraps around tags.
What is the best way to describe a responsive layout?
a) It is a layout type that causes the web page to resize and reflow with the size of the browser window.
b) It is a layout type that has an input box that responds to user input.
c) It is a layout type that has a fixed width and only responds to JavaScript code.
a) It is a layout type that causes the web page to resize and reflow with the size of the browser window.
In the box model, what is the center of the box?
The center of the box is the content.
From the INSIDE out, what is the proper order of the box model?
a) content - border - margin - padding
b) content - padding - margin - border
c) content - padding - border - margin
d) padding - margin - border - content
c) content - padding - border - margin
In the Chrome Developer Tools, what color does it highlight the content portion of the box model?
Blue
In Chrome, Ctrl + Shift + I does what?
Opens the ‘inspect element’ view in the browser development tools window.
True or false: Does the box model have anything to do with page layouts?
True
What does ‘padding’ do?
It creates a space between the content and the border, in the tag
Which of the following is correct:
- Padding is in between the border and the content.
- Margins are on the outside of the border, of a tag.
- Margins are used to position tags in the page.
- All of the above are true!
- All of the above are true!
If you want to shift the text inside a tag, but not the tag itself, you should use:
- Padding
- Margins
- Borders
- None of the above
- Padding
Which of the following is NOT a possible border-style value:
- Pixel
- Dotted
- Double
- Dashed
- Solid
- Pixel
Is this true: the margin is on the outside of the tag’s borders.
True
What do web browsers automatically give div and p tags?
Margins and padding
What is the shorthand order of specifying margins?
top, right, bottom, left
In the following code, how many pixels is the bottom margin? margin: 10px 25px 15px 50px;
15px
In the following code, how many pixels is the top margin? margin: 12px 100px 12px 50px;
12px
This is another form of shorthand CSS; what is the right and left margin size? margin: 10px 25px;
25px
When calculating how much width a tag takes up in the page, what parts of the box model do you have to include?
padding, margins, borders and the width of the tag
How do you center align tags (from left to right) with CSS?
- Use the center tag.
- Use the center CSS property
- Use the value of ‘auto’ on left and right margins.
- Use the value of ‘auto’ on left and right padding.
- Use the value of ‘auto’ on left and right margins.
How would you update the following CSS selector code, so that the id of ‘middle’, is centered on the page:
Why do web designers set the margins (on div tags) to auto, on the left and the right?
To center align div tags horizontally - on the left and the right.
What is a selector?
A CSS selector is the part of a CSS rule set that actually selects the content you want to style. For example using h1, which is a selector, would select the h1 element.
What is the shorthand hexadecimal value for the colour of white?
fff
What is the shorthand hexadecimal value for the colour of black?
000
Hexadecimal color codes are based on what basic colors?
Red, green and blue.
What color is this hexadecimal color: #FF0000
Red. The first two characters ‘FF’ represent the red portion of RGB.
What color is this hexadecimal color: #0000FF
Blue. The last two characters ‘FF’ represent the blue portion of RGB.
If you set the height of a tag using %, what do you need to do for it to work?
- You have to be sure that the tag is inside another tag, with a height set to %.
- You have to be sure that the tag is inside another tag where its height is set to pixels.
- You have to be sure that you set the width to % too.
- None of the above.
- You have to be sure that the tag is inside another tag where its height is set to pixels.
Which of the following code, properly adds inline CSS to the div tag?
What is another official name for a pair of tags?
An element.
How do you get rounded corners on a tag?
Use the border-radius property.
How do you make a tag transparent?
Use the property: opacity
Name three reasons why the height property doesn’t work on the span tag.
- Because by default, the span tag does not support the height property.
- Because span is an inline tag.
- Because most of the time the height property only works on block level tags.
What does ‘refactoring’ mean in coding?
It means cleaning up/tidying your code.
Why should we be refactoring our code every so often?
Refactoring regularly will help to keep the code cleaner, which will make it easier to read for you and other coders.
What is a pseudo-class selector? Give an example of it’s use.
A pseudo-class selector is a special selector type. It can be a selector based on something happening - like a user rolling over a link.
What is the format of a pseudo-class selector?
Please select the pseudo-class selector in the options below:
What is the ‘hover state’?
How do you activate the pseudo-class’ a:active state?
a:active becomes active when you click down on the a tag.
What is the proper order of the ‘a’ tag pseudo-classes?
a: link
a: visited
a: hover
a: active
Check out this code; which color will the li text be and why?
It will be red, because the way CSS works, is that the more specific rule always wins.
Is this true: More specific CSS selectors/rules, override less specific rules.
True.
When you set a tag to “display: block”, what does that do to the tag?
It changes to a block-level tag and causes the tag to extend all the way across its enclosing tag.
What are the options with CSS transitions and what do they do?
‘ease in’ and ‘ease out’
They specify a slow transition effect, in and out.
What are the four basic list style types?
none, disc, square and circle
If you want to change your bullet points in your list to another style, what CSS code would you use?
How would you set the width on a class, ID or element selector?
If the base font size of a page is 12 pixels, how big is the font size of an h1 tag if we set it to 3em and why?
36 px.
This is because the base font size set is multiplied by the number of ems set. In this case, 3 x 12px = 36 px
Choose the selector that says:
Select any h1 that also has a class of ‘super-header’:
What does the list style type of ‘lower-alpha’ appear like?
a.
b.
c.
Why would we use the css property ‘overflow: hidden’ on ul tags?
To hide the list item bullets, but the items would still appear in a list.
Why would you want to add the ccs code
‘display: block;’ to an ‘a’ tag selector?
By default an ‘a’ tag is an inline element.
Setting it to a ‘block’ level element would allow you to add a width property.
When creating a horizontal (left to right) menu with list (li) tags, what CSS property (and value) do you need to add, to have the list position itself left to right?
float: left;
It is fluid.
How would you best describe a liquid layout?
liquid layouts reflow.
How are responsive layouts different from liquid layouts?
Responsive layouts are fluid but they also shift elements to fit the page.
How do you set the height of a tag?
Using the Height CSS property.
What overflow option values do you have?
hidden, scroll, auto
