HTML Flashcards
Sizes for font-size
font-size: px / in / or cm;
text-decoration:
none, underline, line-through, overline
a : hover { color: green; }
Styles link when the user hovers over.
a : visited { color: red; }
Styles visited links
Adjust Font Weight
font-weight: normal or bold;
Font Shorthand
font: weight / size / family
font: normal 28px Impact, fantasy;
Image Sizing
HTML: attribute within the img tag. height=”100” width=”100”
CSS: img { width: 100 px; } needs pixel
*if both are set, CSS overrides HTML
Image border-styles
solid, dotted, dashed, double, groove, ridge, inset, outset, and none.
border-width
Sets the width of the border.
border-width:20px;
border-color
Need to set a border style before assigning a color.
border-color: gold;
Border shorthand
border: 4px dotted green;
width-style-color (can be put in any order)
Margin property
Used to add space around HTML elements.
margin or margin-top, -right, -bottom, -left
Margin shorthand
margin: top right bottom left px;
margin: 10px; (sets all 4 sides)
Centering with auto margin
(1) Set width or container i.e. html { width:320px; }
(2) set margin as margin:0 auto;
box-shadow
box-shadow: 5px 15px;
box-shadow: left-right / up-down
box-shadow color
Default is set as the same color as page text.
box-shadow: 5px 5px red;
Blur & Spread
box-shadow: x y blur spread;
text-shadow
Same values as box shadow, but no spread value.
text-shadow: 3px 3px 5px blue;
(x y shadow position) (size & color of shadow)
Multiple Shadows
Add more than 1 text-shadow with lists separated by a comma.
text-shadow: -3px 0 red, 3px 0 cyan;
Background-Image Property
background-image: url( ) ;
Transparent Background Images
background-color: red;
background-image: url( );
*Red color will show up if image is semi-transparent
Background Shorthand
Combines color and image.
background: hotPink url( );
* Order doesn’t matter
List-Style-Type
Styles the bullet
list-style-type: disk/square/circle/none;
List-Style-Image
Replaces bullet with an image.
list-style-image: url ( );
Header/Footer/Section
Used to separate page into semantic sections.
Text-Align
text-align: center/left/right/justify;
Doctype
(!doctype html)
Put at the start of your code to tell the web browser your page uses HTML.
Stylesheet Link
(link rel=”stylesheet” href=””)
Rel: Attribute sets the type of link it is.
Href: Attribute sets the link location.
Comment Out Code
Surround elements with <!--this markup--> to hide, but easily bring back later.
TODO Comments
Add reminders todo things later. Google Style Guide: <!--TODO: Put task here-->
CSS Comments
/This is a CSS Comment/
Margin
Adds space around the outside of an element.
Padding
Adds space between the content and border.
Overriding Rules
CSS - If 2 values are set for the same property, the last one is used.
Display
Changes the display type. (Block - Inline - Inline-Block - None)
display: block
Block elements drop below the previous element. Width and height are used. ( h1 - p )
display: inline
Inline elements are displayed next to each other if there is space. Width and height are ignored. ( a - br )
display: inline-block
Inline-block elements are displayed next to each other if there is space. Width and height are used. (img)
display: none
Elements are not displayed on the page.
Block Elements
Expand to the width of the page. Their height expands to fit the text and elements they contain.
Inline Elements
Expand to the width and height of their contents. Their size cannot be changed with width and height CSS properties. Margin and padding will add space around an element. Only left and right margin and padding properties will change the position.
Inline-Block Elements
Rules are a combination of block and inline. Change size and spacing with (width - height - margin - padding) They will sit on the same line if space allows.
Width Property
Setting a width works for block elements, but not inline. Will work with inline elements if the display is set to block.
Creating rounded corners
border-radius: 10px;
Center elements
To center any block elements: Set the width and then the margins.
( width:250px; ) ( margin:10px auto; )
RGB Color
color: rgb (0, 0, 0);
* Insert anywhere you would specify color
Alpha RGB Color
Allows for semi-transparency.
rgba (0,0,0, .25)
Alpha Value
The last value in rgba color. Decimal number between 0 (transparent) and 1 (solid color)
Browser Prefix
Web browsers use browser prefixes to add CSS properties to add Css properties that aren’t part of the official W3C rules. If it is made an official CSS property, the prefix is removed.
User-Select
Controls the appearance of selection.
none: makes the element appear as if it can’t be selected.
text: the text can be selected.
Different Browser Prefixes
- webkit-user-select: Chrome & Safari
- moz-user-select: Firefox
- ms-user-select: Internet Explorer
- o-user-select: Opera
Article Element
Article tags should be put around things like magazine or news articles and forum or blog posts.
Column-Count
New property in CSS3. Puts content in 2 or more columns.
Linear-Gradient
Adds a gradient background fill.
background-image: linear-gradient(top, red,blue);
Multi-Colored Gradients
Gradients can have a list or 2 or more colors separated by a comma. Default direction is top to bottom.
background-image: linear-gradient (green, yellow);
Green will be on top, followed by yellow.
Background-Attachment
Makes the background go from the top of the page to the bottom.
background-attachment: fixed; (stay in place)
scroll; (move with user)
Figure Tag
Is put around content like images, maps, and videos that are important to the meaning of the page but can be positioned anywhere without changing the meaning.
Figcaption
Optional caption for the figure inside the figure tag.
figcaption) Caption here! (/figcaption
Figure Style
The default figure style has a large left and right margin.
Meta Tags
Meta tags contain info about a page not visible to viewers. No end tag. Most contain name and content attributes.
Meta Tags for search engines
Description : Sentence describing your page, often displayed in search results.
Keyword : List of keywords related to your site. Not used by google, but is used by Yahoo and other small search engines.
Robot Meta Tags
Robots are computer programs used by google to create a list of all web pages. Robot meta tags tell robots how to search site and which pages to add.
Meta Charset
This character encoding meta tag tells the computer how to store characters. (meta charset="utf-8") Added after (!doctype html)
Table Element
(table) (tr) Table Row (optional closing tag) (td) Table Data (oct) (th) Table Header (/table)
Rowspan
Vertically fills multiple rows.
(td rowspan=”4”) Data
Colspan
Horizontally fills multiple columns.
(td colspan=”2”) Data
Border-Collapse
border-collapse:collapse;
Put in “table” selector, removes space between table cells.
Class attribute & selector
In css code, any selector that begins with a period is called a class selector.
Class Names
Almost always use only lowercase letters, numbers, hypens, & underscores. *Cannot start with a number or double dash.
Class = “different-classes-are-separated by-a-space”
Descendant Selectors
Properties with a .class selector take priority over element selectors like body or p.
Position
Changes the display type.
Static
Render in order as they appear in the document.
Absolute
Absolute elements are positioned relative to its first non-static ancestor element.
Fixed
Fixed elements are positioned relative to the browser window.
Relative
Positioned relative to its normal position. They are shifted using left, right, top, & bottom properties.
Fixed Position
top,right,bottom,left: sets the distance from the t.r.b.l. for absolute & fixed position elements.
—
top: 20px;
Navigation Element
(nav) is put around a group of links to other pages in a web site.
Vertical-Align
Controls the vertical alignment of elements. (baseline, top, bottom, middle)
Opacity
Sets the transparency of an element. Decimal between 0 (transparent) and 1 (opaque). opacity: 0.5;
@media print
A media query used to write rules that only apply to printing.
@media screen
A media query used to write rules that only apply when the page is displayed on screen.
