CSS Flashcards
CSS makes a website ___
Pretty (the designer of the website)
Colors, font, spacing
CSS stands for ___
Cascading Style Sheet
100% when using CSS you need to have this tag
selector (element you want to change {property (color, etc.): value (what you want to change it to);}
IT MUST ALWAYS BE IN THE HEAD
Give an example of using color for h1 using css
h1 { color: red; font-family: arial;}
How to get more spacing in paragraph lines?
p {line-height: ;}
what does:
background-image:url(file.type);
background-repeat: no-repeat;
Background image and no repeat for text/css (mostly used for the body)
Four characteristics of elements (box model):
text, padding, margin, border
How many styles can a link have?
4 link styles for the different states. the states are:
1) Link
2) visited
3) hover
4) active
How do you make a css rule just affect one part of an element?
<span> text </span>
In the head, you give span it’s style properties
How do you create unique styles for elements? How to give different styles to div?
using CSS, use ID’s
In header, use #IDNAME to create an ID
Then go to element, and add id = “IDNAME”;
What does this represent in CSS: p > a?
paragraph is the parent and a is the child
How do you apply style to only a specific part of an element?
You’ll have to use pseudo elements
p: first-letter {}
How do you link to an external style sheet?
Note: Useful for multiple pages. GET RID OF STYLE TAGS WHEN USING. Remember the saved file you are referencing should be a .css file.
What is the difference between absolute vs relative positioning?
Absolute is from the top left and relative is from the original position relative
How to create a basic form>
Name:
What are the three ways of attaching CSS to a document?
Inline, Internal, External. Inline and internal CSS are considered to be bad practices.
What is a stylesheet?
List of rules. Each rule or ruleset consists of one or more selectors and a declaration block
What is the purpose of a CSS selector?
Selectors are used for declaring the HTML elements to which a style will apply
What are the most common selectors?
1) All elements with a specific HTML tag (e.g., p,h1)
2) Elements specified by the following attributes:
ID (these are preceded by # in CSS)
class (these are preceded by . in CSS)
What is a declaration block and what does it contain?
A declaration block is a list of declarations contained within braces. Each individual declaration consists of a property, a colon :, and a value.
Note: If there are multiple declarations then they must be separated by a semi-colon
What is the internal priority for CSS?
element (1 pt) .class (10 pt) #id (100 pt)
Width and height styling elements can be expressed in ?
Pixels and percentage. If you are working with static content, then px is suitable, but if you are working with responsive design, you will want to use %
What is the purpose of styling element overflow?
Content inside of a container is too much for the container size. You can, hide, show no matter what, or scroll bar
What are some of the background properties that can be modified?
background-color, background-image, background-position, background-size, background-repeat
What does the border property do?
Property adjusts all border elements in one line. The first value is border thickness. Second value is border type. Third value is border color.
border-width, border-style, and border-color
border-top, border-bottom, border-right, border-left
border-radius also makes a change to the roundness of your border and can use px or %
What do the following properties do: color, text-align, text-decoration?
Color is the color property, align sets the horizontal alignment of any text, text decoration is used to add and remove underlines, overlines, and line-throughs
What are the two types of fonts in font-family?
named-family (such as times, courier) and generic-family (serif, sans-serif, cursive, fantasy, monospace)
What are some web safe fonts? What is a web safe font?
Regardless of system, fonts are able to be used. Some of these are: Verdana, Arial, Trebuchet MS, Times New Roman, Georgia, Andale mono, Courier New, Comics Sans, and Impact
NOTE THAT FONTS WITH MORE THAN ONE WORD NEED SURROUNDING QUOTES
If a font-style has no italic, what can be used to mimic?
Oblique to control the slanted emphasis
What does font-weight do?
This property controls the thickness of a character line. can be set numerically or semantically like ‘bold’
What is the difference between inline elements and block elements?
Inline items only take as much space as needed. Block items take up the 100% of the width of the parent element.
What are examples inline elements? What are examples block elements?
Inline elements: a, img, span, input, label, select, textarea
Block elements: body, div, form, h1-h6, p, table, ul, ol, li
NOTE: You cannot put block elements inside inline elements
What are the possible display property values?
inline, block, none, inline-block
What are the three rules for content fitting?
Total area: the space an element occupies and affects
Float, clear and overflow
Nested elements
shorthand for content fitting?
padding: top right bottom left
What are the elements that do not have their margins collapsed?
Floated elements, absolutely positioned elements, inline-block elements, elements with overflow property set to anything other than visible (They do not collapse margins with their children), cleared elements (They do not collapse their top margins with their parent block’s bottom margins)
The position property can also be used to move elements on a page.
USE THE POSITION PROPERTY ONLY WHEN YOU NEED TO. Otherwise, use the display property and the box model to position your elements.
What are the main four position specifications?
Static, Relative, Absolute, Fixed
Explain the four major positions
Static - Default, will follow flow of DOM
Relative - Relative to where the element should have been initially
Absolute - Position from last item that is not static
Fixed - Position relative to window
Relative is the only one that maintains flow
Describe more about the absolute position
An absolutely positioned element is positioned relative to the first parent element that has a position other than static applied to it. If no parent element up the chain meets that condition the absolutely positioned element is positioned relative to the document window.
How do you solve many cross-browser issues?
you should RESET and NORMALIZE…also validating your html/css often
What is a good example of a reset?
*{ padding:0; margin:0;}
Condensed Universal Reset?
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
