WS101 Flashcards
_________ and _________Are the foundational technologies upon which you can build for the web and are a way for you to get your ideas out there to as wide an audience as possible.
HTML and CSS
This content. It gives it context, describes the content and tells the browser what to do with it. CSS tells the browser how to present the content.
HTML structures
You can view a page’s source code with the keyboard shortcut
CTRL + U & CMD + U
Allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface.
CSS
Allows you to create rules that control the way that each individual box (and the contents of that box) is presented.
CSS
A CSS rule contains two parts: a _____________ and a __________
Selector & Declaration
Indicate which element the rule applies to.
Selectors
Indicate how the elements referred to in the selector should be styled.
Declarations
CSS declarations sit inside curly brackets and each is made up of two parts: a __________ and a _________, separated by a colon.
Property & Value
Indicate the aspects of the element you want to change. For example,
color, font, width, height and border.
Properties
Specify the settings you want to use for the chosen properties. For example, if
you want to specify a color property then the value is the color you want the text in these elements to be.
Value
The ________ element can be used in an HTML document to tell the browser where to find the CSS file used to style the page.
<link></link>
This specifies the path to the CSS file (which is often placed in a folder called css or styles).
Href
This specifies the relationship between the HTML page and the file it is linked to. The value should be stylesheet when
linking to a CSS file.
Rel
You can also include CSS rules within an HTML page by placing them inside a _________ element, which usually sits inside the <head> element of the page.
<style>
</style>CSS _______ are _____________, so they must match element names and attribute values exactly.
Selectors are Case Sensitive
If the two seiectors are identical, the latter of the two will take precedence. Here you can see the second i selector takes precedence over the first.
LAST RULE
If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
SPECIFICITY
You can add _____________ after any property value to indicate that it should be considered more important than other rules that apply to the same element.
!important
If you specify the font-family or color properties on the <body> element, they will apply to ___________________.
Most Child Elements.
Specifies the keyframe-based ________________.
Animations
Specifies when the animation will start.
Animation-delay
Specifies whether the animation should play in reverse on alternate cycles or not.
Animation-direction
Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-duration
Defines a variety of background properties within one declaration.
background
Specify whether the background image is fixed in the viewport or scrolls.
background- attachment
Defines an element’s background color.
background-color
Defines an element’s background image
background-image
Delines the origin of a background image.
background-position
Specifies the size of the background images.
background-size
Sets the width, style, and color for all four sides of an element’s border.
Border
Defines the shape of the border corners of an element.
border-radius
Sets the style of the border on all the four sides of an element.
Border-Style
Specifics whether table cell borders are connected or separated
border-collapse
Sets the spacing between the borders of adjacent table cells.
border-spacing
Specifics a table layout algorithm,
table-layout
Deline the text direction writing direction.
Direction
Sets the horizontal alignment of inline content.
text-align
Specifies how the last line of a block or a line right before a forced line break is
aligned when text-align is justify
text-align-last
Specifics what kind of line decorations are added to the element
text-decoration-line
Specifies how the text content will be displayed, when it overflows the block
containers
text-overflow
Applies one or more shadows to the text content of an element
text-shadow
Sets the height between lines of text
line-height
Sets the vertical positioning of an element relative to the current text baseline.
Vertical-align
Specifies whether to break words when the content overflows the boundaries of its
container.
word-wrap
