CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

Size: px

Start display at page:

Download "CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC"

Jack French
5 years ago
Views:

1 CSS3 Basics From & CSS Visual Dictionary Learning Curve Books, LLC

2 CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color Border Padding Content Area border: 1px solid gray; width: 300px; height: 100px; background: #eee; box-sizing: content-box padding: 16px; border: 8px; Actual size: 348 (300+16*2+8*2) x 148 (100+16*2+8*2) By default the box-sizing property is for the content-box: box-sizing: [content-box padding-box border-box]

3 CSS3 Pseudo Selectors Pseudo class: a :keyword added to the end of a selector, to specify styling for a certain state :hover :active :disabled :first-child :nth-child() :root :target Pseudo element: a ::keyword added to the end of a selector, to select a certain part of an element ::after ::before ::first-letter ::first-line ::selection ::backdrop

4 CSS Selector Pattern Examples div, p /* selects all <div> and <p> elements */ div p /* selects all <p> elements inside <div> elements (descendants) */ div > p /* selects all <p> elements where the parent is a <div> */ div + p /* selects all <p> elements that are immediate sibling */ p ~ ul /* selects all <ul> elements that are preceded by a <p> (general sibling) */ p:first-child /* selects every <p> element that is the first child of its parent p:nth-child(2) /* select every <p> element that is the second child of its parent */ p::first-letter /* selects the first letter of every <p> element

5 Properties: position static: the default, normal flow, affected by size, but not affected by offset (top/bottom/left/right) relative: relative to its normal position, affected by offset absolute: relative to nearest ancestor, subject to scroll and overlapping fixed: relative to browser window (view port), regardless of scrolling. sticky: toggles between relative and fixed, depending on the scroll position

6 Properties: display block: starts on a new line, and takes up the whole width inline: no effect for height/weight properties inline-block: as inline, but accepts height/width flex: block-level flex container (grows or shrinks) in one-dimension grid: like flex, but in two-dimension none: element disappears

7 Text Properties font-family: Arial, sans-serif (fall back) Times New Roman (default) font-size: 16px (default medium size = 12pt = 1em = 100%) font-weight: 100 (thin), 400(regular), 700 (bold), 900 (black) font-style: normal, italic text-align: left (default), center, right text-decoration: overline, underline, line-through overflow: auto, scroll, hidden, visible (default) line-height: normal, 80%, (specifies the vertical spacing)

8 CSS Alignment Examples Center Align Elements.center { margin: auto; } Center Align Text:.center { text-align: center;} Center an Image img { display: block; margin-left: auto; margin-right: auto; } Left and Right Align (position).right { position: absolute; right: 0px; width: 300px; } Left and Right Align (float).right { float: right; width: 300px; }

9 Color gradients linear-gradient(black, white) /* top to bottom by default */ linear-gradient(to right, black, white) linear-gradient(to bottom right, black, white) radial-gradient(black, white) radial-gradient(at bottom right, black, white) repeating-linear-gradient(white 100px, black 200px, white 300px) repeating-radial-gradient( )

10 Background Images background-image: url( image.jpg ) background-repeat: no-repeat (default), repeat-x, repeat-y background-position: left top, center, xpos ypos background-size: auto (default, original size), 100px 100px (specific length) 100% 100% (stretch across all available space), cover (stretch to cover the whole container, may cut off on one side), contain (resize so the whole image is visible within the container) background-attachment: scroll, fixed You can have two background images, if the first image (the top one) has a transparent background background-origin: content-box, padding-box, border-box

11 Properties: transform transform: translate(x, y), translatex(x), -Y(y), -Z(z) transform: scale(x, y), scalex(x), scaley(y), scalez(z) transform: rotate(angle): angle is in 0-360deg (clockwise) transform: skew(x-angle, y-angle) transform-origin: x, y (the rotation origin)

12 @-rules Special instructions for the browser in controlling how styles are applied url(style2.css); /* import another stylesheet from within the current stylesheet print { /* apply this style only for printing */ body { color: #000; background: #fff; } { /* embed a custom web font */ font-family6: MyOwn Font ; src: local( MyOwn Font Regular ), url(/fonts/myownfont.ttf); }

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors