CSS
What is the hexadecimal representation of the color black?
#000000
The CSS selector to select any element with a class attribute of 'foo' is:
.foo
List/describe some common CSS pseudo-class selectors
1) :hover -styles an element for an "event" (sorta like JS) of a user hovering their mouse over it 2) :active -to style an activated element (a clicked/tapped element, for example) 3) :visited -styles visited links 4) :first-child -represents the first element among a group of sibling elements 5) last-child -pseudo-class to select the last child of its parent element 6) :nth-child -selects the nth child of its parent element. Note the syntax is: elementname:nth-child("number") {} where "number" stands for whatever numerical value we need
What are the different ways of applying CSS styling to HTML?
1) Inline styling (uses the HTML style="" attribute, generally want to avoid using this method), 2) Internal styling (for use when a single document has a unique style, done by using <style> element placed within the <head> element), 3) external style sheet (MOST COMMON/BEST TO USE, uses the <link> element inside the <head> tag)
Describe the syntax of CSS
A CSS "rule-set" consists of a selector and a declaration block. We use a selector to select the HTML item that we want to mess with, followed by curly brackets (which is the declaration block). Within the curly brackets, we list our declaration(s), and end each one with a ; A declaration is basically just a propertyname: property value; Note: it looks very similar to a JavaScript object
What does CSS stand for? What is it's purpose?
Cascading Style Sheets, describes how HTML elements are to be displayed on a website
The CSS selector to select the first <li> in every list on the page is: A) ol:first-child B) li > first-child C) li:my-child(1) D) li:first-child
D) li:first-child
Explain how to use the <link> element for external CSS styling
Each page that uses the external style sheet must include a reference to it inside of a <link> element in its <head> tag. The attributes often used in this tag are: rel="", type="", and href="". The "rel" attribute stand for "relationship", the value is normally "stylesheet". the "type" attribute designates the internet media type, and a value of "text/css" tells browser that content is CSS. The "href" attribute is the location of the external CSS sheet. Just as the main HTML page is usually saved with the suffix "index.html", CSS sheets are usually saved with "style.css" Note: they can be named anything, but should end with .css
Describe how we go about using CSS to change the style of an HTML element
If you want to change the appearance of a standard HTML element, then you're going to need to use a CSS property, and its value. After choosing the selector of the element you want to style, you will then need to pick which CSS properties and values you want to use to style your element.
What kind of things does CSS allow you to do?
It allows you to control the color of text, style of fonts, the spacing between blocks of text, layout design and much more
What does the float property do?
It removes the default breaking property that most HTML elements have. So instead of stacking on top of each other, they "float" next to each other. Float is helpful when we are trying to create a multi column layout using the box model.
What is a CSS pseudo-class selector? What's the syntax?
It's a keyword added to a selector that specifies a specific state of the selected element. Syntax is: elementname:pseudo-classselector {}
What is a framework? Why do we use them?
It's a package consisting of files and folders of standardized code to support development and design. They help save dev time
How many different properties are there in CSS/CSS3?
Over 350. Note: no need to memorize them all, and no one expects you to. Just Google it as needed
How do we comment in CSS?
Single and multi-line comments are both denoted by wrapping them in /* */
What's the best way to really learn and master HTML and CSS?
build as many websites as possible, you will learn by implementing different designs
To set a font using CSS, the correct property is?
font-family
What are some benefits of using an external style sheet for CSS?
helps keep the linked HTML pages looking and feeling consistent, and it's easier to make adjustments
Describe the Child Combinator/Selector
Similar to Descendant Combinator, except it targets only immediate child elements. Also, in the Descendant Comb., we use a space to separate our two selectors, but with this one we use a > so the syntax is: x > y {} which means "select all y where the IMMEDIATE parent is x" (y can't be wrapped by another element)
What are the advantages of using CSS?
saves time, loads pages faster, easier maintenance, multiple device compatibilities.
To make every letter in a word CAPITALIZED, what CSS property/value pair would we use?
text-transform: uppercase;
Describe the box model
A box that wraps around EVERY HTML element. It consists of the following stuff, in order (starting from the innermost area of the box moving outwards): content, padding, border, margin.
Describe the Class Selectors
It's declared with a dot followed by the class name, and will select all HTML elements with that class name. Ex.: .iamaclass{} We can reuse styling/reduce our code (remember DRY) by applying the same styling to multiple elements, but who all have the same class. Note: we can also specify that only a specific HTML element should be affected by a class styling using this syntax: elementname.classname {}
What are the four options when setting padding or margin in CSS padding: 20px 20px 20px 20px;?
Padding is a shorthand property for the individual properties of padding-top, -right, -bottom, -left (values displayed in that order). Padding properties can have values of: length (expressed in px, pt, cm, etc.), % (specifies padding in % of width of containing element), and inherit (specifies that padding will be inherited from parent element)
The key to understanding CSS is understanding selectors. What do selectors do?
Selectors allow you to retrieve specific HTML elements and apply styles to them so that you can make beautiful websites!
What are the primary CSS selectors?
Tag Selectors, ID Selectors, Class Selectors
What CSS property would you use to center text?
Text-align
What are the three main techniques for using CSS to lay out a web page? Which technique is the most well-known?
The Box Model, the Flexbox Model, the Grid Model. Most known/used is the box model
What is the box model in CSS?
The box model is a method used to style CSS/HTML, and consists of: margins (outermost edges), then border, then padding, and lastly content.
What is a front-end/CSS framework? Why are they useful?
They consist of files and folders of standardized code - HTML, CSS, and JS documents. They also help the creation of standard classes as pre-written CSS property values. Most CSS frameworks also contain at least a grid system for responsive web design. CSS frameworks save development time, create consistency, and enforce style guidelines.
How can we apply the same CSS styling to multiple elements in a DRY way?
We can use "Grouping Selectors", which means we just list the tag name, id, etc. of the HTML items we want to apply the same styling to, and separate them from each other with commas
Describe the CSS Tag Selector
We name the HTML tag that we are trying to select, followed by a { with all the properties/values inside and close with } Ex.: body { color: black; font-size: 1.5 em; }
Describe the ID Selector
We use the hash symbol # followed by the ID of the HTML element that we want to select. Since an ID value can only be used once per HTML document, the ID Selector will only affect that one HTML element with that specific ID, which makes this selector inflexible
Describe the Descendant Combinator/Selector
lets you combine two or more selectors to be more specific in your selection method. Ex.: #outerelement .innerelement {} means "select the elements that have a class of "innerelement" AND that are nested inside an element with an ID of "outerelement". Be cautious doing this, as it can be unintentionally restrictive.