CSS Recap
Cards (53)
- CSSCascading Style Sheet
- CSSA language used for describing how documents are presented visually, how they are arranged and styled
- CSS Rule-set/PatternSelector points to the HTML element you want to style<|>Declaration block contains one or more declarations separated by semicolons<|>Each declaration includes a CSS property name and a value, separated by a colon<|>Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces
- CSS Example
- #Make the background color of body text lightblue
- body { background-color: lightblue; }
- #Make all <h1> elements' text color white and align center
- h1 { color: white; text-align: center; }
- selector
- property
- value
- Including Styles
- Inline CSS
- Embedded CSS
- External CSS
- Inline CSSYou can write your styles directly inline on each element. But this is NOT A GOOD IDEA most of the time.
- Embedded CSSStyles are embedded inside of a <style> element. It makes it impossible to share the styles among multiple documents. Not recommended either!
- External CSSWrite your styles in a .css file and import the file into the html document using a <link> element in the head of your html document. Recommended!
- CSS Measurement Units
- Lengths
- Absolute length units
- Relative length units
- Percentages
- Numbers
- Absolute length unitscm - centimeters<|>mm - millimeters<|>in - inches (1in = 96px = 2.54cm)<|>px - pixels (1px = 1/96th of 1in)<|>pt - points (1pt = 1/72 of 1in)<|>pc - picas (1pc = 12 pt)
- Relative length unitsem - Relative to the font-size of the element (2em means 2 times the size of the current font)<|>rem - Relative to font-size of the root element<|>% - Relative to the parent element
- CSS Font
- font-family - Specify the font family for text
- font-size - Specify the font size of text
- font-style - Set whether a font should be styled with a normal, italic, or oblique
- font-variant - normal, small-caps
- font-weight - The font-weight property sets how thick or thin characters in text should be displayed
- fontThe font CSS sets all the different properties of an element's font.
- CSS Font Stack Website https://www.cssfontstack.com
- CSS Color
- Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values
- CSS <color> property - This property is used to set the text color for HTML elements
- CSS <background-color> property - This property is used to set the background color for HTML elements
- CSS Text Properties
- Text Alignment
- Text Decoration
- Text Transforming
- Spacing
- Text AlignmentThe text-align CSS property sets the horizontal alignment of a block element or table-cell box.
- Text DecorationThe value text-decoration: none; is often used to remove underlines from links.<|>The other text-decoration values are used to decorate text.
- text-decorationA shorthand for multiple text decoration properties.
- Text TransformingCSS text-transform property sets controls text case and capitalization.
- Spacingletter-spacing: sets the horizontal spacing behavior between text characters<|>word-spacing: property sets the length of space between words and between tags.
- Coding Exercise 11. Style the following logo. Style <h1> with the following styles:2. uppercase all the letters, without touching the html3. set the font-family to be 'Courier New', 'monospace'4. center align the text5. set the font weight to 1006. make the text size 40 px7. set spacing between letters to 20 px8. add a wavy plum underline (plum is the color)
- HTML for Coding Exercise 1
- <!DOCTYPE html><html><head><title>Hipster Logo</title><link href="app.css"></head><body><h1>Purple Grain</h1></body></html>
- More CSS Properties
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Paddings
- CSS Height and Weights
- CSS Selectors
- Basic Selectors
- Element selector
- ID selector
- Class selector
- Universal selector
- Group Selector
- Attribute Selector
- Descendant Selector
- Direct Child Selector
- Element selectorp { text-align: center; color: red; }
- ID selector#para1 { text-align: center; color: red; }
- Class selector.center { text-align: center; color: red; }
- Universal selector* { text-align: center; color: blue; }
- Group Selectorh1, h2, p { text-align: center; color: red; }
- Attribute Selectorinput[type="password"] { border-color: red; }button[id="signup"]{ background-color:yellow; }a{ text-decoration:none; color:black; }a[href="#about"]{ text-decoration:underline dotted purple 5px; }
- Descendant SelectorApply a style rule to a particular element only when it lies inside a particular element. E.g., the style rule will apply to <a> element only when its parent is <li>
- Direct Child SelectorThe child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendent elements further down the hierarchy don't match.
- Universal selectorApplies styles to all elements on the page
- Group SelectorApplies styles to multiple elements at once (e.g. h1, h2, p)
- Selector Example
- Attribute SelectorSelects elements based on their attribute values
- Attribute Selector
- "skillstation"
- "skillstation"
- Attribute Selector Example1. input[type="password"] {border-color: red;}2. button[id="signup"]{background-color:yellow;}3. a{text-decoration:none;color:black;}4. a[href="#about"]{text-decoration:underline dotted purple 5px;}
- Descendant SelectorApplies a style rule to a particular element only when it lies inside a particular element