API tools faq
paste
Advertisement
Patrikrizek

lesson-3-index

Patrikrizek
May 16th, 2022
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Basic Styles for text</title>
  5.     <!-- Internal CSS -->
  6.     <style>
  7.         /* Head CSS styling using Globals, Class and IDs attributes */
  8.        
  9.         /* Globals */
  10.         /* Globals affecting all specific elements in the page. */
  11.         body {
  12.             background-color: lightskyblue;
  13.         }
  14.  
  15.         /* Classes */
  16.         /* Multiple HTML elements can share same class. */
  17.         /* Can be used on any HTML element. */
  18.         /* The class name is case sensitive. */
  19.         /* Syntax: A period (.) character, followed by a class name. Define the CSS properties within curly braces {}. */
  20.         .city {
  21.             background-color: tomato;
  22.             color: white;
  23.             padding: 10px;
  24.         }
  25.  
  26.         .town {
  27.             font-family: 'Courier New', Courier, monospace;
  28.             font-size: 20px;
  29.             font-weight: bold;
  30.         }
  31.  
  32.         /* IDs */
  33.         /* Use to specify a unique ID for an HTML element */
  34.         /* You cannot have more than one element with the same ID in HTML document. */
  35.         /* Can be used for any HTML element. */
  36.         /* Used to point to a specific style declaration in a style sheet. */
  37.         /* Used by JavaScript to access and manipulate the element with the specific ID. */
  38.         /* The ID name is case sensitive. */
  39.         /* The ID name must contain at least one character, cannot start with a number, and mist not contain white spaces (space, tabs, etc.). */
  40.         /* Syntax: A hash (#) character, followed by a ID name. Define the CSS properties within curly braces {}. */
  41.         #myHeader {
  42.             background-color: lightblue;
  43.             color: black;
  44.             padding: 40px;
  45.             text-align: center;
  46.         }
  47.  
  48.         #C1 {
  49.             margin-top: 500px;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <!-- Div element is used as container for other HTML elements. -->
  55.     <div>
  56.         <p>This is an example of "div" with two paragraphs in it.</p>
  57.         <p>This is the second paragraph in "div".</p>
  58.     </div>
  59.  
  60.     <!-- Span - inline element -->
  61.     <span>Span element does not start on a new line.</span>
  62.     <span>As you can see this is the second span element that is placed immediately after the first one.</span>
  63.  
  64.     <!-- Span inside paragraph -->
  65.     <p>Span element can be placed inside a paragraph.
  66.         <span style="color:red;">It's used for styling part of the text in the paragraph.</span>
  67.     </p>
  68.  
  69.     <!-- Example of applying class to HTML element.  -->
  70.     <p class="city">This paragraph is styled by CSS "city" class.</p>
  71.    
  72.     <!-- Example of applying two classes to HTML element.  -->
  73.     <!-- To define multiple classes, separate the class names with a space.  -->
  74.     <!-- Element will be styled to all specified classes. -->
  75.     <p class="city town">This paragraph is styled by CSS "city" and "town" classes.</p>
  76.    
  77.     <!-- Example of applying ID to HTML element.  -->
  78.     <p id="myHeader">This paragraph is styled by CSS "myHeader" ID.</p>
  79.  
  80.     <!-- HTML Bookmarks -->
  81.     <!-- Used to jump to specific parts of a webpage. -->
  82.     <!-- Will jump to element with od="C1". -->
  83.     <a href="#C1">Jump to Chapter 1</a>
  84.  
  85.     <div id="C1">
  86.         <h3>Chapter One</h3>
  87.         <p>This is a paragraph of the chapter one.</p>
  88.     </div>
  89. </body>
  90. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!