CSS Basics Flashcards
What describes how input elements should look?
Ruleset
Which is the element or elements that will be targeted by the declarations that follow?
Selector
What does the declaration block follow?
The Selector
In CSS, what is a set of declarations contained in curly brackets {}
A Declaration Block
What consists of a property and the value it is to be set to?
A CSS rule-set consists of a selector and ________
A Declaration
Write CSS code to Target a set of elements named “sidebar” to have a width of 100 pixels.
.sidebar { width: 100px; }
In CSS, the property name is followed by a ?
Colon
In CSS, the value (after the property) is followed by a?
A semicolon.
In CSS, what is the method of adding coments to your code not to be shown or the temporarily disable “comment out” a block of code?
/* text here or code here */
When you’re writing a ruleset, try to keep your _______ as non-specific as possible.
Selectors
When you’re writing a ruleset, try to keep your selectors as 1)specific or 2)non-specific as possible.
2) Non specific.
In CSS what is used to specify (to target) a special state of the element?
Pseudo-class
In CSS what is used to style (target) specified parts of an element?
Pseudo-element
In CSS write a short ruleset to target the first letter of every paragraph. Also define this situation as either 1)pseudo-class or 2)pseudo-element
2) pseudo-element
p: :first-letter
In CSS write a short ruleset to generate hover behaviour over a container box named “foo”. Also define this situation as either 1)pseudo-class or 2)pseudo-element
1) Pseudo-Class
div. foo:hover {…}
To utilize CSS, we link to one or more _______________ that contain style rules which are applied to the linking HTML page.
External Stylesheets
Write HTML code including the opening and closing header section to link a stylesheet to the HTML page. (ignore answer ,,,)
,,<,,head,,>
,,<,,link rel=”stylesheet” type,,=”text/css” href=”./css/main.css”,,,>
,,<,,link rel=”stylesheet” type,,=”text/css” href=”./css/nav-bar.css”>
,,<,,/,,head,,>
Is “inline styling” to be avoided?
Yes. Engineers refer to this as maintaining the separation of concerns between HTML and CSS.
write HTML code (inline styling) to set the paragraph style to have a color of blue and a font of Arial. (in answer ignore ,,,)
,,<,,p style=”color: blue; font-family: Arial”,,>text text,,<,,/p>
What encodes information about how an element should look directly into the HTML (bypassing CSS)?
Inline Styles
Inline styles encode information about how an element should look directly into the HTML. Are you able to reuse these styles on other elements?
No
Are classes possible with inline styles?
No
What is DOM ?
Document Object Model
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree
If you include <style> and <link></link> elements in your document, they will be applied to the DOM \_\_\_\_\_\_\_\_\_ they are included in the document.</p>
</style>
In the order
If you include <style> and <link></link> elements in your document, they will be applied to the DOM in the order they are included in the document. Make sure you include them in the correct order, to avoid unexpected \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_.</p>
</style>
Cascade Issues
You just learned that a given HTML element’s appearance can be determined by numerous CSS rulesets…in real web pages — especially for bigger sites with more contributors — you often end up with style rules from multiple places targeting a specific element. If there are conflicts for a given property, the browser will choose the rule with the ________
Higher Specificity
In the CSS coding below which has more specificity:
1) div.foo p {color: green;}
2) .foo p {color: red;}
1) is more specific and will be chosen
Write CSS code to target all paragraphs in an element with the “foo” class to be red.
.foo p { color: red; }
CSS allows you to supply the keyword _______ in order to make a rule that might otherwise be lower in the cascade to override others.
!important
Write CSS using the word !important to apply the color red to the paragraph.
p { color: red !important; }
In CSS should the !important comand be avoided?
Yes, there are rare occasions when it’s the right move.
The Box Model: Name the total space taken up by an element using 5 constituent parts
Width, Height, Padding, Border, and Margin
What is the manner of calculating the total width of an element?
Add Width, plus 2x padding, plus 2x border, plus 2x margin.
To have the box model respect the widths we explicitly set, we can use the _______ CSS property.
The “box-sizing” CSS property.
Write the ruleset in CSS to make border-box the default for all elements
* { box-sizing: border box; }
To have the box model respect the widths we explicitly set, we can use the box-sizing CSS property. We set its value to ________
border-box.
write the ruleset in your CSS to make border-box the default for all elements.
* {
box-sizing: border-box;
}
What are the two common solutions to guarantee cross-browser consistency for default styles?
1) Meyer reset
2) Normalize.css
What is a CSS library that normalizes a subset of browser elements to be consistent between browsers?
normalize.css
To use any font beyond web safe fonts, you have to use ?
Webfonts.
Fonts that you load in the browser using HTML and then can reference in your CSS. Google provides a set for free.
Webfonts.
within ,<,,head> section is line
,<,,link href=”https://fonts.googleapis.com/css?family=Anton&display=swap”
for the following ,,<,,div class,,=,,”a”,,>,,
add in CSS instructions to assign to this class the font above with “sans-serif”, along with size of 30px and bold and color green.
div.a {
font-family: ‘Anton’, sans-serif;
font-size: 30px;
font-weight: bold;
color: green;
}
in CSS target h1 and give font of 40px
h1 {
font-size: 40px;
}
In CSS target all elements that have BOTH the .foo and .bar classes:
.foo.bar { }
In CSS target only paragraphs that have BOTH .foo and .bar
p.foo.bar { }
In CSS, if an element is part of the target, put it ______.
First. Then chain together the classes you want to target.
In CSS, target elements that have either .foo or .bar, or BOTH .bizz and .bang.
.foo, .bar, .bizz.bang { }
In CSS, target all paragraphs that appear with ASIDE elements
aside p { }
In CSS, what targets children of the parent element whether they’re immediate children or further down the hierarchy?
Descendant selectors
In CSS, target only elements that are the DIRECT children of an element. Using p as the element.
aside > p { }
The ::before and ::after are what?
Pseudo-elements that allow you to render content just before or after your element.
In CSS, write code to add an quotation mark before the blockquote.
blockquote: :before {
content: open-quote;
}
Write the HTML code to set the language of the page to English.
Write CSS code for the .inner lines below to appear on the same line. They all should have 100px height.
See answer
Write up HTML code for 1) a label that is the first name
2) give same label on another line the input id and type and name.
