2a:null 2b:["$","title",null,{"children":"Common CSS Attributes | Steve Oney | Observable"}] 30:T591,md` ## Borders The CSS border properties determines the style, width, and color of an element's border. ### border-style The border-style property determines the style of the border's line including: * dotted * dashed * solid * [other styles](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) ### border-width The border-width property determines the width of the borders. [Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) of border including px, pt, cm, em, etc, or it can also use the three pre-defined values: thin, medium, or thick. ### border-color The border-color property is used to determine the color of the borders. They can be set by names, HEX, RGB, HSL or transparent. Note: if the border's color is not set, it will automatically [inherient](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) the color of the element. ### border-radius The border-radius property is used to determine the rounded corners on the borders of an element: ### border's shorthand property It's possible to shorten the code for CSS borders and specify all the individual border properties into one property defined by the word ***border***. It is a shorthand property for: * *border-width* * *border-style* (required) * *border-color* \`\`\`HTML \`\`\` `31:T8bb,md` ## Background The CSS background properties determines the background of an element. ### background-color The background-color property determines background color of an element. It can be set by names, or RGB, HEX, HSL, RGBA, HSLA values. The *opacity* property can also be added following background-color property to determine the opacity of the background color. Example: \`\`\`CSS body { background-color: red; opacity: 0.3; } \`\`\` ### background-image The background-image property determines the background of the element using the image you insert. Note: The bakcground image will repeat itself to take over the whole background by default. Also watch out for the readability of the text after inserting an image. Example: \`\`\`CSS body { background-image: url("background.gif"); } \`\`\` ### background-image The backgound-image property determines whether the background image repeats itself horizontally or vertically or non-repeating. * *repeat-x* * *repeat-y* * *no-repeat* Example: \`\`\`CSS body { background-image: url("background.gif"); background-repeat: no-repeat; } \`\`\` ### background-position The background-position property is used to determine initial position of the background image: it can be set with **keyword values**, **percentage values**, **length values** and [more](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position). Example: \`\`\`CSS body { background-image: url("background.gif"); background-position: bottom right; } \`\`\` ### background-attachment The background-attachment property is used to determine whether the background image is scrollable or fixed: * *scroll* * *fixed* Example: \`\`\`CSS body { background-image: url("background.gif"); background-attachment: fixed; } \`\`\` ### border's shorthand property It's possible to shorten the code for CSS borders and specify all the individual border properties into one property defined by the word ***background***. It is a shorthand property for: * *background-color* * *background-image* (required) * *background-repeat* * *background-attachment* * *background-position* \`\`\`HTML \`\`\` `32:T638,md` # CSS Layout ## Margin and Padding The CSS margin properties determines the space around elements, outside of the element's defined borders. Each side of the margin can be set to a specific height. The CSS padding properties determines the space to the elements' border, inside of the element's defined borders. Each side of the padding can be set to a specific height. * *margin-top* / *padding-top* * *margin-right* / *padding-right* * *margin-bottom* / *padding-bottom* * *margin-left* / *padding-left* Units of margin and padding: * *auto* - Deafault valye calculated by the browser. * *length* - px, cs, etc(refer to the [length](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) section in MDN) * *%* - Define the length in percent of the element (container block) * *initial* - Sets the length to its default value * *inherit* - The length of height/width will be inherited from its parent element Example: \`\`\`HTML div { margin-top: 100px; margin-right: 50px; margin-bottom: 100px; margin-left: 50px; } \`\`\` ### Shorthand Property for margin and padding We can shorten the code and set all the margin/padding into one line of code using the key word *margin*. We will use margin as example. * *margin: 25px 50px 75px 100px*
The order of the four side is top(25px), right(50px), bottom(75px) and left(100px). The sides declared in margin can be less than four, for details refer to MDN's website [here](https://developer.mozilla.org/en-US/docs/Web/CSS/margin). Example: \`\`\`CSS div { margin: 25px 50px; } \`\`\` `33:T531,md` ## Inline VS Block By default, HTML elements have a display behavior as block or inline. Elements that starts with a new line are categorized as **block-level elements**, and other elemets that can be placed side by side are **inline elements**. ### Block-level elements * Each gets displayed in a new line * Take full-width (100% width) by default * can set its width and height properties Example: \`\`\`HTML

Block Level Elements

\`\`\`

### Inline elements * Take only as much space as they need * Don’t accept top-bottom margin or width properties Example: \`\`\`HTML

Block Level Elements

\`\`\`

`34:T643,md` ## Alignments CSS can help us align items like div, text or image (and more!) inside the page's layout. ### Center align text text-align: center can horizontally align the text in the center of the element. Example: \`\`\`HTML

Centering Text

This paragraph is centered.

\`\`\`

### Center align Image The best way to center an image is to set the left and right margin to auto and then make the image a block element: Example: \`\`\`HTML

Center the Image

\`\`\` Image source form W3School.

### Center align Elements The best way to center an element is to set the margin to auto. Example: \`\`\`HTML

Center Align Elements

This is how you align elements!

\`\`\`

More alignments on alignments like vertically align items can be found here: * [CSS layout](https://www.w3schools.com/css/css_align.asp) `35:[{"id":"0a56a6dedde87c3976e6afaf72913266212cfa69ddc8a2f3e9b6147d18bda3b1ddb58c5229f3d62206934c4c8a4801fe480f252d4c2987848ebb8bb80edfcb84","href":"https://static.observableusercontent.com/files/0a56a6dedde87c3976e6afaf72913266212cfa69ddc8a2f3e9b6147d18bda3b1ddb58c5229f3d62206934c4c8a4801fe480f252d4c2987848ebb8bb80edfcb84","name":"image@7.png","type":"image/png","lastModified":1609959439153.061,"size":24082},{"id":"bd0b76c5e103cd315c0880d9ea30186bc13d071c75f344e31fad346f172ed1d90c5fd883a1b4802f9b45b155be4d6ae3e48a584b04e99ec9fbf63f1fb14eec86","href":"https://static.observableusercontent.com/files/bd0b76c5e103cd315c0880d9ea30186bc13d071c75f344e31fad346f172ed1d90c5fd883a1b4802f9b45b155be4d6ae3e48a584b04e99ec9fbf63f1fb14eec86","name":"image@6.png","type":"image/png","lastModified":1609959439153.061,"size":33047},{"id":"4d9e27e9ce04f22dd3fa7f0bdfacd45eade33c4e1d369199bc9f1a1d2289632c10cabee19b18fad14690db8c69a98811d9154eeb80529c3186f850ec4b89ebb5","href":"https://static.observableusercontent.com/files/4d9e27e9ce04f22dd3fa7f0bdfacd45eade33c4e1d369199bc9f1a1d2289632c10cabee19b18fad14690db8c69a98811d9154eeb80529c3186f850ec4b89ebb5","name":"image@3.png","type":"image/png","lastModified":1609959439153.061,"size":557854},{"id":"f35a94f8b550ba2cc64cff84696d03503fddbef5048c0c6c4c45a046d464720a6f4d46f1da6d0f3d6c26a0642be55a4d9dd2588016a908d222ad2708e7491944","href":"https://static.observableusercontent.com/files/f35a94f8b550ba2cc64cff84696d03503fddbef5048c0c6c4c45a046d464720a6f4d46f1da6d0f3d6c26a0642be55a4d9dd2588016a908d222ad2708e7491944","name":"image@1.png","type":"image/png","lastModified":1609959439153.061,"size":21892},{"id":"88b6775b3ff7e46cdd8cbaa471da1677d563ca79fabb9d6882daffb0ecd46f214f93242e5592c1b4311ba75ddbc32dcd5d6bf0621c3bb8b32c9cad6c0ebec09f","href":"https://static.observableusercontent.com/files/88b6775b3ff7e46cdd8cbaa471da1677d563ca79fabb9d6882daffb0ecd46f214f93242e5592c1b4311ba75ddbc32dcd5d6bf0621c3bb8b32c9cad6c0ebec09f","name":"image.png","type":"image/png","lastModified":1609959439153.061,"size":35155}] 2e:{"id":"280a0bba6588d905","slug":"common-css-attributes","title":"Common CSS Attributes","thumbnail":"7bf4b6f8d24eac6750f4af72181ef325c467ce41b3c4143dfe9bc6ffd58994fc","access_level":"public","create_time":"$D2020-12-30T19:47:58.055Z","update_time":"$D2023-10-02T17:43:33.106Z","view_time":null,"first_public_time":"$D2020-12-30T19:48:01.649Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":32,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Common CSS Attributes","cells":[{"id":0,"value":"md`# Common CSS Attributes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`In this note we will introduce some common CSS attributes. You can also find a list of common [CSS attributes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) on the MDN's website.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`\n\n## Font\nThe font in CSS shorthand property is in charge of setting all different properties of an element's font. \n### font-family\nThe font-family CSS property set the element's font into certain type of typeface. A list to all the HTML font families can be found [here](https://www.w3.org/Style/Examples/007/fonts.en.html).\n\nyou can also import font from [Google font](https://developers.google.com/fonts/docs/getting_started).\n\n### font-size\nThe font-family CSS property set the element's font size. \n\nDifferent units in CSS for measuring size can be found [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units).\n\n### font-weight\nThe font-weight CSS property sets the weight of the font. The available weights of the font depends on what typeface it used. Common font weights are:\n* normal\n* bold\n* bolder\n* 100(numbers)\n\n\\`\\`\\`HTML\n\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`\n\n## Width and Height\nThe height and width properties in CSS are use to determine the horizontal length and vertical length of an element.\n\nUnits of width and height are:\n* *auto* - Deafault valye calculated by the browser.\n* *length* - px, cs, etc(refer to the [length](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) section in MDN)\n* *%* - Define the length in percent of the element (container block)\n* *initial* - Sets the length to its default value\n* *inherit* - The length of height/width will be inherited from its parent element\n\nExample:\n\\`\\`\\`HTML\ndiv {\n height: 300px;\n width: 100px;\n}\n\\`\\`\\`\n\n### max/min\nThe max-width/min-width and max-height/min-height can be use to set the max height/weight or min height/weight of an element. \nFor example, if you have a responsive window size, it will be wise to set a min-width for the element so it's not too small to view.\n\nExample:\n\\`\\`\\`CSS\ndiv {\n height: 300px;\n min-width: 400px;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md`\n## Text\n### text-decoration\nIn CSS, the text-decoration property determines the decooration added to the text, and available text decorations are\n* underline\n* overline\n* line-through\n\n### text-align\nIn CSS, the text-align property determines the position of the text in the element.\n* center\n* left\n* right\n* justify\n\n\n### color\nThe color CSS property determines the color of the text in an element. There are different ways of representing the colors using wording, hex color, rgb, hsl. \nA list of reference to HTML colors can be found [here](https://htmlcolorcodes.com).\n\n\\`\\`\\`HTML\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`\n## Visibility Property\nThe visibility property determines if the element is visible.\n* *visible*\n* *hidden*\n\n\\`\\`\\`HTML\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"