API tools faq
paste
Najeebsk

HTML-STYLES-CSS-PART-1

Najeebsk
Jan 3rd, 2022 (edited)
206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 25.00 KB | None | 0 0
raw download clone embed print report
  1. TITLE: HTML Styles - CSS
  2. TAGS: Example
  3. TIME: 6:27 AM Monday, January 03, 2022
  4. CONTENT: Internal CSS Example:-
  5.  <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <style>
  9. body {background-color: powderblue;}
  10. h1   {color: blue;}
  11. p    {color: red;}
  12. </style>
  13. </head>
  14. <body>
  15.  
  16. <h1>This is a heading</h1>
  17. <p>This is a paragraph.</p>
  18.  
  19. </body>
  20. </html>
  21. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  22. External CSS Example:-
  23. "styles.css":
  24. body {
  25.   background-color: powderblue;
  26. }
  27. h1 {
  28.   color: blue;
  29. }
  30. p {
  31.   color: red;
  32. }
  33. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  34.  <!DOCTYPE html>
  35. <html>
  36. <head>
  37.   <link rel="stylesheet" href="styles.css">
  38. </head>
  39. <body>
  40.  
  41. <h1>This is a heading</h1>
  42. <p>This is a paragraph.</p>
  43.  
  44. </body>
  45. </html>
  46. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  47. Example
  48. Use of CSS color, font-family and font-size properties:
  49. <!DOCTYPE html>
  50. <html>
  51. <head>
  52. <style>
  53. h1 {
  54.   color: blue;
  55.   font-family: verdana;
  56.   font-size: 300%;
  57. }
  58. p {
  59.   color: red;
  60.   font-family: courier;
  61.   font-size: 160%;
  62. }
  63. </style>
  64. </head>
  65. <body>
  66.  
  67. <h1>This is a heading</h1>
  68. <p>This is a paragraph.</p>
  69.  
  70. </body>
  71. </html>
  72. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  73. Example
  74. Use of CSS border property:
  75. p {
  76.   border: 2px solid powderblue;
  77. }
  78. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  79. Example
  80. Use of CSS border and padding properties:
  81. p {
  82.   border: 2px solid powderblue;
  83.   padding: 30px;
  84. }
  85. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  86. Example
  87. Use of CSS border and margin properties:
  88. p {
  89.   border: 2px solid powderblue;
  90.   margin: 50px;
  91. }
  92. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  93. Example 1
  94. This example uses a full URL to link to a style sheet:
  95. <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
  96. Example 2
  97. This example links to a style sheet located in the html folder on the
  98.  
  99. current web site:
  100. <link rel="stylesheet" href="/html/styles.css">  
  101. Example 3
  102. This example links to a style sheet located in the same folder as the
  103.  
  104. current page:
  105. <link rel="stylesheet" href="styles.css">
  106. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  107. CSS Example
  108. body {
  109.   background-color: lightblue;
  110. }
  111.  
  112. h1 {
  113.   color: white;
  114.   text-align: center;
  115. }
  116.  
  117. p {
  118.   font-family: verdana;
  119.   font-size: 20px;
  120. }
  121. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  122. Example
  123. In this example all <p> elements will be center-aligned, with a red text
  124.  
  125. color:
  126. p {
  127.   color: red;
  128.   text-align: center;
  129. }
  130. Example
  131. Here, all <p> elements on the page will be center-aligned, with a red text
  132.  
  133. color:
  134. p {
  135.   text-align: center;
  136.   color: red;
  137. }
  138. Example
  139. The CSS rule below will be applied to the HTML element with id="para1":
  140. #para1 {
  141.   text-align: center;
  142.   color: red;
  143. }
  144. Example
  145. In this example all HTML elements with class="center" will be red and
  146.  
  147. center-aligned:
  148. .center {
  149.   text-align: center;
  150.   color: red;
  151. }
  152. Example
  153. In this example only <p> elements with class="center" will be red and
  154.  
  155. center-aligned:
  156. p.center {
  157.   text-align: center;
  158.   color: red;
  159. }
  160. Example
  161. In this example the <p> element will be styled according to class="center"
  162.  
  163. and to class="large":
  164. <p class="center large">This paragraph refers to two classes.</p>
  165. Example
  166. The CSS rule below will affect every HTML element on the page:
  167. * {
  168.   text-align: center;
  169.   color: blue;
  170. }
  171. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  172. The CSS Grouping Selector
  173. The grouping selector selects all the HTML elements with the same style
  174.  
  175. definitions.
  176. Look at the following CSS code (the h1, h2, and p elements have the same
  177.  
  178. style definitions):
  179.  h1 {
  180.   text-align: center;
  181.   color: red;
  182. }
  183.  
  184. h2 {
  185.   text-align: center;
  186.   color: red;
  187. }
  188.  
  189. p {
  190.   text-align: center;
  191.   color: red;
  192. }
  193. Example
  194. In this example we have grouped the selectors from the code above:
  195. h1, h2, p {
  196.   text-align: center;
  197.   color: red;
  198. }
  199. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  200. How To Add CSS
  201. Three Ways to Insert CSS
  202. There are three ways of inserting a style sheet:
  203. 1    External CSS
  204. 2    Internal CSS
  205. 3    Inline CSS
  206. Example
  207. External styles are defined within the <link> element, inside the <head>
  208.  
  209. section of an HTML page:
  210. "mystyle.css"
  211. body {
  212.   background-color: lightblue;
  213. }
  214.  
  215. h1 {
  216.   color: navy;
  217.   margin-left: 20px;
  218. }
  219. -=-=-=-=-=-=-=-=-=-=-
  220. <!DOCTYPE html>
  221. <html>
  222. <head>
  223. <link rel="stylesheet" href="mystyle.css">
  224. </head>
  225. <body>
  226.  
  227. <h1>This is a heading</h1>
  228. <p>This is a paragraph.</p>
  229.  
  230. </body>
  231. </html>
  232. -=-=-=-=-=-=-=-=-=-=-
  233. Example
  234. Internal styles are defined within the <style> element, inside the <head>
  235.  
  236. section of an HTML page:
  237. <!DOCTYPE html>
  238. <html>
  239. <head>
  240. <style>
  241. body {
  242.   background-color: linen;
  243. }
  244.  
  245. h1 {
  246.   color: maroon;
  247.   margin-left: 40px;
  248. }
  249. </style>
  250. </head>
  251. <body>
  252.  
  253. <h1>This is a heading</h1>
  254. <p>This is a paragraph.</p>
  255.  
  256. </body>
  257. </html>
  258. -=-=-=-=-=-=-=-=-=-=-
  259. Example
  260. Inline styles are defined within the "style" attribute of the relevant
  261.  
  262. element:
  263. <!DOCTYPE html>
  264. <html>
  265. <body>
  266.  
  267. <h1 style="color:blue;text-align:center;">This is a heading</h1>
  268. <p style="color:red;">This is a paragraph.</p>
  269.  
  270. </body>
  271. </html>
  272. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  273. Example
  274. If the internal style is defined after the link to the external style sheet,
  275.  
  276. the <h1> elements will be "orange":
  277. <head>
  278. <link rel="stylesheet" type="text/css" href="mystyle.css">
  279. <style>
  280. h1 {
  281.   color: orange;
  282. }
  283. </style>
  284. </head>
  285. -=-=-=-=-=-=-=-=-=-=-
  286. Example
  287. However, if the internal style is defined before the link to the external
  288.  
  289. style sheet, the <h1> elements will be "navy":
  290. <head>
  291. <style>
  292. h1 {
  293.   color: orange;
  294. }
  295. </style>
  296. <link rel="stylesheet" type="text/css" href="mystyle.css">
  297. </head>
  298. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  299. CSS Comments
  300. Example
  301. /* This is a single-line comment */
  302. p {
  303.   color: red;
  304. }
  305. Example
  306. p {
  307.   color: red;  /* Set text color to red */
  308. }
  309. Example
  310. /* This is
  311. a multi-line
  312. comment */
  313.  
  314. p {
  315.   color: red;
  316. }
  317. HTML and CSS Comments
  318. From the HTML tutorial, you learned that you can add comments to your HTML
  319.  
  320. source by using the <!--...--> syntax.
  321. In the following example, we use a combination of HTML and CSS comments:
  322. Example
  323. <!DOCTYPE html>
  324. <html>
  325. <head>
  326. <style>
  327. p {
  328.   color: red; /* Set text color to red */
  329. }
  330. </style>
  331. </head>
  332. <body>
  333.  
  334. <h2>My Heading</h2>
  335.  
  336. <!-- These paragraphs will be red -->
  337. <p>Hello World!</p>
  338. <p>This paragraph is styled with CSS.</p>
  339. <p>CSS comments are not shown in the output.</p>
  340.  
  341. </body>
  342. </html>
  343. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  344. CSS/HTML support 140 standard color names.
  345. CSS Background Color
  346. AliceBlue
  347. #F0F8FF
  348. AntiqueWhite
  349. #FAEBD7
  350. Aqua
  351. #00FFFF
  352. Aquamarine
  353. #7FFFD4
  354. Azure
  355. #F0FFFF
  356. Beige
  357. #F5F5DC
  358. Bisque
  359. #FFE4C4
  360. Black
  361. #000000
  362. BlanchedAlmond
  363. #FFEBCD
  364. Blue
  365. #0000FF
  366. BlueViolet
  367. #8A2BE2
  368. Brown
  369. #A52A2A
  370. BurlyWood
  371. #DEB887
  372. CadetBlue
  373. #5F9EA0
  374. Chartreuse
  375. #7FFF00
  376. Chocolate
  377. #D2691E
  378. Coral
  379. #FF7F50
  380. CornflowerBlue
  381. #6495ED
  382. Cornsilk
  383. #FFF8DC
  384. Crimson
  385. #DC143C
  386. Cyan
  387. #00FFFF
  388. DarkBlue
  389. #00008B
  390. DarkCyan
  391. #008B8B
  392. DarkGoldenRod
  393. #B8860B
  394. DarkGray
  395. #A9A9A9
  396. DarkGrey
  397. #A9A9A9
  398. DarkGreen
  399. #006400
  400. DarkKhaki
  401. #BDB76B
  402. DarkMagenta
  403. #8B008B
  404. DarkOliveGreen
  405. #556B2F
  406. DarkOrange
  407. #FF8C00
  408. DarkOrchid
  409. #9932CC
  410. DarkRed
  411. #8B0000
  412. DarkSalmon
  413. #E9967A
  414. DarkSeaGreen
  415. #8FBC8F
  416. DarkSlateBlue
  417. #483D8B
  418. DarkSlateGray
  419. #2F4F4F
  420. DarkSlateGrey
  421. #2F4F4F
  422. DarkTurquoise
  423. #00CED1
  424. DarkViolet
  425. #9400D3
  426. DeepPink
  427. #FF1493
  428. DeepSkyBlue
  429. #00BFFF
  430. DimGray
  431. #696969
  432. DimGrey
  433. #696969
  434. DodgerBlue
  435. #1E90FF
  436. FireBrick
  437. #B22222
  438. FloralWhite
  439. #FFFAF0
  440. ForestGreen
  441. #228B22
  442. Fuchsia
  443. #FF00FF
  444. Gainsboro
  445. #DCDCDC
  446. GhostWhite
  447. #F8F8FF
  448. Gold
  449. #FFD700
  450. GoldenRod
  451. #DAA520
  452. Gray
  453. #808080
  454. Grey
  455. #808080
  456. Green
  457. #008000
  458. GreenYellow
  459. #ADFF2F
  460. HoneyDew
  461. #F0FFF0
  462. HotPink
  463. #FF69B4
  464. IndianRed
  465. #CD5C5C
  466. Indigo
  467. #4B0082
  468. Ivory
  469. #FFFFF0
  470. Khaki
  471. #F0E68C
  472. Lavender
  473. #E6E6FA
  474. LavenderBlush
  475. #FFF0F5
  476. LawnGreen
  477. #7CFC00
  478. LemonChiffon
  479. #FFFACD
  480. LightBlue
  481. #ADD8E6
  482. LightCoral
  483. #F08080
  484. LightCyan
  485. #E0FFFF
  486. LightGoldenRodYellow
  487. #FAFAD2
  488. LightGray
  489. #D3D3D3
  490. LightGrey
  491. #D3D3D3
  492. LightGreen
  493. #90EE90
  494. LightPink
  495. #FFB6C1
  496. LightSalmon
  497. #FFA07A
  498. LightSeaGreen
  499. #20B2AA
  500. LightSkyBlue
  501. #87CEFA
  502. LightSlateGray
  503. #778899
  504. LightSlateGrey
  505. #778899
  506. LightSteelBlue
  507. #B0C4DE
  508. LightYellow
  509. #FFFFE0
  510. Lime
  511. #00FF00
  512. LimeGreen
  513. #32CD32
  514. Linen
  515. #FAF0E6
  516. Magenta
  517. #FF00FF
  518. Maroon
  519. #800000
  520. MediumAquaMarine
  521. #66CDAA
  522. MediumBlue
  523. #0000CD
  524. MediumOrchid
  525. #BA55D3
  526. MediumPurple
  527. #9370DB
  528. MediumSeaGreen
  529. #3CB371
  530. MediumSlateBlue
  531. #7B68EE
  532. MediumSpringGreen
  533. #00FA9A
  534. MediumTurquoise
  535. #48D1CC
  536. MediumVioletRed
  537. #C71585
  538. MidnightBlue
  539. #191970
  540. MintCream
  541. #F5FFFA
  542. MistyRose
  543. #FFE4E1
  544. Moccasin
  545. #FFE4B5
  546. NavajoWhite
  547. #FFDEAD
  548. Navy
  549. #000080
  550. OldLace
  551. #FDF5E6
  552. Olive
  553. #808000
  554. OliveDrab
  555. #6B8E23
  556. Orange
  557. #FFA500
  558. OrangeRed
  559. #FF4500
  560. Orchid
  561. #DA70D6
  562. PaleGoldenRod
  563. #EEE8AA
  564. PaleGreen
  565. #98FB98
  566. PaleTurquoise
  567. #AFEEEE
  568. PaleVioletRed
  569. #DB7093
  570. PapayaWhip
  571. #FFEFD5
  572. PeachPuff
  573. #FFDAB9
  574. Peru
  575. #CD853F
  576. Pink
  577. #FFC0CB
  578. Plum
  579. #DDA0DD
  580. PowderBlue
  581. #B0E0E6
  582. Purple
  583. #800080
  584. RebeccaPurple
  585. #663399
  586. Red
  587. #FF0000
  588. RosyBrown
  589. #BC8F8F
  590. RoyalBlue
  591. #4169E1
  592. SaddleBrown
  593. #8B4513
  594. Salmon
  595. #FA8072
  596. SandyBrown
  597. #F4A460
  598. SeaGreen
  599. #2E8B57
  600. SeaShell
  601. #FFF5EE
  602. Sienna
  603. #A0522D
  604. Silver
  605. #C0C0C0
  606. SkyBlue
  607. #87CEEB
  608. SlateBlue
  609. #6A5ACD
  610. SlateGray
  611. #708090
  612. SlateGrey
  613. #708090
  614. Snow
  615. #FFFAFA
  616. SpringGreen
  617. #00FF7F
  618. SteelBlue
  619. #4682B4
  620. Tan
  621. #D2B48C
  622. Teal
  623. #008080
  624. Thistle
  625. #D8BFD8
  626. Tomato
  627. #FF6347
  628. Turquoise
  629. #40E0D0
  630. Violet
  631. #EE82EE
  632. Wheat
  633. #F5DEB3
  634. White
  635. #FFFFFF
  636. WhiteSmoke
  637. #F5F5F5
  638. Yellow
  639. #FFFF00
  640. YellowGreen
  641. #9ACD32
  642. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  643. Example:CSS Background Color
  644. <h1 style="background-color:DodgerBlue;">Hello World</h1>
  645. <p style="background-color:Tomato;">Lorem ipsum...</p>
  646. Example:CSS Text Color
  647. <h1 style="color:Tomato;">Hello World</h1>
  648. <p style="color:DodgerBlue;">Lorem ipsum...</p>
  649. <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
  650. Example:CSS Border Color
  651.  <h1 style="border:2px solid Tomato;">Hello World</h1>
  652. <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
  653. <h1 style="border:2px solid Violet;">Hello World</h1>
  654. -=-=-=-=-=-=-=-=-=-=-=-=-=-
  655. Example:CSS Color Values
  656. rgb(255, 99, 71)
  657. #ff6347
  658. hsl(9, 100%, 64%)
  659. Same as color name "Tomato", but 50% transparent:
  660. rgba(255, 99, 71, 0.5)
  661. hsla(9, 100%, 64%, 0.5)
  662. Example
  663. <h1 style="background-color:rgb(255, 99, 71);">...</h1>
  664. <h1 style="background-color:#ff6347;">...</h1>
  665. <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
  666.  
  667. <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
  668. <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
  669. Example HEX
  670. body {
  671.   background-color: #fc9; /* same as #ffcc99 */
  672. }
  673.  
  674. h1 {
  675.   color: #f0f; /* same as #ff00ff */
  676. }
  677.  
  678. p {
  679.   color: #b58; /* same as #bb5588 */
  680. }
  681. -=-=-=-=-=-=-=-=-=-=-END-=-=-=-=-=-=-=-=-
  682. CSS Backgrounds
  683. In these chapters, you will learn about the following CSS background
  684.  
  685. properties:
  686. 1    background-color
  687. 2   background-image
  688. 3    background-repeat
  689. 4    background-attachment
  690. 5   background-position
  691. 6   background (shorthand property)
  692. CSS background-color
  693. Example1
  694. The background color of a page is set like this:
  695. body {
  696.   background-color: lightblue;
  697. }
  698. Example2
  699. Here, the <h1>, <p>, and <div> elements will have different background
  700.  
  701. colors:
  702. h1 {
  703.   background-color: green;
  704. }
  705.  
  706. div {
  707.   background-color: lightblue;
  708. }
  709.  
  710. p {
  711.   background-color: yellow;
  712. }
  713. Example:Opacity / Transparency
  714. The opacity property specifies the opacity/transparency of an element. It
  715.  
  716. can take a value from 0.0 - 1.0. The lower value, the more transparent:
  717. div {
  718.   background-color: green;
  719.   opacity: 0.3;
  720. }
  721. Example:Transparency using RGBA
  722. div {
  723.   background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
  724. }
  725. ;-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  726. TITLE: HTML Styles - CSS PART 2
  727. TAGS:  Examples
  728. TIME: 9:45 AM Monday, January 03, 2022
  729. CONTENT: CSS Background Image
  730. Example
  731. Set the background image for a page:
  732. body {
  733.   background-image: url("paper.gif");
  734. }
  735. Example 2
  736. This example shows a bad combination of text and background image. The text
  737.  
  738. is hardly readable:
  739. body {
  740.   background-image: url("bgdesert.jpg");
  741. }
  742. The background image can also be set for specific elements, like the <p>
  743.  
  744. element:
  745. Example 3
  746. p {
  747.   background-image: url("paper.gif");
  748. }
  749. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  750.  
  751. =-=-=-=-=-=-
  752. CSS Background Image Repeat
  753. Example
  754. body {
  755.   background-image: url("gradient_bg.png");
  756. }
  757. Example 2
  758. body {
  759.   background-image: url("gradient_bg.png");
  760.   background-repeat: repeat-x;
  761. }
  762. CSS background-repeat: no-repeat
  763. Showing the background image only once is also specified by the background-
  764.  
  765. repeat property:
  766. Example 3
  767. Show the background image only once:
  768. body {
  769.   background-image: url("img_tree.png");
  770.   background-repeat: no-repeat;
  771. }
  772. CSS background-position
  773. The background-position property is used to specify the position of the
  774.  
  775. background image.
  776. Example 5
  777. Position the background image in the top-right corner:
  778. body {
  779.   background-image: url("img_tree.png");
  780.   background-repeat: no-repeat;
  781.   background-position: right top;
  782. }
  783. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  784.  
  785. =-=-=-=-=-=-
  786. CSS Background Attachment
  787. Example 1
  788. Specify that the background image should be fixed:
  789. body {
  790.   background-image: url("img_tree.png");
  791.   background-repeat: no-repeat;
  792.   background-position: right top;
  793.   background-attachment: fixed;
  794. }
  795. Example 2
  796. Specify that the background image should scroll with the rest of the page:
  797. body {
  798.   background-image: url("img_tree.png");
  799.   background-repeat: no-repeat;
  800.   background-position: right top;
  801.   background-attachment: scroll;
  802. }
  803. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  804.  
  805. =-=-=-=-=-=-
  806. CSS Background Shorthand
  807. CSS background - Shorthand property
  808. To shorten the code, it is also possible to specify all the background
  809.  
  810. properties in one single property. This is called a shorthand property.
  811. Instead of writing:
  812. body {
  813.   background-color: #ffffff;
  814.   background-image: url("img_tree.png");
  815.   background-repeat: no-repeat;
  816.   background-position: right top;
  817. }
  818. You can use the shorthand property background:
  819. Example 2
  820. Use the shorthand property to set the background properties in one
  821.  
  822. declaration:
  823. body {
  824.   background: #ffffff url("img_tree.png") no-repeat right top;
  825. }
  826. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  827.  
  828. =-=-=-=-=-=-
  829. All CSS Background Properties
  830. Property    Description
  831. background  Sets all the background properties in one declaration
  832. background-attachment   Sets whether a background image is fixed or scrolls
  833.  
  834. with the rest of the page
  835. background-clip     Specifies the painting area of the background
  836. background-color    Sets the background color of an element
  837. background-image    Sets the background image for an element
  838. background-origin   Specifies where the background image(s) is/are
  839.  
  840. positioned
  841. background-position     Sets the starting position of a background image
  842. background-repeat   Sets how a background image will be repeated
  843. background-size     Specifies the size of the background image(s)
  844. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  845.  
  846. =-=-=-=-=-=-
  847. CSS Borders
  848. CSS Border Style
  849.  
  850. The border-style property specifies what kind of border to display.
  851.  
  852. The following values are allowed:
  853.  
  854.     dotted - Defines a dotted border
  855.     dashed - Defines a dashed border
  856.     solid - Defines a solid border
  857.     double - Defines a double border
  858.     groove - Defines a 3D grooved border. The effect depends on the border-
  859.  
  860. color value
  861.     ridge - Defines a 3D ridged border. The effect depends on the border-
  862.  
  863. color value
  864.     inset - Defines a 3D inset border. The effect depends on the border-
  865.  
  866. color value
  867.     outset - Defines a 3D outset border. The effect depends on the border-
  868.  
  869. color value
  870.     none - Defines no border
  871.     hidden - Defines a hidden border
  872. The border-style property can have from one to four values (for the top
  873.  
  874. border, right border, bottom border, and the left border).
  875. Example
  876. Demonstration of the different border styles:
  877. p.dotted {border-style: dotted;}
  878. p.dashed {border-style: dashed;}
  879. p.solid {border-style: solid;}
  880. p.double {border-style: double;}
  881. p.groove {border-style: groove;}
  882. p.ridge {border-style: ridge;}
  883. p.inset {border-style: inset;}
  884. p.outset {border-style: outset;}
  885. p.none {border-style: none;}
  886. p.hidden {border-style: hidden;}
  887. p.mix {border-style: dotted dashed solid double;}
  888. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  889.  
  890. =-=-=-=-=-=-
  891. CSS Border Width
  892. Example 1
  893. Demonstration of the different border widths:
  894. p.one {
  895.   border-style: solid;
  896.   border-width: 5px;
  897. }
  898.  
  899. p.two {
  900.   border-style: solid;
  901.   border-width: medium;
  902. }
  903.  
  904. p.three {
  905.   border-style: dotted;
  906.   border-width: 2px;
  907. }
  908.  
  909. p.four {
  910.   border-style: dotted;
  911.   border-width: thick;
  912. }
  913.  
  914. Specific Side Widths
  915. The border-width property can have from one to four values (for the top
  916.  
  917. border, right border, bottom border, and the left border):
  918. Example 2
  919. p.one {
  920.   border-style: solid;
  921.   border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
  922. }
  923.  
  924. p.two {
  925.   border-style: solid;
  926.   border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
  927. }
  928.  
  929. p.three {
  930.   border-style: solid;
  931.   border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and
  932.  
  933. 35px left */
  934. }
  935. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  936.  
  937. =-=-=-=-=-=-
  938. CSS Border Color
  939. The border-color property is used to set the color of the four borders.
  940. The color can be set by:
  941.     name - specify a color name, like "red"
  942.     HEX - specify a HEX value, like "#ff0000"
  943.     RGB - specify a RGB value, like "rgb(255,0,0)"
  944.     HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
  945.     transparent
  946. Note: If border-color is not set, it inherits the color of the element.
  947. Example 1
  948. Demonstration of the different border colors:
  949. p.one {
  950.   border-style: solid;
  951.   border-color: red;
  952. }
  953.  
  954. p.two {
  955.   border-style: solid;
  956.   border-color: green;
  957. }
  958.  
  959. p.three {
  960.   border-style: dotted;
  961.   border-color: blue;
  962. }
  963. Specific Side Colors
  964. The border-color property can have from one to four values (for the top
  965.  
  966. border, right border, bottom border, and the left border).
  967. Example
  968. p.one {
  969.   border-style: solid;
  970.   border-color: red green blue yellow; /* red top, green right, blue bottom
  971.  
  972. and yellow left */
  973. }
  974. HEX Values
  975. The color of the border can also be specified using a hexadecimal value
  976.  
  977. (HEX):
  978. Example
  979. p.one {
  980.   border-style: solid;
  981.   border-color: #ff0000; /* red */
  982. }
  983. RGB Values
  984. Or by using RGB values:
  985. Example
  986. p.one {
  987.   border-style: solid;
  988.   border-color: rgb(255, 0, 0); /* red */
  989. }
  990. HSL Values
  991. You can also use HSL values:
  992. Example
  993. p.one {
  994.   border-style: solid;
  995.   border-color: hsl(0, 100%, 50%); /* red */
  996. }
  997. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  998.  
  999. =-=-=-=-=-=-
  1000. CSS Border Sides
  1001. CSS Border - Individual Sides
  1002. From the examples on the previous pages, you have seen that it is possible
  1003.  
  1004. to specify a different border for each side.
  1005. In CSS, there are also properties for specifying each of the borders (top,
  1006.  
  1007. right, bottom, and left):
  1008. Example 1
  1009. p {
  1010.   border-top-style: dotted;
  1011.   border-right-style: solid;
  1012.   border-bottom-style: dotted;
  1013.   border-left-style: solid;
  1014. }
  1015. The example above gives the same result as this:
  1016. Example 2
  1017. p {
  1018.   border-style: dotted solid;
  1019. }
  1020. Example 3
  1021. /* Four values */
  1022. p {
  1023.   border-style: dotted solid double dashed;
  1024. }
  1025.  
  1026. /* Three values */
  1027. p {
  1028.   border-style: dotted solid double;
  1029. }
  1030.  
  1031. /* Two values */
  1032. p {
  1033.   border-style: dotted solid;
  1034. }
  1035.  
  1036. /* One value */
  1037. p {
  1038.   border-style: dotted;
  1039. }  
  1040. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1041.  
  1042. =-=-=-=-=-=-
  1043. CSS Shorthand Border Property
  1044. Like you saw in the previous page, there are many properties to consider
  1045.  
  1046. when dealing with borders.
  1047. To shorten the code, it is also possible to specify all the individual
  1048.  
  1049. border properties in one property.
  1050. The border property is a shorthand property for the following individual
  1051.  
  1052. border properties:
  1053.     border-width
  1054.     border-style (required)
  1055.     border-color
  1056. Example 1
  1057. p {
  1058.   border: 5px solid red;
  1059. }
  1060. Left Border
  1061. p {
  1062.   border-left: 6px solid red;
  1063.   background-color: lightgrey;
  1064. }
  1065. Bottom Border
  1066. p {
  1067.   border-bottom: 6px solid red;
  1068.   background-color: lightgrey;
  1069. }
  1070. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1071.  
  1072. =-=-=-=-=-=-
  1073. CSS Rounded Borders
  1074. The border-radius property is used to add rounded borders to an element:
  1075. Normal border
  1076. Round border
  1077. Rounder border
  1078. Roundest border
  1079. Example
  1080. p {
  1081.   border: 2px solid red;
  1082.   border-radius: 5px;
  1083. }
  1084. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1085.  
  1086. =-=-=-=-=-=-
  1087. All CSS Border Properties
  1088. Property    Description
  1089. border  Sets all the border properties in one declaration
  1090. border-bottom   Sets all the bottom border properties in one declaration
  1091. border-bottom-color     Sets the color of the bottom border
  1092. border-bottom-style     Sets the style of the bottom border
  1093. border-bottom-width     Sets the width of the bottom border
  1094. border-color    Sets the color of the four borders
  1095. border-left     Sets all the left border properties in one declaration
  1096. border-left-color   Sets the color of the left border
  1097. border-left-style   Sets the style of the left border
  1098. border-left-width   Sets the width of the left border
  1099. border-radius   Sets all the four border-*-radius properties for rounded
  1100.  
  1101. corners
  1102. border-right    Sets all the right border properties in one declaration
  1103. border-right-color  Sets the color of the right border
  1104. border-right-style  Sets the style of the right border
  1105. border-right-width  Sets the width of the right border
  1106. border-style    Sets the style of the four borders
  1107. border-top  Sets all the top border properties in one declaration
  1108. border-top-color    Sets the color of the top border
  1109. border-top-style    Sets the style of the top border
  1110. border-top-width    Sets the width of the top border
  1111. border-width    Sets the width of the four borders
  1112. ;-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1113. TITLE: HTML Styles - CSS
  1114. TAGS: Examples
  1115. TIME: 4:40 PM Monday, January 03, 2022
  1116. CONTENT: CSS Margins
  1117. Margin - Individual Sides
  1118. CSS has properties for specifying the margin for each side of an element:
  1119.     margin-top
  1120.     margin-right
  1121.     margin-bottom
  1122.     margin-left
  1123. All the margin properties can have the following values:
  1124.  
  1125.     auto - the browser calculates the margin
  1126.     length - specifies a margin in px, pt, cm, etc.
  1127.     % - specifies a margin in % of the width of the containing element
  1128.     inherit - specifies that the margin should be inherited from the parent
  1129.  
  1130. element
  1131. Example
  1132. Set different margins for all four sides of a <p> element:
  1133. p {
  1134.   margin-top: 100px;
  1135.   margin-bottom: 100px;
  1136.   margin-right: 150px;
  1137.   margin-left: 80px;
  1138. }
  1139. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1140. Margin - Shorthand Property
  1141. To shorten the code, it is possible to specify all the margin properties in
  1142.  
  1143. one property.
  1144. The margin property is a shorthand property for the following individual
  1145.  
  1146. margin properties:
  1147.     margin-top
  1148.     margin-right
  1149.     margin-bottom
  1150.     margin-left
  1151. So, here is how it works:
  1152. If the margin property has four values:
  1153.     margin: 25px 50px 75px 100px;
  1154.         top margin is 25px
  1155.         right margin is 50px
  1156.         bottom margin is 75px
  1157.         left margin is 100px
  1158. Example
  1159. Use the margin shorthand property with four values:
  1160. p {
  1161.   margin: 25px 50px 75px 100px;
  1162. }
  1163. If the margin property has three values:
  1164.     margin: 25px 50px 75px;
  1165.         top margin is 25px
  1166.         right and left margins are 50px
  1167.         bottom margin is 75px
  1168. Example
  1169. Use the margin shorthand property with three values:
  1170. p {
  1171.   margin: 25px 50px 75px;
  1172. }
  1173. If the margin property has two values:
  1174.     margin: 25px 50px;
  1175.         top and bottom margins are 25px
  1176.         right and left margins are 50px
  1177. Example
  1178. Use the margin shorthand property with two values:
  1179. p {
  1180.   margin: 25px 50px;
  1181. }
  1182. If the margin property has one value:
  1183.     margin: 25px;
  1184.         all four margins are 25px
  1185. Example
  1186. Use the margin shorthand property with one value:
  1187. p {
  1188.   margin: 25px;
  1189. }
  1190. Example
  1191. Use margin: auto:
  1192. div {
  1193.   width: 300px;
  1194.   margin: auto;
  1195.   border: 1px solid red;
  1196. }
  1197. Example
  1198. Use of the inherit value:
  1199. div {
  1200.   border: 1px solid red;
  1201.   margin-left: 100px;
  1202. }
  1203.  
  1204. p.ex1 {
  1205.   margin-left: inherit;
  1206. }
  1207. -=-=-=-=-=-=-=-=-=-=-END=-=-=-=-=-=-=-=-=-=--=-=-=-
  1208. CSS Margin Collapse
  1209. Example
  1210. Demonstration of margin collapse:
  1211. h1 {
  1212.   margin: 0 0 50px 0;
  1213. }
  1214.  
  1215. h2 {
  1216.   margin: 20px 0 0 0;
  1217. }
  1218. All CSS Margin Properties
  1219. Property    Description
  1220. margin  A shorthand property for setting the margin properties in one
  1221.  
  1222. declaration
  1223. margin-bottom   Sets the bottom margin of an element
  1224. margin-left     Sets the left margin of an element
  1225. margin-right    Sets the right margin of an element
  1226. margin-top  Sets the top margin of an element
  1227. ;-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- END -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
  1228.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!