CSS Flashcards
what are embeddedStyle Sheets?
enable you to embed a CSS3 document in an HTML5 document’s head section.
CSS position property
The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
CSS POSitioning when you specify an elements normal flow or position in a doc you can remove those attributes
Specifying an element’s position as absolute removes it from the normal flow of elements on the page and positions it according to distance from the top, left, right or bottom margin of its parent element
z-index property
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
relative positioning,
Inline Elements
An inline element does not start on a new line and it only takes up as much width as necessary.
This is a <span> element inside a paragraph.</span>
Block-Level Elements
Inline-level elements
Grouping element
Does not apply any formatting to its contents
Creates a container for CSS rules or id attributes to be applied to a section
Grouping element does not apply any formatting to its content ?? Creates a container ? NOT UNDERSTOOD
EXAMPLE OF BLOCK LEVEL ELEMENTS DISPLAYED ON THERE OWN LINE
EXAMPLE OF BLOCK LEVEL ELEMENTS DISPLAYED ON THERE OWN LINE
all headings (h1 through h6)
div
A grouping element like span
back ground controls
Setting the tiling to no-repeat displays one copy of the background image on screen
back ground controls
Setting to repeat (the default) tiles the image vertically and horizontally
back ground controls
Setting to repeat-x tiles the image only horizontally
Setting to repeat-y tile the image only vertically
Fixed back ground scrolling browser will not move the image
background-attachment: fixed Property
Fixes the image in the position specified by background-position.
Image back ground position (default at scroll)
The default value, scroll, moves the image as the user scrolls the window
text-align Property
Text-align properties can move posting of text in an element using text-align: center: left; right;
overflow Property
The overflow property specifies what should happen if content overflows an element’s box.
This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.
When the browser renders an element using the box model, the content is surrounded by padding, a margin and a border.
Block-level HTML5 elements have a virtual box drawn around them based on the box model
Border
The border is controlled using the properties:
Border
The border is controlled using the properties:
CSS media type definition
Declare what kind of page or media type of page this is: example web, flash, mobile experience, etc
screen media types
Most common media type for a web page is the screen media type, which is a standard computer screen
Apply block styles that apply to a single media type: example for print
@media print
To create a block of styles that apply to a single media type such as print, use @media print and enclose the style rules in curly braces
Apply block styles that apply to a single media type: example for print
@media print
A block of styles that applies to all media types is declared by @media all and enclosed in curly braces
Other media types in CSS include: accessibility
s
braille
For machines that can read or print web pages in braille
speech
Allow the programmer to give a speech-synthesizing web browser more information about the content of the web page
Affects a web page’s appearance when it is printed
Media Queries
a CSS3 module allowing content rendering to adapt to conditions such as screen resolution
Allow you to format your content to specific output devices.
Include a media type and expressions that check the media features of the output device.
Media queries and media features
Common media features include:
width—the width of the part of the screen on which the document is rendered, including any scrollbars
height—the height of the part of the screen on which the document is rendered, including any scrollbars
device-width—the width of the screen of the output device
device-height—the height of the screen of the output device
orientation—if the height is greater than the width, orientation is portrait, and if the width is greater than the height, orientation is landscape
aspect-ratio—the ratio of width to height
device-aspect-ratio—the ratio of device-width to device-height
User style sheet user control of html5
Users can define their own user style sheets to format pages based on their preferences
User style sheet user control of html5 absolute font realtive
Absolute font size measurements override user style sheets, while relative font sizes will yield to a user-defined style
User style sheets accessibility options
To add a user style sheet in IE9, select Internet Options…, located in the Tools menu. In the Internet Options dialog (Fig. 4.20) that appears, click Accessibility…, check the Format documents using my style sheet checkbox, and type the location of the user style sheet.
use a relative measurement that does not override the user style set in Fig. 4.19.
Instead, the font size displayed is relative to the one specified in the user style sheet
Set Protocol for letting user control font size
