html-foundation/blog-one.html at main · marcgregory/html-foundation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learning Cascading Style Sheet(CSS)</title>
  </head>
  <body>
    <header>
      <h1>Marc Gregory Turno</h1>

      <nav>
        <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="blog-one.html">BLOG 1</a></li>
          <li><a href="blog-two.html">BLOG 2</a></li>
          <li><a href="blog-three.html">BLOG 3</a></li>
        </ul>
      </nav>
    </header>
    <article>
      <header>
        <h2>Learning Cascading Style Sheet(CSS)</h2>
        <p>Posted by <strong>Marc Gregory Turno</strong></p>
      </header>
      <h3>What is Cascading Style Sheet or CSS?</h3>
      <p>
        <strong>Cascading Style Sheets (CSS)</strong>
        is a style sheet language used for specifying the presentation and
        styling of a document written in a markup language such as HTML or XML
        (including XML dialects such as SVG, MathML or XHTML). CSS is a
        cornerstone technology of the World Wide Web, alongside HTML and
        JavaScript.
      </p>
      <p>
        CSS is designed to enable the separation of content and presentation,
        including layout, colors, and fonts. This separation can improve content
        accessibility;[further explanation needed] provide more flexibility and
        control in the specification of presentation characteristics; enable
        multiple web pages to share formatting by specifying the relevant CSS in
        a separate .css file, which reduces complexity and repetition in the
        structural content; and enable the .css file to be cached to improve the
        page load speed between the pages that share the file and its
        formatting.
      </p>
      <p>
        The CSS specifications are maintained by the World Wide Web Consortium
        (W3C). Internet media type (MIME type) text/css is registered for use
        with CSS by RFC 2318 (March 1998). The W3C operates a free CSS
        validation service for CSS documents.
      </p>
      <h3>Style Sheet</h3>
      <p>
        A style sheet consists of a list of rules. Each rule or rule-set
        consists of one or more selectors, and a declaration block.
      </p>

      <p>
        Selector <br /><br />
        In CSS, selectors declare which part of the markup a style applies to by
        matching tags and attributes in the markup itself.
      </p>
      <h3>Selector types</h3>

      <p>Selectors may apply to the following:</p>

      <ul>
        <li>
          all elements of a specific type, e.g. the second-level headers h2
        </li>
        <li>elements specified by attribute, in particular:</li>
        <li>
          id: an identifier unique within the document, denoted in the selector
          language by a hash prefix e.g. #id
        </li>
        <li>
          class: an identifier that can annotate multiple elements in a
          document, denoted by a dot prefix e.g. .classname (the phrase "CSS
          class", although sometimes used, is a misnomer, as element
          classes—specified with the HTML class attribute—is a markup feature
          that is distinct from browsers' CSS subsystem and the related
          W3C/WHATWG standards work on document styles; see RDF and microformats
          for the origins of the "class" system of the Web content model)
        </li>
        <li>
          elements depending on how they are placed relative to others in the
          document tree.
        </li>
        <li>
          Classes and IDs are case-sensitive, start with letters, and can
          include alphanumeric characters, hyphens, and underscores. A class may
          apply to any number of instances of any element. An ID may only be
          applied to a single element.
        </li>
      </ul>
      <h3>Pseudo-classes</h3>
      <p>
        Pseudo-classes are used in CSS selectors to permit formatting based on
        information that is not contained in the document tree.
      </p>
      <p>
        One example of a widely used pseudo-class is :hover, which identifies
        content only when the user "points to" the visible element, usually by
        holding the mouse cursor over it. It is appended to a selector as in
        a:hover or #elementid:hover.
      </p>
      <p>
        A pseudo-class classifies document elements, such as :link or :visited,
        whereas a pseudo-element makes a selection that may consist of partial
        elements, such as ::first-line or ::first-letter.[6] Note the
        distinction between the double-colon notation used for pseudo-elements
        and the single-colon notation used for pseudo-classes.
      </p>
      <h3>Combinators</h3>
      <p>
        Multiple simple selectors may be joined using combinators to specify
        elements by location, element type, id, class, or any combination
        thereof. The order of the selectors is important. For example, div
        .myClass {color: red;} applies to all elements of class myClass that are
        inside div elements, whereas .myClass div {color: red;} applies to all
        div elements that are inside elements of class myClass. This is not to
        be confused with concatenated identifiers such as div.myClass {color:
        red;} which applies to div elements of class myClass.
      </p>
      <h3>Declaration Block</h3>
      <p>
        A declaration block consists of a pair of braces ({}) enclosing a
        semicolon-separated list of declarations.
      </p>
      <h3>Declaration</h3>
      <p>
        Each declaration itself consists of a property, a colon (:), and a
        value. Optional white-space may be around the declaration block,
        declarations, colons, and semi-colons for readability.
      </p>
      <h3>Properties</h3>
      <p>
        Properties are specified in the CSS standard. Each property has a set of
        possible values. Some properties can affect any type of element, and
        others apply only to particular groups of elements.
      </p>
      <h3>Values</h3>
      <p>
        Values may be keywords, such as "center" or "inherit", or numerical
        values, such as 200px (200 pixels), 50vw (50 percent of the viewport
        width) or 80% (80 percent of the parent element's width).
      </p>
      <p>
        Color values can be specified with keywords (e.g. "red"), hexadecimal
        values (e.g. #FF0000, also abbreviated as #F00), RGB values on a 0 to
        255 scale (e.g. rgb(255, 0, 0)), RGBA values that specify both color and
        alpha transparency (e.g. rgba(255, 0, 0, 0.8)), or HSL or HSLA values
        (e.g. hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).
      </p>
      <p>
        Non-zero numeric values representing linear measures must include a
        length unit, which is either an alphabetic code or abbreviation, as in
        200px or 50vw; or a percentage sign, as in 80%. Some units – cm
        (centimetre); in (inch); mm (millimetre); pc (pica); and pt (point) –
        are absolute, which means that the rendered dimension does not depend
        upon the structure of the page; others – em (em); ex (ex) and px
        (pixel)[clarification needed] – are relative, which means that factors
        such as the font size of a parent element can affect the rendered
        measurement. These eight units were a feature of CSS 1[14] and retained
        in all subsequent revisions. The proposed CSS Values and Units Module
        Level 3 will, if adopted as a W3C Recommendation, provide seven further
        length units: ch; Q; rem; vh; vmax; vmin; and vw.
      </p>
    </article>
    <footer>
      Copyright &copy; 2030 by Marc Gregory Turno. All Rights Reserved.
    </footer>
  </body>
</html>