Scribd
Upload
7 views3 pages

Css

Uploaded by

yliugbhr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views3 pages

Css

Uploaded by

yliugbhr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML

li*5, 5 bullet points

Css
Main -> Container (Nav, Header, Footer)

-TYPE, universal selector, selects all elements of any type * {}, p * {}


more simple selector put on top and more specific put on bottom, .class
{} .class.headline {}
classes is easier to use than css selectors

-CLASS, can contain multiple values (.green {}, .bold {})


<h1 class="green bold">...</h1>, class="white-backgound", class="button alternate"

-ID, single use can't be used again in the document and be overwritten, for
specific elements
#large-title {}

-ATTRIBUTE SELECTOR, used to target html elements that already contain attributes
or attribute values
<a href="" target>Learn More</a>, example selects all <a> elements with a target
attribute
a[target] { color:green; }

<a href="" target="_blank">Learn More</a>, example selects all <a> elements with a
target="_blank" attribute
a[target="_blank"] { color:green; }
"value"

-CHAINING, combine class selector with type selector, use comma to combine any
selector and more than 2
ul.red {}, .red h1 {}, <h1 class="red large"></h1> .red.large {}, h1, .red, p

-DESCENDENTS, select elements nested within other html elements


<div class="main"> <h1>...</h1> <p>...</p> </div>
.main h1 {}

-Targeting multiple elements with the same style


<h1>Hello</h1> <h2>Hi</h2> h1, h2 { background: red; }

-Targeting Direct child, (father to son) -select an element that come


RIGHT after another element
div > h3 {}, find the span that is the direct child to the h2, h1 + h2 {},
siblings, h1 ~ h2 {}
-select elements that come after another element, (same as the siblings but can
select more than 1 element)
<div> <h3>...<h3> </div>, <div> <h1>...</h1> <h2>...</h2> </div>
-First and Last child, -nth child (any child between the first
and last)
ul li:first-child, ul li:last-child {}, ul li:nth-child(3) {}

-TITLE, <a href="" title="favorite color!">Green</a>, tab title

border: width style color; border-radius(cut the corners),


padding: 1px(top) 2px(right) 3px(bottom) 4px(left)
margin: 1px(top) 2px(left and right) 3px(bottom) margin: 0 auto; (top and bot 0,
left and right adjusted to center)
margin collapse, top and bottom sometimes collapse into a single margin taking the
larger value, margin-top/bottom set yourself
box-sizing: border-box; (add padding and border to the total width set up)
reset default rules for margin and padding * { margin: 0; padding: 0; } often
first css code

-Centering content with max width, if the content is larger than the width due to
screen change, useful to center your
website in a browser window, <div class='outer'> <div class='inner'> Hello </div>
</div>
.outer { background: black; padding: 10px;} .inner { max-width: 900px; margin:
0 auto;}

-3D BUTTON, a { border: 1px solid green; border-radius: 10px; box-shadow:


0px(x) 4px(y); }
a:active { margin-top: 24px; margin-bottom: 16px; box-shadow: 0px 0px;
background-color: red; color: white; }

-2D BUTTON, a { border: 1px solid green; }


a:active { background-color: red; color: white; }

-PSEUDO-CLASS, appeareance of certain elements can change(user interaction)


before hover a { color: green; } after a:hover { color: red; }, change element
when hovered
a { cursor: pointer; } change cursor to pointing hand, better to put on
before hover to prevent unwanted behavior
.link:visited { color: red; }, changes color after the link is clicked once
:active, element change when holding down the mouse

-SPECIFITY is the order the broswer decides which css styles will be displayed
ID(#heading {}) > classes(.headline {}) > type(h1 {}, * {}),
adding more than one tag, class, or id to a css selector increases the specificity
.main p {} > p {}

-TEXT-ALIGN: left, right, center, justify(spaces out text to align with the right
and left side of the parent element)

-VISIBILITY: hidden: vs display: none; element with vh will not be visible, leaves
and takes up an empty space where it
is intended to be display, while dn element will be completely removed

-make image circle, display: block; border-radius: 50%;

multiple words font require "", "Times New Roman" Georgia

FLEXBOX
display:

display: flex; elements are displayed from left to right (origin position is top
to bottom)

justify-content: center(space-between, s-around, s-evenly, flex-end, f-start, end,


start); align items horizontally on the x-axis/main-axis,
items align center of container, equal spacing between them, equal spacing around
them, equal space between and around, flex right side, left side

align-items: center(stretch, baseline, flex-start, flex-end, start, end); align


items vertically on the y-axis/cross-axis,
items align at vertical center of container, items stretched to fit container,
display at the baseline, flex top of container, bottom of container
flex-direction: row(row-reverse, column, column-reverse); defines the direction
items are placed in the container,
items placed the same direction as text (a,b,c), placed opposite to the text
direction(c,b,a), placed top to bottom, placed bottom to top,
when reverse row or column flex-direction is set, justify-content start and end are
also reversed
when flex-direction becomes column, justify-content(horizontal becomes vertical)
and align-items(vertical becomes horizontal) are reverse

You might also like