├── README.md
└── _examples-css3-fundamentals
    ├── 2. Introducing CSS
        └── 02.01.css.intro.html
    ├── 3. CSS Basics
        ├── 03.01.default.browser.styles.html
        ├── 03.02.syntax.html
        ├── 03.04.selector.element.tag.type.html
        ├── 03.05.selector.class.html
        ├── 03.06.selector.id.html
        ├── 03.07.selector.universal.html
        ├── 03.08.selector.group.grouping.html
        ├── 03.09.selector.conditional.descendent.html
        ├── 03.10.1.selector.pseudo.class.html
        ├── 03.11.1.external.stylesheets.html
        ├── 03.11.2.internal.stylesheets.html
        ├── 03.11.3.inline.stylesheets.html
        ├── 03.12.4.1.cascade.important.html
        ├── 03.12.4.2.cascade.specificity.html
        └── 03.12.4.3.cascade.inheritance.html
    ├── 5. Common CSS Concepts
        ├── 05.1.font.html
        ├── 05.10.1.position.relative.html
        ├── 05.10.2.position.absolute.html
        ├── 05.10.3.position.absolute.relative.html
        ├── 05.10.4.position.fixed.html
        ├── 05.11.1.float.basics.html
        ├── 05.12.1a.html.table.layout.html
        │   ├── 05.12.1.html.table.layout.html
        │   ├── about.html
        │   ├── contact.html
        │   ├── products.html
        │   └── services.html
        ├── 05.12.1b.css.table.layout.html
        │   ├── 05.12.2.css.table.layout.html
        │   ├── about.html
        │   ├── contact.html
        │   ├── products.html
        │   ├── services.html
        │   └── style.css
        ├── 05.12.2.css.div.layout.html
        │   ├── 05.12.2.css.div.layout.html
        │   ├── about.html
        │   ├── contact.html
        │   ├── products.html
        │   ├── services.html
        │   └── style.css
        ├── 05.12.3.semantic.tag.layout.html
        │   ├── 05.12.3.semantic.tag.layout.html
        │   ├── about.html
        │   ├── contact.html
        │   ├── products.html
        │   ├── services.html
        │   └── style.css
        ├── 05.15.1.vendor.prefixes.html
        ├── 05.16.reset.css.html
        ├── 05.2.text.html
        ├── 05.3.color.html
        ├── 05.4.units.html
        ├── 05.5.background.html
        ├── 05.6.box.model.html
        ├── 05.7.margin.html
        ├── 05.8.padding.html
        └── 05.9.border.html
    └── assets
        ├── images
            ├── box-model.png
            ├── browers_all_2.png
            ├── css-selector.png
            └── css3.png
        └── styles
            └── 03.11.1.style.css


/README.md:
--------------------------------------------------------------------------------
   1 | <p align="center">
   2 |     <img src="_examples-css3-fundamentals/assets/images/css3.png" alt="CSS3 cading Style Sheets logo" title="CSS3 cading Style Sheets Fundamentals" width="200" />
   3 | </p>
   4 | 
   5 | CSS3 Fundamentals
   6 | =====================
   7 | 
   8 | CSS stands for Cascading Style Sheets through which we add styles, colors, layouts, design, and look-feel appearance to the web page. 
   9 | 
  10 | CSS is a stylesheet language that allows you to control the appearance of your web pages. This hands-on course will demonstrate the concepts that form the foundation of CSS, creating a CSS file, writing basic CSS selectors, setting up various CSS properties, and explains how to use this stylesheet language to add colors and other design elements to take your web pages beyond standard black & white text/background. Will learn guidelines for page layouts with floats, Setting a font family, font size, text color, how the box model defines the spacing and sizing of page elements, styling text, and managing basic layouts. It Will also explores the tools needed to work with CSS, how to use selectors to target elements, and more.
  11 | 
  12 | ### Prerequisites for current course / What you need to know
  13 | To move forward with CSS you must need basic knowledge of XHTML/HTML/HTML5. It's an added advantage if you know basic concepts like Web, Internet, Web Page, URL, images, Web Design with XHTML/HTML/HTML5 etc. Its advisable to view [Web Design Development Foundations-Web Technology Fundamentals](https://github.com/dinanathsj29/web-design-development-fundamentals) and [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials) before jumping into CSS3 fundamentals.
  14 | 
  15 | Topics include
  16 | =====================
  17 | 
  18 | 1. [Course introduction](#section-1-course-introduction)
  19 | 2. [Introducing CSS](#section-2-introducing-css)
  20 | 3. [CSS basics](#section-3-css-basics)
  21 | 4. [CSS specifications](#section-4-css-specifications)
  22 | 5. [Common CSS concepts](#section-5-common-css-concepts)
  23 | 6. [CSS resources](#section-6-css-resources)
  24 | 7. [What's the next Step?](#section-7-whats-the-next-step)
  25 | 
  26 | Section 1. Course introduction
  27 | =====================
  28 | 
  29 | ### 1.1. Welcome
  30 | Hi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to CSS3 Fundamentals. This course is designed to introduce you to basic CSS concepts, terminology, and tools. It's perfect for any new web designer/developer looking for a good starting point with CSS. We Will start by exploring the basics of CSS, what CSS is?, syntax, how CSS works, use CSS to create websites, using CSS on a wide variety of platforms. I will start by giving an overview of CSS, CSS features, browser support, followed by formatting text, layouts, images, box model, positioning, CSS online tools, and resources.
  31 | 
  32 | Section 2. Introducing CSS
  33 | =====================
  34 | 
  35 | ### 2.1. Importance
  36 | 
  37 | ### 3 pillars / core Languages/Technologies used for Front End Web Design/Development:
  38 | 
  39 | 1. **HTML (HyperText Markup Language)** - Markup language, essential page structure/content, readable and convey structure to the user, text layout model, page mark-up, text, tags, data, details for pages, images, tables, anchor links, forms
  40 |     - HTML is an acronym that stands for `HyperText Markup Language` which is used for creating `web pages and web applications
  41 |     - HTML is not a programming language; it is a markup language that defines the structure of your content ie. document
  42 | 
  43 | 2. **`CSS (Cascading Style Sheet) - Style Sheet language, page design / presentation / layouts / styling / formattings, look and feel, creative part of web pages`**
  44 |     - CSS is a stylesheet language that allows you to control the appearance (look and feel) of your webpages
  45 | 
  46 | 3. **JavaScript (JS)** - Scripting language, dynamic page behavior, logics, conditions and validations, events (mouse click, hover), interactivity with the user/events, dynamic updates in a web page
  47 |     - JavaScript is a `scripting language of the web that allows you to do interactivity with the user, implement conditions and validations, dynamic updates in a web page, etc.
  48 | 
  49 | > **Syntax & Example**:
  50 | ```html
  51 | <!DOCTYPE html>
  52 | <html lang="en">
  53 | 
  54 |   <head>
  55 | 
  56 |     <meta charset="UTF-8">
  57 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  58 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  59 |     <title>02.01.css.intro.html</title>
  60 | 
  61 |     <!-- internal style -->
  62 |     <style>
  63 | 
  64 |       /* css selector: { property:value; } */
  65 |       body{
  66 |         background-color: #FFC0E5;
  67 |         font-family: Arial, Helvetica, sans-serif;
  68 |         line-height: 30px;
  69 |       }
  70 |     </style>
  71 |     
  72 |   </head>
  73 | 
  74 |   <body>
  75 | 
  76 |     <h1>02.01.css.intro.html</h1>
  77 | 
  78 |     <!-- inline style -->
  79 |     <h1 style="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-decoration: underline;"></h1>>Getting Started with CSS</h1>
  80 | 
  81 |     <p>In this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML. <br /> <br />
  82 |     If you're just starting in the world of web development, start learning from here <br /><br />
  83 |     Well, let's get started with the most popular style sheet language.</p>
  84 | 
  85 |   </body>
  86 | 
  87 | </html>
  88 | ```
  89 | 
  90 | ### 2.2. What is CSS?
  91 | - CSS stands for `Cascading Style Sheets`
  92 | - CSS is `presentational, styling, formatting language` developed to `control look and feel` of HTML documents 
  93 | - CSS is the Stylesheet language/technology developed to create Page Designs / Layouts / Styling / Formattings, look and feel of web pages
  94 | - CSS is the `key presentational technology` that is used in website design
  95 | - Cascading refers to the way that CSS apply one style on top of another
  96 | - HTML controls the structure of web page, `CSS controls the presentation/styles/design`
  97 | - Stylesheets are a collection of formatting/styling/presentation rules
  98 | 
  99 | > **Example**: HTML is like a new Raw concrete Building structure, CSS is like skin (outside of the building looks)
 100 | 
 101 | ### 2.3. Why use CSS? (Benefits of CSS)
 102 | - Separate styles/presentation rules from content (separation of concern)
 103 | - CSS provides better & high-end controls over the look and feel
 104 | - With CSS Designer/Developers gain lots of flexibility & consistency over styling
 105 | - Highly modularise web design with external independent .css files
 106 | - CSS is significant as it applies one style to many elements/tags
 107 | - Apply one style to many styles
 108 | - Apply a set of styles to many documents of an application
 109 | - Target different media like Screen, Print, Mobile device
 110 | 
 111 | ### 2.4 Advantages of CSS
 112 | One of the biggest advantages of using CSS is that it allows the separation of style and layout from the content of the document. Let us have a look at some more advantages of using CSS:
 113 | - Easy maintenance (separate .css file)
 114 | - CSS save lots of time on styling multiple pages/application(re-usability)
 115 | - Pages load faster (separation of concern)
 116 | - Superior styles to HTML (Provide more attributes) 
 117 | - Multiple device compatibility (manage/handle devices with different resolution)
 118 | - Global web standards
 119 | 
 120 | ### 2.5. Prerequisites of using CSS (Cascading Style Sheets)
 121 | #### Tools for building web sites-web pages/writing HTML & CSS
 122 | 
 123 | 1. **Text Editor/HTML Editor** - `NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaver` etc.
 124 | 	- A CSS file (.css) is a text file itself consists of CSS style & properties, so to create/modify a CSS file we can use any text editor.
 125 | 2. **Browsers To view output of .html pages with .CSS styles** - `Google Chrome, Mozilla Firefox, Internet Explorer, Safari` etc.
 126 | 	- Once the .html/.htm file is created and saved, we can create a .CSS file and link within HTML and then we can see its output in any latest web browser.
 127 | 	
 128 | <p>
 129 |   <figure>
 130 |     &nbsp;&nbsp;&nbsp; <img src="./_examples-css3-fundamentals/assets/images/browers_all_2.png" alt="all browsers" title="widely used browsers" width="400" border="2" />
 131 |     <figcaption>&nbsp;&nbsp;&nbsp; Image - Widely used modern browsers</figcaption>
 132 |   </figure>
 133 | </p>
 134 | 
 135 | Section 3. CSS basics
 136 | =====================
 137 | 
 138 | ### 3.1. Default Browser styles
 139 | - Open any HTML page (Unstyled / No CSS used) in browser, have a look on content styles
 140 | > **Note**: Saying Unstyled is not accurate as every browser apply own default style set to visual CSS rules `user agent stylesheet` on every elements like `<h1> to <h6>, <ul> <ol> <li>, <p>, <a> [fonts used, different size of text, space between paragraphs, anchor links color]`.
 141 | - When the Designer/Developer writes CSS to show a custom look it overwrites browser default styles and apply `custom styles`
 142 | - Many HTML elements come with browser-specific default CSS properties which can sometimes result in unknown/unwanted behavior
 143 | - For example `Input boxes`, `selec option dropdown` are displayed differently in different browsers
 144 | > **Note**: Check the page source or Inspect page with Debugger utilities like: `FireBug, Inspect/ Inspect Element` (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML/CSS code/tags/properties).
 145 | 
 146 | > **Note**: `CSS Reset` a collection of styles allows designers to avoid conflicts between their styles and browser default styles.
 147 | 
 148 | > **Syntax & Example**: 
 149 | ```html
 150 | <body>
 151 | 
 152 |     <h1>03.01.default.browser.styles.html</h1>
 153 | 
 154 |     <ul>
 155 |       <li><strong>**Note**: Check the page source or Inspect page with Debugger utilities like: `FireBug, Inspect/ Inspect Element` (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML/CSS code/tags/properties).</strong></li>
 156 |     </ul>
 157 | 
 158 |     <p>When Designer/Developer writes CSS to show custom look it overwrites browser default styles and apply `custom styles` <br /> <br />
 159 |     - Many HTML elements come with browser-specific  default CSS properties which can sometimes result in unknown/unwanted behavior </p>
 160 | 
 161 |   </body>
 162 | ```
 163 | 
 164 | ### 3.2. CSS syntax
 165 | - Learning CSS / CSS Syntax is remarkably very simple and easy
 166 | - A CSS rule consists of a set of styles/rules that are interpreted by the browser and then applied to the corresponding elements in the document
 167 | 
 168 | <img src="./_examples-css3-fundamentals/assets/images/css-selector.png" alt="css-selector.png" title="css-selectors"  />
 169 | 
 170 | > **Syntax**: 
 171 | ```css
 172 | selector { 
 173 |     property: value;    /* declaration/rule 1 */
 174 |     property: value;    /* declaration/rule 2 */
 175 | }
 176 | ```
 177 | 
 178 | > **Example**: 
 179 | ```html
 180 | <head>
 181 | 
 182 |     <!-- internal style -->
 183 |     <style>
 184 | 
 185 |       /* css selector: { property:value; } */
 186 |       body{
 187 |         background-color: #FFC0E5;
 188 |         font-family: Arial, Helvetica, sans-serif;
 189 |         line-height: 30px;
 190 |       }
 191 | 
 192 |       p { 
 193 |         color: #0000ff; 
 194 |         font-size: 20px;
 195 |       } 
 196 |     </style>
 197 |     
 198 |   </head>
 199 | 
 200 |   <body>
 201 | 
 202 |     <h1>03.02.syntax.html</h1>
 203 | 
 204 |     <ul>
 205 |       <li>A CSS rule consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document.</li>
 206 |     </ul>
 207 | 
 208 |     <img src="../assets/images/css-selector.png" alt="css-selector.png" title="css-selectors" />
 209 | 
 210 |     <p>Selectors are used to declare which of the markup elements a style applies to. <br /> <br />
 211 |     The declarations that appear in the block that follows the selector may be applied to all elements of a specific type or only those elements that match a certain attribute.
 212 |     </p>
 213 |     
 214 |   </body>
 215 | ```
 216 | 
 217 | #### Basic elements of CSS syntax:
 218 | - A CSS style rule is made of the following parts:
 219 | 
 220 | | **Item**          | **Description**                                       |
 221 | | ----------------- |-------------------------------------------------|
 222 | | selector          | Target (it may be an HTML Element/Tag/Id/Class)           |
 223 | | declaration/rule  | Definition part in curley brace { property: value; }  |
 224 | | property          | skin/style attribute to change (font, size, color, border) 			    |
 225 | | value             | value to apply to CSS properties (Arial font, 10px size, red color) |
 226 | 
 227 | > **Note**: Writing `selector` is just half part of CSS rule, rest half belongs to `property: value` want to set.
 228 | 
 229 | ### 3.3. Basic Selector types
 230 | - Selector helps to `target` an `elements` on the page 
 231 | - The selector allows us to tell the browser which element/tag on the page we want to style
 232 | - CSS selectors are used to `target/find/select` HTML elements based on `element/tag name, id, class, attribute, and more`
 233 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element
 234 | - Selectors are used to declaring which of the markup elements a style applies to, Selector indicates the HTML element you want to style
 235 | 
 236 | ### 3.4. Element/Tag/Type Selector
 237 | - The element selector target/find/selects the `HTML element/tag by name`
 238 | - Global selectors based on any HTML element/tag name
 239 | - This is the simplest/basic way to `target all elements` of a given element/tag/type
 240 | 
 241 | > **Syntax**: 
 242 | ```css
 243 | Element/Tag { 
 244 |     property: value;    /* declaration/rule 1 */
 245 | }
 246 | ```
 247 | 
 248 | > **Example**: 
 249 | ```html
 250 | <!-- internal style -->
 251 | <style>
 252 | 
 253 |     /* css selector: { property:value; } */
 254 |     h1 { 
 255 |         background-color: #9999ff; 
 256 |         text-transform: uppercase;
 257 |     } 
 258 | 
 259 |     li {
 260 |         line-height: 30px;
 261 |         letter-spacing: 3px;
 262 |     }
 263 | 
 264 |     p {
 265 |         border: 2px dashed #9999ff;
 266 |     }
 267 | 
 268 | </style>
 269 | ```
 270 | 
 271 | ### 3.5. Class Selector
 272 | - The class selector selects HTML elements with a `specific class attribute` 
 273 | - It is used with a period character `. (full stop symbol)` followed by the class name
 274 | - Attribute selector based on `class attributes` applied to HTML element/tag
 275 | - A generic set of rules applied to the similar-looking item (belongs to same .class)
 276 | - `.class` is a very important attribute while dealing with HTML+CSS as similar looking/output based things on a web page usually belongs to one class
 277 | - `.class` selector is a more precise way to target an element/markup as compared to ab `element/tag/type` selector
 278 | 
 279 | > **Note**: `.class` and `#id` attributes/selectors not only allows to style content but primarily exists to give more meaning/semantics to content.
 280 | 
 281 | > **Syntax**: 
 282 | ```css
 283 | .className { 
 284 |     property: value;    /* declaration/rule 1 */
 285 | }
 286 | ```
 287 | 
 288 | ```html
 289 | <h1 class="className">Some heading content </h1>
 290 | ```
 291 | 
 292 | > **Example**: 
 293 | ```css
 294 | .headingsLarge { 
 295 |     border: 2px dotted red;
 296 |     text-transform: uppercase;
 297 |     text-decoration: underline;
 298 |     padding: 10px;
 299 | }
 300 | ```
 301 | 
 302 | ```html
 303 | <h1 class="headingsLarge">Some heading content </h1>
 304 |   
 305 | ```
 306 | 
 307 | ### 3.6. Id Selector
 308 | - The id selector `selects the id attribute` of an HTML element to select a specific element 
 309 | - It is used with a `hash/pound character # sign` followed by the id name
 310 | - Attribute selector based on specific id attributes applied to HTML element/tag
 311 | - An `id` is always `single/unique` within the page so it is chosen to select a single, unique element in a web page
 312 | - #id is a very important attribute while dealing with HTML+CSS to make and `target single unique thing` in document
 313 | 
 314 | > **Note**: `#id` and `.class` attributes/selectors not only allows to style content but primarily exists to give more meaning/semantics to content.
 315 | 
 316 | > **Syntax**: 
 317 | ```html
 318 | <h1 id="idName">Some heading content </h1>
 319 | ```
 320 | 
 321 | ```css
 322 | #idName { 
 323 |     property: value;    /* declaration/rule 1 */
 324 | }
 325 | ```
 326 | 
 327 | > **Example**: 
 328 | ```html
 329 | <h1 id="headingMain">Some heading content </h1>
 330 | ```
 331 | 
 332 | ```css
 333 | .headingMain { 
 334 |     border: 2px dotted red;
 335 |     text-transform: uppercase;
 336 |     text-decoration: underline;
 337 |     padding: 10px;
 338 |     
 339 |     font-family:Arial;
 340 |     font-style: italic;
 341 |     letter-spacing: 6px;
 342 |     text-align: center;
 343 | }   
 344 | ```
 345 | 
 346 | ### 3.7. Universal Selector
 347 | - The universal selector `selects all the elements` on the page
 348 | - Rather than selecting elements of a specific type, the universal selector simply `matches the name of any element type`
 349 | - The universal selector is used as a `wildcard * character`
 350 | 
 351 | > **Syntax**: 
 352 | ```css
 353 | * { 
 354 |     property: value;    /* declaration/rule 1 */
 355 | }
 356 | ```
 357 | 
 358 | > **Example**: 
 359 | ```css
 360 | * { 
 361 |     color: purple;
 362 |     letter-spacing: 4px;
 363 |     line-height:36px;
 364 | }   
 365 | ```
 366 | 
 367 | ### 3.8. Group/Grouping Selector
 368 | - Group/Grouping selector allows you to `group different types of selectors together` that share similar formatting
 369 | - Grouping selector is used to `minimize the code`, its highly efficient selector
 370 | - It also prevents you from repeating the same style rules over and over again
 371 | - You can apply a style to many selectors, Just `separate the selectors with a comma (,)`
 372 | - `Commas ,` are used to separate each selector in grouping
 373 | 
 374 | > **Syntax**: 
 375 | ```css
 376 | element,.class,#id, element selector{ 
 377 |     property: value;    /* declaration/rule 1 */
 378 | }
 379 | ```
 380 | 
 381 | > **Example**: 
 382 | ```css
 383 | /*
 384 | .headingsLarge { 
 385 |     color: purple;
 386 |     letter-spacing: 3px;
 387 |     line-height: 36px;
 388 |     word-spacing: 5px;
 389 |     text-transform: capitalize;
 390 | }
 391 | 
 392 | #headingMain{
 393 |     color: purple;
 394 |     letter-spacing: 3px;
 395 |     line-height: 36px;
 396 |     word-spacing: 5px;
 397 |     text-transform: capitalize;
 398 | }
 399 | */
 400 | 
 401 | .headingsLarge, #headingMain, p, .highlightRed, li { 
 402 |     color: purple;
 403 |     letter-spacing: 3px;
 404 |     line-height: 36px;
 405 |     word-spacing: 5px;
 406 |     text-transform: capitalize;
 407 | }  
 408 | ```
 409 | 
 410 | ### 3.9. Conditional/Descendant Selector (parent-child)
 411 | - `Highly specific selector` that target elements based on their location within other elements
 412 | - You can use this selector when you need to select an element that is the `descendant/inside of another element`
 413 | - You want to apply a style rule to a particular element only when it lies inside a particular element
 414 | - `White space` is used to denote a hierarchy of elements (parent nested child)
 415 | - Conditional/Descendent selector is used to `minimize the code`, its highly efficient selector
 416 | 
 417 | > **Syntax**: 
 418 | ```css
 419 | parent child selector{ 
 420 |     property: value;    /* declaration/rule 1 */
 421 | }
 422 | ```
 423 | 
 424 | > **Example**: 
 425 | ```css
 426 | div p { 
 427 |     color: blueviolet;
 428 |     border: 2px dashed gold;
 429 |     padding: 20px;
 430 |     margin: 50px;
 431 | } 
 432 | 
 433 | ol .highlightRed{ 
 434 |     color: purple;
 435 |     letter-spacing: 3px;
 436 |     line-height: 36px;
 437 |     word-spacing: 5px;
 438 |     text-transform: capitalize;
 439 |     font-family: arial;
 440 |     background-color:#66a7a7;
 441 | }
 442 | ```
 443 | 
 444 | ### 3.10. Pseudo-class Selector 
 445 | We used many selectors like `element, class, id, universal` etc. which are fully dependent on DOM structural representation (Document Object Model). But special states like `:hover, :active, :visited, :before :after` are styled with Pseudo-class Selector.
 446 | - pseudo means `not actually but having the appearance of; pretended; false or spurious;`
 447 | - Pseudo-class selectors are CSS selectors with a colon preceding them `:`
 448 | - A CSS pseudo-class is a keyword added to a selector that specifies a `special state` of the selected element(s) like `hover, active, focus, visited, link`
 449 | - Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree
 450 | - a pseudo-class is basically a special state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are `:link, :visited, :hover, :active`
 451 | 
 452 | > **Syntax**: 
 453 | ```css
 454 | element:link {
 455 |     property: value;    /* declaration/rule 1 */
 456 | }
 457 | 
 458 | element:visited {
 459 |     property: value;    /* declaration/rule 1 */
 460 | }
 461 | 
 462 | element:hover {
 463 |     property: value;    /* declaration/rule 1 */
 464 | }
 465 | 
 466 | element:active {
 467 |     property: value;    /* declaration/rule 1 */
 468 | }
 469 | ```
 470 | 
 471 | > **Example**: 
 472 | ```html
 473 | <head>
 474 | <!-- internal style -->
 475 | <style>
 476 |     
 477 |     /* css selector: { property:value; } */
 478 |     body {
 479 |         background-color: #67b1b1;
 480 |         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 481 |     }
 482 | 
 483 |     .links-container a {
 484 |         width: 10%;
 485 |         background-color:#999;
 486 |         padding: 5px;
 487 |         margin: 10px;
 488 |     }
 489 | 
 490 |     .horizontal-menu a {
 491 |         display: inline-block;
 492 |     }
 493 | 
 494 |     .vertical-menu a {
 495 |         display: block;
 496 |     }
 497 | 
 498 |     .links-container a:link {
 499 |         color: #000;
 500 |     }
 501 | 
 502 |     .links-container a:visited {
 503 |         color: #666;
 504 |     }
 505 | 
 506 |     .links-container a:hover {
 507 |         color: #fff;
 508 |         font-weight: bold;
 509 |         background-color: #008080;
 510 |         border-bottom: 2px solid;
 511 |     }
 512 | 
 513 |     .links-container a:active {
 514 |         color: #008080;
 515 |         background-color: #fff;
 516 |     }
 517 | 
 518 |     .link-active {
 519 |         text-decoration: none;
 520 |         color: #008080 !important;
 521 |         font-weight: bold;
 522 |         border-bottom: 5px solid;
 523 |         background-color: #fff !important;;
 524 |     }
 525 | 
 526 | </style>
 527 | ```
 528 | 
 529 | ```html
 530 | <body>
 531 |     
 532 |     <div class="links-container horizontal-menu">
 533 |       <a class="link-active" href="#">Home</a> 
 534 |       <a href="#">About</a>
 535 |       <a href="#">Products</a>
 536 |       <a href="#">Services</a>
 537 |       <a href="#">Contact</a>
 538 |     </div>
 539 | 
 540 |     <br /> <br />
 541 |     <div class="links-container vertical-menu">
 542 |       <a class="link-active" href="#">Home</a> 
 543 |       <a href="#">About</a>
 544 |       <a href="#">Products</a>
 545 |       <a href="#">Services</a>
 546 |       <a href="#">Contact</a>
 547 |     </div>
 548 |       
 549 | </body>
 550 | ```
 551 | 
 552 | ### 3.11. Authoring options / Where and How to add CSS
 553 | CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):
 554 | 
 555 | 1. **External stylesheet** (Separation of concern) *[Using the `<link> element`, pointing to an external CSS file]*
 556 | 2. **Internal stylesheet** (Embedded stylesheet) *[Using the `<style> element` in the head section of a document]*
 557 | 3. **Inline stylesheet** *[Using the `style attribute` in any HTML start tag]*
 558 | 
 559 | #### 1. External stylesheet (Separation of concern)
 560 | - We can put required CSS styles into one `separate .CSS` file
 561 | - External stylesheet is like a normal text file with `.CSS extension` containing styles for HTML markup
 562 | - Most of the time we have to use an external style sheet (.css file) to separate Markup, Style, and Script from a web document 
 563 | - `<link />` tag is used under `<head>` section to embed/import/link external CSS file which can be used in various HTML pages
 564 | - An advantage of external CSS file over internal(embedded)/inline CSS is that a `single CSS file can be used in multiple pages of an application to get flexibility & consistency over styling (efficient)
 565 | - An external style sheet `holds all the style rules` in a separate document that you can link from an HTML file on your site.
 566 | - External style sheets are the `most flexible` because, with an external style sheet, you can change the look of an entire website by changing just one file.
 567 | 
 568 | > **Syntax & Example (.html document file)**:
 569 | ```html
 570 | <head>
 571 | 
 572 |     <link rel="stylesheet" type="text/css" href="../assets/styles/03.11.1.style.css" />
 573 | 
 574 | </head>
 575 | ```
 576 | 
 577 | > **Syntax & Example (.css stylesheet file)**:
 578 | ```css
 579 | /* external css file - css selector: { property:value; } */
 580 | body{
 581 |   background-color: #d3d3ff;
 582 |   font-family: Arial, Helvetica, sans-serif;
 583 |   line-height: 30px;
 584 | }
 585 | 
 586 | h1 {
 587 |   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 588 |   text-decoration: underline;
 589 |   text-transform: uppercase;
 590 |   letter-spacing: 5px;
 591 | }
 592 | ```
 593 | 
 594 | #### 2. Internal stylesheet (Embedded stylesheet)
 595 | - Internal (Embedded) CSS is used to apply CSS on a single/specific document or page
 596 | - An internal style sheet may be useful if one single page has a unique style
 597 | - An Internal/Embedded style sheets only affect the document they are embedded in
 598 | - `<style>` tag is used to write internal styles under `<head>` section (binds to current file only)
 599 | `<style>` tag allows us to write directly into the document
 600 | - Used in small non-scalable apps (it isn't quite efficient as external stylesheets)
 601 | 
 602 | > **Syntax & Example**:
 603 | ```html
 604 | <head>
 605 |     <!-- internal style -->
 606 |     <style>
 607 |         /* css selector: { property:value; } */
 608 |         body{
 609 |             background-color: #d3d3ff;
 610 |             font-family: Arial, Helvetica, sans-serif;
 611 |             line-height: 30px;
 612 |         }
 613 | 
 614 |         h1 {
 615 |             font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 616 |             text-decoration: underline;
 617 |             text-transform: uppercase;
 618 |             letter-spacing: 5px;
 619 |         }
 620 |     </style>
 621 | </head>
 622 | ```
 623 | 
 624 | #### 3. Inline stylesheet
 625 | - We can write/apply style directly into an HTML element
 626 | - Inline CSS is used to apply CSS on a single line or element 
 627 | - `style` attribute is used to write inline styles specific to an element `<p style="color:blue;">Some Text</p>`
 628 | - Please don't use this, unless you really have to! It is really a `bad practice and bad for maintenance` (you might have to update the same information multiple times per document)
 629 | - Used in small non-scalable apps (kind of last moment patch/solution)
 630 | 
 631 | > **Syntax & Example**:
 632 | ```html
 633 | <!-- inline style -->
 634 | <body style=" background-color: #d3d3ff;
 635 |             font-family: Arial, Helvetica, sans-serif;
 636 |             line-height: 30px;">
 637 | 
 638 |     <!-- inline style -->
 639 |     <h1 style="font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 640 |             text-decoration: underline;
 641 |             text-transform: uppercase;
 642 |             letter-spacing: 5px;">Syntax: Welcome to HTML</h1>
 643 | </body>
 644 | ```
 645 | 
 646 | #### CSS authoring points/understandings:
 647 | - Most of the projects rely heavily on external stylesheets
 648 | - Internal (Embedded) styles are mainly used to overwrite external styles
 649 | - Inline-styles are like last moment fix/patch/solution to achieve the required style output
 650 | - One should plan an overall site strategy for style placement
 651 | 
 652 | ### 3.12. How Browsers apply styles
 653 | #### 3.12.1 Selector reading mechanism
 654 | - Browser reads selectors from `Right to Left`
 655 | - > **Note**: .content p span { color: blue; } 
 656 |     - First, the browser will select all **`span`**
 657 |     - Secondly, it will scan for **`p`**
 658 |     - After filtering all results it will check that **`p`** and **`span`** are present inside **`.content`** class or not
 659 | > Its advisable to find out and write an efficient, simplified version of a selector
 660 | 
 661 | #### 3.12.2. The Cascade mechanism
 662 | - CSS is an abbreviation for Cascading Style Sheets, which indicates that the notion of the cascade is important while working with styles
 663 | - If multiple CSS rules will have selectors matching the same element in such cases, which CSS rule "wins", and is finally applied to the element? This is controlled by a mechanism called the Cascade; 
 664 | 
 665 | #### 3.12.3. CSS apply order
 666 | 1. External stylesheet (Separation of concern)
 667 | 2. Internal stylesheet (Embedded stylesheet)
 668 | 3. Inline stylesheet
 669 | > **Note**: If any styles conflict with each other then the `latest/most recent and closest/nearest` set of styles overwrites the earlier style
 670 | > **Note**: Cascade simply means `last rule applied wins!`
 671 | 
 672 | #### 3.12.4. The cascade dependency factors
 673 | What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):
 674 | 1. Importance / !important 
 675 | 2. Specificity
 676 | 3. Inheritance (Source order)
 677 | 
 678 | #### 1. Importance / !important
 679 | - `!important` - One property/keyword to rule all!
 680 | - In CSS, there is a special piece of syntax you can use to make sure that a certain declaration will always win over all others: `!important`
 681 | - The `!important` rule is used for overriding the previously assigned CSS declarations OR to make the current rule as a supreme rule
 682 | - It is strongly recommended that you `never use !important` unless you absolutely have to
 683 | 
 684 | > **Syntax & **Example**:
 685 | ```css
 686 | .paraText {
 687 |   background-color: gray;
 688 |   border: none !important;
 689 | }
 690 | 
 691 | p {
 692 |   background-color: blue;
 693 |   color: white;
 694 |   padding: 5px;
 695 |   border: 2px dashed black;
 696 | }
 697 | ```
 698 | 
 699 | ```html
 700 | <body>
 701 |     <p class="paraText" id="mainPara">One selector to rule them all!</p>
 702 | </body>
 703 | ```
 704 | 
 705 | #### 2. Specificity
 706 | - Specificity is basically a measure of how specific a selector/rule is
 707 | - If more conflicting CSS rules comes to the same element then the browser follows some rules to determine which one is the most specific selector to apply and wins out
 708 | - **`ID selectors` have an even higher specificity than `class selectors` and lowest is `element selectors`**
 709 | > **Note**: The only way to win against an ID selector is to use `!important` or using `inline styles`. The only way to win against an `!important` is to include another !important declaration
 710 | 
 711 | #### Specificity points Chart/Table (ICE)
 712 | 
 713 | | Selector              |  Points           |&nbsp; |&nbsp;     |&nbsp;     |&nbsp;             |            
 714 | | --------------------- |:------------------:|:-----:|:---------:|:---------:|-----------------:|
 715 | |                       | style attribute   | ID    | Classes   | Element   | Specificity Score |
 716 | | body (Element/Tag)    | 0                 | 0     | 0         | 1         | 0001              |
 717 | | .class (.content)     | 0                 | 0     | 1         | 0         | 0010              |
 718 | | #id (#mainContent)    | 0                 | 1     | 0         | 0         | 0100              |
 719 | | **No selector, but style attribute** | 1      | 0     | 0         | 0         | **1000**              |
 720 | | div p                 | 0                 | 0     | 0         | 2         | 0002              |
 721 | | #mainContent p        | 0                 | 1     | 0         | 1         | 0101              |
 722 | | .content p            | 0                 | 0     | 1         | 1         | 0011              |
 723 | | #mainContent .content p   | 0             | 1     | 1         | 1         | 0111              |
 724 | 
 725 | > **Note**: Selector/Rule with more score/points finally wins
 726 | 
 727 | > **Syntax & Example**:
 728 | ```html
 729 | <!-- internal style -->
 730 | <style>
 731 |     /* css selector: { property:value; } */
 732 | 
 733 |     /* element - least specific - specificity point/score= 1 */
 734 |     p{
 735 |         background-color: gray;
 736 |         color: #fff;
 737 |         padding: 5px;
 738 |     }
 739 | 
 740 |     /* class - little specific - specificity point/score= 10 */
 741 |     .paraText {
 742 |         color: #000;
 743 |     }
 744 | 
 745 |     /* id - more specific - specificity point/score= 100 */
 746 |     #mainParaText {
 747 |         color:#00f;
 748 |     }
 749 | 
 750 |     /* element + id - much more specific - specificity point/score= 101 */
 751 |     p#mainParaText {
 752 |         color:#0f0;
 753 |     } 
 754 | 
 755 |     /* !important - the supereme rule*/
 756 |     p {
 757 |         color:#f00 !important;
 758 |     } 
 759 | </style>
 760 | 
 761 | 
 762 | <body>
 763 |     <p class="paraText" id="mainParaText" style="color:gold;">What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):</p>
 764 | </body>
 765 | ```
 766 | 
 767 | #### 3. Inheritance (Source order)
 768 | - Inheritance simply means using some properties from parent/container elements to a child
 769 | - The inherit keyword specifies that a property should inherit its value from its parent element
 770 | - Latest/last rules applied will win over earlier rules
 771 | - Styles are cumulative; so the final rendering of elements depends not only on selectors directly target the element but also on any properties that might be inherited from parent/top-level elements
 772 | - **Note**: All child elements in documents inherit properties from CSS rules applied to body/parent/container elements
 773 | 
 774 | > **Syntax & Example**:
 775 | ```html
 776 | <!-- internal style -->
 777 | <style>
 778 |     /* css selector: { property:value; } */
 779 | 
 780 |     body {
 781 |         font-family: verdana;
 782 |         color: #2617da;
 783 |         margin: 10px;
 784 |         padding: 10px;
 785 |         font-style: italic;
 786 |     }
 787 | 
 788 |     p {
 789 |         background-color: gray;
 790 |         color: #fff;
 791 |         padding: 5px;
 792 |     }
 793 | 
 794 |     h1 {
 795 |         color: #b50e0e;
 796 |     }
 797 | 
 798 | </style>
 799 | ```
 800 | 
 801 | ### 3.13. How CSS works with HTML structure
 802 | CSS works with the structure of the HTML document along the browser parse the HTML code, find the right element, and style accordingly.
 803 | > **Load HTML -> Parse HTML -> Load CSS -> Parse CSS -> Browser creates DOM Tree with (parsed HTML + CSS)  -> Display into Browser**
 804 | 
 805 | **Guidelines for writing HTML**:
 806 | - Focus on writing clean, Semantic, consistent, and efficient HTML markup/code
 807 | - It's impossible to write an efficient CSS Without a logical, consistent HTML structure
 808 | - Structure the HTML so that it adds meaning to the content
 809 | - Don't focus on styling when initially structuring HTML markup/code
 810 | 
 811 | **Best Practices to write HTML & CSS**:
 812 | - **HTML**
 813 |     - Use consistent HTML structure through-out web page/app
 814 |     - Organize code with comments
 815 |     - Refactor code as and when necessary
 816 |     - Separate content from style
 817 |     - Use the Alternative Text & Title Attribute on Images
 818 |     - Make Use of Semantic Elements
 819 |     - Avoid non-semantic markup
 820 | 
 821 | - **CSS**
 822 |     - Use meaningful classes and Id's (descriptive names with a role like - content, sidebar, authors, quotes)
 823 |     - Modularize Styles for Reuse
 824 |     - Write CSS Using Multiple Lines & Spaces
 825 |     - Use Proper Class Names
 826 |     - Build Proficient Selectors (Avoid long selectors)
 827 |     - Use Shorthand Properties & Values
 828 |     - Use Shorthand Hexadecimal Color Values
 829 |     - Group & Align Vendor Prefixes
 830 | 
 831 | ### 3.14. Browser rendering differences
 832 | - Browsers developed independently of each other, so different browser rendering engines parse, renders, and displays output differently
 833 | - Each browser has its own different parsers, policies, preferences on how to render and display content
 834 | > **Note**: `Hack` code designed to overcome an error/Browser rendering differences of a specific browser
 835 | 
 836 | #### Common Rendering Engines
 837 | 
 838 | | Engine        | Browser       |
 839 | | ------------- |---------------|
 840 | | Trident       | Internet Explorer, (AOL - America Online), Windows Mobile |
 841 | | Presto        | Opera         |
 842 | | Gecko         | Mozilla FF, Camino  |
 843 | | Webkit        | Safari, Google Chrome |
 844 | 
 845 | #### W3C and Web standards (World Wide Web Consortium)
 846 | - `W3C (World Wide Web Consortium) is the main International Standards Organization for the World Wide Web help in `developing protocols and guidelines that ensure long-term growth for the Web
 847 | - W3C (World Wide Web Consortium) started in the year 1994 to issue recommendations for web technologies
 848 | - Check web standards for consistent design (The Web Standard Project): www.webstandards.org
 849 | - W3C website: https://www.w3.org/
 850 | 
 851 | ### 3.15. CSS Comments
 852 | - Comments are useful for organizing styles, annotating code, or communicating code scenarios with team members
 853 | - CSS comments are generally `written to explain your code`
 854 | - Comments are also great for debugging, understanding code logic, purpose, etc. because you can comment out lines of code
 855 | - It is very helpful for the users who read your code so that they can easily `understand the code`
 856 | - Comments are `ignored by browsers`, it is `good for developers`
 857 | - Single or multiple lines comment is written as: `/* code */`
 858 | 
 859 | > **Syntax & Example**:
 860 | ```html
 861 | <!-- internal style -->
 862 | <style>
 863 |     /* css selector: { property:value; } */
 864 | 
 865 |     /* reset default styles */
 866 |     /* body, h1 {
 867 |         margin:0px;
 868 |         padding:0px;
 869 |     } */
 870 | </style>    
 871 | ```
 872 | 
 873 | Section 4. CSS specifications
 874 | =====================
 875 | 
 876 | CSS is constantly changing and evolving, new features and capabilities are added to enhance design/styling. 
 877 | Initially/Originally HTML elements and attributes used to define basic styles like **bold**, *italics*, size, text color, background color etc.  
 878 | 
 879 | ### 4.1. History of CSS
 880 | | Year          | History               |
 881 | | ------------- |-----------------------|
 882 | | 1996          | CSS 1.0 released      |
 883 | | 1998          | CSS 2.0 released      |
 884 | 
 885 | > **Note**: 
 886 | - Early browser versions focused on market shares rather than compliance & standards
 887 | - Initially, due to no Web Standards, many browser companies had proprietary features, standards, and elements
 888 | 
 889 | | 2004          | 2.1 recommendations                           |
 890 | | ------------- |-----------------------------------------------|
 891 | | 2005          | 2.1 version moved to working draft by W3C (Due to non-implementation of a feature from browsers)                  |
 892 | | 2007          | CSS 2.1 Candidate recommendation              | 
 893 | | 2011          | CSS 2.1 Fully recommended                     | 
 894 | 
 895 | > **Note**: 
 896 | - CSS3 is not a single specification
 897 | - CSS/CSS3 now published as a series of modularised specifications
 898 | - Different features/utilities are released separately like selectors, borders, box-shadow, text-shadow, animations, transitions, media query, etc.
 899 | 
 900 | ### 4.2. The Current State of CSS
 901 | CSS is changing in nature, so significant changes keep on happening in the specification. 
 902 | 
 903 | - [CSS current work](https://www.w3.org/Style/CSS/current-work.en.html)
 904 | - [CSS current state](https://www.w3.org/standards/techs/css#w3c_all)
 905 | - [All CSS specifications](https://www.w3.org/Style/CSS/specs.en.html)
 906 | 
 907 | ### 4.3. Checking browser support:
 908 | - CSS is a constantly changing and evolving language, many features are implemented and many more are implementing. As a Web Designer/Developer you must know which features works and supports in a browser and which are not
 909 | - There are many rendering inconsistencies from browser to browser due to frequent version changes or CSS specifications updations
 910 | 
 911 | > Online resources to check browser support:
 912 | - https://caniuse.com (Support tables for HTML5, CSS3, etc)
 913 | - https://quirksmode.org (Compatibility overview - maintained by Peter-Paul Koch)
 914 | - https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
 915 | - https://www.w3schools.com/cssref/css3_browsersupport.asp
 916 | - http://www.positioniseverything.net/ (Modern browser bugs explained in detail!)
 917 | - Browser development companies proprietary websites
 918 | 
 919 | Section 5. Common CSS concepts
 920 | =====================
 921 | 
 922 | There are many CSS concepts and properties we use in day-to-day CSS work, lets dive into some of the common concepts used while working with CSS.
 923 | 
 924 | ### 5.1. Working with fonts
 925 | - Controlling `typography-text-font` is one of the most important things to do with CSS
 926 | - CSS `Font` property is used to control the look of font-texts 
 927 | - By the use of the CSS font property, you can change the font type, font-text size, color, style, bold, etc.
 928 | - **Font styles**: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
 929 | > **Example/font attributes-properties**: font-family, font-size, color, font-style, font-weight, font-variant. https://www.fontsquirrel.com/   
 930 | 
 931 | #### CSS Font Choices
 932 | 1. System Fonts
 933 | 2. Web Fonts
 934 | 
 935 | 1. **System Fonts**:
 936 |     - Older / Widely supported basic fonts
 937 |     - Limited numbers of fonts to use/apply
 938 |     - Only installed fonts on user/client machine to used/viewed
 939 |     - **Example**: (4 main categories of fonts families)
 940 |         - **generic fonts family:** Serif, Sans-Serif, MonoSpace, Cursive**
 941 |         - **font family**: Times, Arial, Courier, Comic Sans
 942 |     - **Requesting fonts in fallback manner (Font stacks)**: `selector { font-family: Arial, Helvetica, Verdana, Sans-serif; }` (if requested font not available use default `serif` fonts)
 943 | 2. **Web Fonts**:
 944 |     - Emerging technique
 945 |     - Lack of support in older browsers
 946 |     - Web Fonts refer to the technique of having the browser download and install fonts that are requested in the pages styles using the `@font-face` syntax/method
 947 |     - https://fonts.adobe.com/  https://fonts.google.com/
 948 | 
 949 | > **Syntax & Example**:
 950 | ```html
 951 | <!-- internal style -->
 952 | <style>
 953 |     /* css selector: { property:value; } */
 954 |     .headingText, h2, h3 {
 955 |         font-family: Arial, Helvetica, sans-serif;
 956 |         font-size: 3em; /* base font size * 3 = (16 * 3) = 48*/
 957 |         font-style: italic;
 958 |         font-variant: small-caps;
 959 |         font-weight: lighter;
 960 |         color:#008080;
 961 |         
 962 |         -webkit-font-smoothing: antialiased;
 963 |         -moz-font-smoothing: antialiased;
 964 |         -o-font-smoothing: antialiased;
 965 |         -ms-font-smoothing: antialiased;
 966 |         /* font-smoothing: antialiased; */
 967 |     }
 968 | </style>
 969 | ```
 970 | 
 971 | ### 5.2. Formatting text
 972 | - CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively
 973 | - **Text layout styles**: Properties that affect the spacing and other layout features of the text, allowing manipulation of the space between lines and letters, and how the text is aligned within the content box
 974 | > **Example**: color, text-align, text-decoration, text-transform, line-height, direction, word-spacing, text-shadow
 975 | 
 976 | > **Syntax & Example**:
 977 | ```html
 978 | <!-- internal style -->
 979 | <style>
 980 |     /* css selector: { property:value; } */
 981 |     .headingText, h2 {
 982 |         text-align: center;
 983 |         text-decoration: overline;
 984 |         text-transform: uppercase;
 985 |         color:#008080;
 986 |     }
 987 | 
 988 |     .normalList {
 989 |         letter-spacing: 4px;
 990 |         word-spacing: 8px;
 991 |         line-height: 30px;
 992 |         color: #008080;
 993 |     }
 994 | </style>
 995 | ```
 996 | 
 997 | ### 5.3. Color
 998 | - Colors are a pretty powerful way to express different feelings and emotions in our human life and play an important role while designing UI or UX
 999 | - Typically, `color` is used to set a color either for the foreground of an element (i.e., its text), for the background of the element,  or else affect the color of borders/decorative effects
1000 | - The CSS `color` property defines the foreground color (text color), `background-color` property defines the background color of an element
1001 | > **Example**: color, border-color, background-color
1002 | 
1003 | **One can specify color values in various formats, Following table lists all the possible formats**:
1004 | | Format	        |        Syntax	        |    Example
1005 | | ----------------- |-----------------------|-------------------------------|
1006 | | Hex Code	        | #RRGGBB	            | h1 { color:#FF0000; }         |
1007 | | Short Hex Code	| #RGB	                | h1 { color:#F00; }            |
1008 | | RGB %	            | rgb(red%,green%,blue%)   | h1 { color:rgb(50%,50%,50%); }|    
1009 | | RGB Absolute	    | rgb(red,green,blue)	    | h1 { color:rgb(0,0,255); }    |
1010 | | RGBA	            | rgb(red,green,blue, alpha)| h1 { color:rgb(0,0,255,0.5); }    |
1011 | | HSL	            | hsl(hue, saturation, lightness)| h1 { color: hsl(140, 50%, 60%); }    |
1012 | | HSLA	            | hsl(hue, saturation, lightness, alpha)| h1 { color: hsl(140, 50%, 60%, 0.5); }    |
1013 | | Keyword/color name| red, black, etc.	    | h1 { color:teal; }            |
1014 | 
1015 | > **Note:**
1016 | > - RGB stands for Red Green Blue (3 main colors of web/screen) 
1017 | >    - defines the intensity of the color between 0 and 255.
1018 | > - HSL stands for Hue Saturation Lightness
1019 | >   - ***Hue*** is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue
1020 | >   - ***Saturation*** is a percentage value, 0% means a shade of gray, and 100% is the full color.
1021 | >   - ***Lightness*** is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
1022 | > - 150+ color keywords/color names are supported by CSS
1023 | 
1024 | > **Syntax & Example**:
1025 | ```html
1026 | <!-- internal style -->
1027 | <style>
1028 |     /* css selector: { property:value; } */
1029 |     .headingText, h2 {
1030 |         text-align: center;
1031 |         text-decoration: overline;
1032 |         text-transform: uppercase;
1033 |         color: hsl(140, 50%, 60%); /* Hue=140 -> green color, Saturation=50% -> 50% green not full green, lightness=60% -> lighter shade of green*/
1034 |     }
1035 | 
1036 |     h2 {
1037 |         color:rgba(0,155,0,0.5);
1038 |     }
1039 | 
1040 |     .normalList {
1041 |         letter-spacing: 4px;
1042 |         word-spacing: 8px;
1043 |         line-height: 30px;
1044 |         background-color: wheat;
1045 |         color:#000;
1046 |         border-bottom: 5px solid #2f4f4f;
1047 |         padding-bottom: 20px;
1048 |     }
1049 | </style>
1050 | ```
1051 | 
1052 | ### 5.4. Common Measurement units
1053 | - Units are used to specify non-zero length values in CSS properties
1054 | - Length measured can be either `absolute units such as pixels, points and so on, or `relative such as percentages (%) and em` units
1055 | - CSS properties take "length" values, such as width, height, margin, padding, font-size, border-width etc.
1056 | 
1057 | **There are two unit types:** 
1058 | 1. Absolute Values/Units
1059 | 2. Relative Values/Units
1060 | 
1061 | 1. **Absolute Values/Units**
1062 |     - Absolute values are also referred to as fixed values specify exact measurement values
1063 |     - Typically used when physical properties of user agents are known
1064 |     - The absolute length units will appear as exactly as the size mentioned
1065 |     - Absolute physical units such as `in, cm, mm`, etc. should be used for `print media and similar high-resolution devices. 
1066 |     - An on-screen display such as `desktop and lower-resolution devices`, it is recommended to use the `pixel or em` units.
1067 |     - **Example**: in (inches), cm (centimeters), mm (millimeters), pt (points), pc (picas), * px (pixel units)
1068 |     > **Note**: * px (Pixels Units) are relative to the viewing device. 
1069 |     
1070 | 2. **Relative Values/Units**
1071 |     - Relative Values/Units are relative to the units of parent/container or other elements
1072 |     - **Example**: %, em, rem, vw (viewport width), vh (viewport height)
1073 | 
1074 | | Unit	  | Description	                                            | Example                                                 |
1075 | |:-------:|---------------------------------------------------------|---------------------------------------------------------|
1076 | | %       | Relative to the parent/container element	            | p { font-size: 200%; }                                  |
1077 | | em      | Relative to the current font-size (a base font size), (1em = base size of the current font)                       | p { font-size: 2em; }  | 
1078 | | rem     | Relative to the font-size of the root element	        | p { font-size: 2rem }                                   |
1079 | | vw      | Relative to 1% of the width of viewport*	            | div { width: 100vw }                                    |
1080 | | vh      | Relative to 1% of the height of viewport*	            | div { height: 100vh }                                   |
1081 | 
1082 | > **Note**: * Viewport = the browser window size
1083 | 
1084 | > **Syntax & Example**:
1085 | ```html
1086 |  <!-- internal style -->
1087 | <style>
1088 |     /* css selector: { property:value; } */
1089 |         body {
1090 |         font-size: 20px;
1091 |         margin: 0px;
1092 |         padding: 0px;
1093 |     }
1094 | 
1095 |     h1 {
1096 |         margin: 0px;
1097 |         padding: 0px;
1098 |     }
1099 | 
1100 |     .normalList {
1101 |         font-size: 0.5em;
1102 |         line-height: 3em;
1103 |         border:0.2em dashed #666;
1104 |         padding: 3em;
1105 |         margin: 2em;
1106 |     }
1107 | 
1108 |     .container {
1109 |         background-color: darkseagreen;
1110 |         height: 100vh;
1111 |         width: 100vw;
1112 |         display: table-cell;
1113 |         vertical-align: middle;
1114 |     }
1115 | 
1116 |     .sub-container {
1117 |         background-color:burlywood;
1118 |         padding:20px;
1119 |         width: 50vw;
1120 |         margin: 0 auto;
1121 |     }
1122 | </style>
1123 | 
1124 | 
1125 | <body>
1126 |     
1127 |     <div class="container">
1128 | 
1129 |       <div class="sub-container">
1130 | 
1131 |         <h1 class="headingText" id="mainHeadingText">5. Common CSS Concepts</h1>
1132 | 
1133 |         <p class="paraText" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
1134 | 
1135 |         <h2>05.4. Common Measurement units</h2>
1136 | 
1137 |         <ul class="normalList">
1138 |           <li>Units are used to specify non-zero length value in CSS properties</li>
1139 |           <li>Length measured can be either `absolute units such as pixels, points` and so on, or `relative such as percentages (%) and em` units</li>
1140 |           <li>CSS properties take "length" values, such as width, height, margin, padding, font-size, border-width etc.</li>
1141 |         </ul>
1142 | 
1143 |         <h3>**There are two unit types:** </h3>
1144 | 
1145 |         <ol>
1146 |           <li>Absolute Values/Units</li>
1147 |           <li>Relative Values/Units</li>
1148 |         </ol>
1149 | 
1150 |       </div>
1151 | 
1152 |     </div>
1153 |     
1154 | </body>
1155 | ```
1156 | 
1157 | ### 5.5. Backgrounds
1158 | - CSS background properties are used to define background styles/effects for the elements
1159 | 
1160 | ### Background Properties
1161 | The CSS provides several properties for styling the background of an element, like: 
1162 | 1. **background-color**
1163 |     - The `background-color` property is used to set the `background color` of an element
1164 | 2. **background-image**
1165 |     - The `background-image` property `set an image as a background` of an HTML element
1166 | 3. **background-repeat**
1167 |     - By default, the `background-image` property `repeats an image` both horizontally and vertically
1168 |     - By using `background-repeat` property one can control how a background image is tiled in the background of an HTML element
1169 |     - Properties like `repeat-x & repeat-y` are used to repeat images horizontally (x-axis) or  vertically (y-axis) respectively
1170 | 4. **background-attachment**
1171 |     - The `background-attachment` property determines whether the background image is `fixed with regard to the viewport or scrolls` along with the containing block
1172 |     - Sets whether a background image is fixed or scrolls with the rest of the page
1173 |     - The background-attachment property is used to control the scrolling of an image in the background
1174 | 5. **background-position**
1175 |     - The `background-position` property is used to control the position of the background image
1176 |     - The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.
1177 |     - Sets the starting position of a background image
1178 | 
1179 | > **Syntax & Example**: 
1180 | ```css
1181 | <!-- internal style -->
1182 | <style>
1183 |     /* css selector: { property:value; } */
1184 |     ol li {
1185 |         height: 100px;
1186 |         font-weight: bold;
1187 |         margin-top: 20px;
1188 |         padding: 5px;
1189 |         border: 2px solid brown;
1190 |     }
1191 | 
1192 |     ol li:nth-child(1) {
1193 |         background-color: thistle;
1194 |     }
1195 | 
1196 |     ol li:nth-child(2) {
1197 |         background-image: url("../assets/images/css3.png");
1198 |         background-color: bisque;
1199 |     }
1200 | 
1201 |     ol li:nth-child(3) {
1202 |         background-image: url("../assets/images/css3.png");
1203 |         background-repeat: no-repeat; 
1204 |         background-color: darkseagreen;
1205 |     }
1206 | 
1207 |         /* body {
1208 |         background-image: url("../assets/images/css3.png");
1209 |         background-attachment: fixed;
1210 |     } */
1211 | 
1212 |     ol li:nth-child(5) {
1213 |         background-image: url("../assets/images/css3.png");
1214 |         background-repeat: no-repeat;
1215 |         background-color: wheat;
1216 |         background-position: center -50px; /* horizontal X and vertical Y position*/
1217 |     }
1218 | 
1219 |     ol li:nth-child(6) {
1220 |         background-image: url("../assets/images/css3.png");
1221 |         background-repeat: no-repeat;
1222 |         background-color: wheat;
1223 |         background-position: center center; /* horizontal X and vertical Y position*/
1224 |         background-size: contain;
1225 |     }
1226 | </style>
1227 | 
1228 | 
1229 | <ol>
1230 |     <li>**background-color**</li>
1231 |     <li>**background-image**</li>
1232 |     <li>**background-repeat**</li>
1233 |     <li>**background-attachment** <br />  uncomment and check body styles</li>
1234 |     <li>**background-position**</li>
1235 |     <li>**background-position**</li>
1236 | </ol>
1237 | ```
1238 | 
1239 | ### 5.6. Box Model
1240 | - The Box Model refers to the physical properties of an element rectangular box
1241 | - Every element displayed is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page
1242 | - The Box Model concepts help to make layout/designing tasks easier
1243 | - **Box Model consists of properties like**: Margins, Borders, Padding and content width, height (these properties make the physical dimension of an element)
1244 |     - Margin = Space outside/around an element
1245 |     - Border = Rectangular outline/border surrouding an element/box
1246 |     - Padding = Breathing space inside an element border
1247 | > Total width of an element: left border + left padding + content width + right padding + right border
1248 | 
1249 | The following diagram demonstrates how the margin, padding, and border CSS properties determine how much space an element can take on a web page:
1250 | <p align="center">
1251 |     <img src="_examples-css3-fundamentals/assets/images/box-model.png" alt="CSS Box Model" title="CSS Box Model" width="400" />
1252 | </p>
1253 | 
1254 | > **Syntax & Example**:
1255 | ```css
1256 | .container {
1257 |     background-color: burlywood;
1258 |     width: 80%;
1259 |     padding: 20px;
1260 |     border:5px solid #c5760f;
1261 |     margin: 20px auto;
1262 | }
1263 | ```
1264 | 
1265 | ```html
1266 | <body>
1267 |     
1268 |     <div class="container"> 
1269 | 
1270 |     </div>
1271 | 
1272 | </body>
1273 | ```
1274 | 
1275 | ### 5.7. Margin 
1276 | - The margin is `Space outside/around an element`, Margin represents the `space between elements`
1277 | - Margin values are not calculated as part of an elements total width
1278 | - The margins do `not have a background-color`, it is `completely transparent`
1279 | - `Margin is outside` and Padding is inside
1280 | - Margin can be defined either to Top, Right, Bottom, Left or to each side of an element
1281 | 
1282 | > **Syntax & Example**:
1283 | ```css
1284 | element {
1285 |     margin: margin-width/value;
1286 | }
1287 | 
1288 | 
1289 | div {
1290 |     margin: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
1291 |     margin-left: 50px; /* all sides equally */
1292 | }
1293 | 
1294 | --------------------
1295 | 
1296 | .normalList li:nth-child(odd) {
1297 |     /* margin: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
1298 |     /* margin: 10px 20px;  /* pair top-bottom & right-left */
1299 |     margin: 15px; /* all sides equally */
1300 |     background-color: bisque;
1301 | }
1302 | ```
1303 | 
1304 | 
1305 | ```html
1306 | <ul class="normalList">
1307 |     <li>Margin is `Space outside/around an element`, Margin represent the `space between elements`</li>
1308 |     <li>Margin values are not calculated as part of an elements total width</li>
1309 |     <li>The margins does `not have a background-color`, it is `completely transparent`</li>
1310 |     <li>Margin can be defined either to Top, Right, Bottom, Left or to each side of an element</li>
1311 | </ul>
1312 | ```
1313 | 
1314 | ### 5.8. Padding
1315 | - Padding is the `breathing space inside an element border` which holds the content away from edge/border and allows readability
1316 | - CSS Padding property is used to define the space between the element content and the element border
1317 | - `Padding is inside` and Margin is outside
1318 | - Padding can be defined either to Top, Right, Bottom, Left, or to each side of an element
1319 | 
1320 | > **Syntax & Example**:
1321 | ```css
1322 | element {
1323 |     padding: padding-width/value;
1324 | }
1325 | 
1326 | div {
1327 |     padding: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
1328 |     padding-top: 50px; /* all sides equally */
1329 | }
1330 | 
1331 | --------------------
1332 | 
1333 | .normalList li:nth-child(odd) {
1334 |     /* padding: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
1335 |     /* padding: 10px 20px;  /* pair top-bottom & right-left */
1336 |     padding: 15px; /* all sides equally */
1337 |     background-color: bisque;
1338 | }
1339 | ```
1340 | 
1341 | ```html
1342 | <ul class="normalList">
1343 |     <li>Padding is the `breathing space inside an element border` which holds the content aways from edge/border and allows readibility</li>
1344 |     <li>CSS Padding property is used to define the space between the element content and the element border</li>
1345 |     <li>`Padding is inside` and Margin is outside</li>
1346 |     <li>Padding can be defined either to Top, Right, Bottom, Left or to each side of an element</li>
1347 | </ul>
1348 | 
1349 | ```
1350 | 
1351 | ### 5.9. Borders
1352 | - Border defines the `outside edge` of an element 
1353 | - Widely used to define/apply `decorative effects/visual separation` to an element
1354 | - The border of an element goes around the padding and content
1355 | - Borders are defined with 3 properties: `border-width, border-style, border-color, border-radius`
1356 | - The border can be defined either to Top, Right, Bottom, Left, or to the whole element 
1357 | 
1358 | > **Syntax & Example**: 
1359 | ```css
1360 | element {
1361 |     border: border-width/value || border-style || border-color
1362 | }
1363 | 
1364 | div {
1365 |     border: 2px solid #0000ff;
1366 |     border-top: 2px solid #ff0000;
1367 | }
1368 | 
1369 | --------------------
1370 | 
1371 | .border-style-ilst li {
1372 |     font-weight: bold;
1373 |     margin-top: 20px;
1374 |     padding: 10px;
1375 | }
1376 | 
1377 | .border-style-ilst li:nth-child(1){
1378 |     border: 2px solid brown;
1379 | }
1380 | 
1381 | .border-style-ilst li:nth-child(2){
1382 |     border: 2px dashed brown;
1383 | }
1384 | 
1385 | .border-style-ilst li:nth-child(3){
1386 |     border: 2px dotted brown;
1387 | }
1388 | 
1389 | .border-style-ilst li:nth-child(4){
1390 |     border: 5px double brown;
1391 | 
1392 |     /* border-color: brown;
1393 |     border-style: double; */
1394 | }
1395 | 
1396 | .border-style-ilst li:nth-child(5){
1397 |     /* border-style: ridge; */
1398 |     border: 5px ridge brown;
1399 | }
1400 | 
1401 | .border-style-ilst li:nth-child(6){
1402 |     /* border-style: groove; */
1403 |     border: 5px groove brown;
1404 | }
1405 | 
1406 | .border-style-ilst li:nth-child(7){
1407 |     border-color: brown;
1408 |     border-style: solid dashed double dotted ;
1409 | }
1410 | 
1411 | .border-style-ilst li:nth-child(8){
1412 |     border:2px solid brown;
1413 |     border-radius: 15px;
1414 | }
1415 | 
1416 | .border-style-ilst li:nth-child(9){
1417 |     padding: 20px;
1418 |     border:2px solid brown;
1419 |     border-radius: 100px 0px;
1420 |     background-color: bisque;
1421 | }
1422 | 
1423 | .colors-channel-logo, .colors-channel-logo div {
1424 |     width: 100px;
1425 |     height:100px;
1426 |     border-radius: 100% 0%;
1427 |     position: relative;
1428 | }
1429 | 
1430 | .colors-channel-logo {
1431 |     background-color: #7d2792;
1432 | }
1433 | 
1434 | .colors-channel-logo div {
1435 |     width: 80px;
1436 |     height:80px;
1437 |     background-color: #ea008a;
1438 |     top: 20px;
1439 | }
1440 | 
1441 | .colors-channel-logo div  div{
1442 |     width: 60px;
1443 |     height:60px;
1444 |     background-color: #f98900;
1445 | }
1446 | ```
1447 | 
1448 | ```html
1449 | <ul class="border-style-ilst">
1450 |     <li>border: solid</li>
1451 |     <li>border: dashed</li>
1452 |     <li>border: dotted</li>
1453 |     <li>border: double</li>
1454 |     <li>border: ridge</li>
1455 |     <li>border: groove</li>
1456 |     <li>border: border-style:multiple type border</li>
1457 |     <li>border: border-radius: rounded corner</li>
1458 |     <li>border: border-radius: rounded corner: design</li>
1459 | </ul>
1460 | 
1461 | <h3>Colors channel logo created with border-radius</h3>
1462 | <div class="colors-channel-logo">
1463 |     <div>
1464 |         <div></div>
1465 |     </div>
1466 | </div> 
1467 | <br />
1468 | ```
1469 | 
1470 | ### 5.10. Element Positioning
1471 | - Positioning allows to take an element on the page and `control where and how it can be positioned`
1472 | - The CSS `position property` is used to `set position` for an element
1473 | - It is also used to place an element `behind another` and is also useful for `scripted animation effect`
1474 | 
1475 | #### CSS positioning schemes
1476 | - Normal Flow
1477 | - Element Floating
1478 | - Absolute Positioning
1479 | 
1480 | - **Normal Flow**
1481 |     - The default layout method of CSS and Browser
1482 |     - Elements defined in HTML page stacks and show the layout/Document Flow in the browser (`static` is default positioning)
1483 |     - `position` property is used to position elements manually
1484 | 
1485 | > **Syntax & Example**: 
1486 | ```css
1487 | div {
1488 |     position: static | relative | absolute | fixed | inherit
1489 | }
1490 | ```
1491 | 
1492 | #### Relative Positioning 
1493 | - Elements are still considered as part of normal document flow, but one can offset the elements from their normal position using top, right, bottom, or left offset values
1494 | - Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)
1495 | - Relative Positioning helps to nudge or re-position an element from its `current position/location`
1496 | 
1497 | > **Syntax & Example**: 
1498 | ```html
1499 | <!-- internal style -->
1500 | <style>
1501 |     /* css selector: { property:value; } */
1502 |     body {
1503 |         margin: 0px;
1504 |         padding: 0px;
1505 |     }
1506 | 
1507 |     .container {
1508 |         background-color: burlywood;
1509 |         width: 80%;
1510 |         padding: 20px;
1511 |         border:5px solid #c5760f;
1512 |         margin: 20px auto;
1513 |     }
1514 | 
1515 |     .relative-pos-box {
1516 |         color: #fff;
1517 |         background: #00c4cc;
1518 |         padding: 10px;
1519 |         width: 80%;
1520 |         
1521 |         position: relative;
1522 |         left: 150px;
1523 |     }
1524 | 
1525 | </style>
1526 | 
1527 | 
1528 | <body>
1529 |     
1530 |     <div class="container">
1531 | 
1532 |         <div class="sub-container">
1533 | 
1534 |             <div class="relative-pos-box">
1535 |                 <h2>Relative Positioning </h2>
1536 |                 
1537 |                 <ol>
1538 |                     <li>Elements are still considered as part of normal document flow, but one can offset the elements from its normal position using top, right, bottom, or left offset values</li>
1539 |                     <li>Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)</li>
1540 |                     <li>Relative Positioning helps to nudge or re-position an element from its `current position/location`</li>
1541 |                 </ol>
1542 |             </div>
1543 | 
1544 |         </div>
1545 | 
1546 |     </div>
1547 | 
1548 | </body>
1549 | ```
1550 | 
1551 | - **Element Floating**
1552 |     - Floating simply denotes an element `shifted/placed on the left or right side`
1553 | 
1554 | - **Absolute Positioning**
1555 |     - Absolute Positioning is `not considered as a part of Normal Document flow`
1556 |     - Absolute Positioning removes the document from Normal Document flow and repositioned based on top, right, bottom, or left offset values
1557 |     - Other elements in flow move up and take empty space made by an absolute positioned element
1558 |     - Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport
1559 | 
1560 | > **Syntax & Example**: 
1561 | ```html
1562 | <!-- internal style -->
1563 | <style>
1564 |     /* css selector: { property:value; } */
1565 |     body {
1566 |         margin: 0px;
1567 |         padding: 0px;
1568 |     }
1569 | 
1570 |     .container {
1571 |         background-color: burlywood;
1572 |         width: 80%;
1573 |         padding: 20px;
1574 |         border:5px solid #c5760f;
1575 |         margin: 20px auto;
1576 |     }
1577 | 
1578 |     .absolute-pos-box {
1579 |         color: #fff;
1580 |         background: #00c4cc;
1581 |         padding: 10px;
1582 |         width: 50%;
1583 |         
1584 |         position: absolute;
1585 |         left: 0px;
1586 |         top: 0px;
1587 |     }
1588 | </style>
1589 | 
1590 | 
1591 | <body>
1592 |     
1593 |     <div class="container">
1594 | 
1595 |       <div class="sub-container">
1596 | 
1597 |         <div class="absolute-pos-box">
1598 |             <h2>Absolute Positioning </h2>
1599 | 
1600 |             <ol>
1601 |                 <li>Absolute Positioning is `not considered as a part of Normal Document flow`</li>
1602 |                 <li>Absolute Positioning removes the document from Normal Document flow and respositioned based on top, right, bottom, or left offset values</li>
1603 |                 <li>Other elements in flow moves up and takes empty space made by an absolute positioned element</li>
1604 |                 <li>Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport</li>
1605 |             </ol>
1606 |         </div>
1607 | 
1608 |       </div>
1609 | 
1610 |     </div>
1611 |     
1612 | </body>
1613 | ```
1614 | 
1615 | #### Fixed Positioning 
1616 | - The fixed positioning property helps to put the text fixed on the browser
1617 | - Fixed Positioned elements are considered to be an Absolute Positioned elements themselves but it always positioned relative to the `active viewport`
1618 | - As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesn't affect it
1619 | - Fixed positioning is a subcategory of absolute positioning (the difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)
1620 | 
1621 | > **Syntax & Example**: 
1622 | ```html
1623 | <!-- internal style -->
1624 | <style>
1625 |     /* css selector: { property:value; } */
1626 |     body {
1627 |         margin: 0px;
1628 |         padding: 0px;
1629 |     }
1630 | 
1631 |     .container {
1632 |         background-color: burlywood;
1633 |         width: 80%;
1634 |         padding: 20px;
1635 |         border:5px solid #c5760f;
1636 |         margin: 20px auto;
1637 | 
1638 |         position: relative;
1639 |     }
1640 | 
1641 |     .fixed-pos-box {
1642 |         color: #fff;
1643 |         background: #00c4cc;
1644 |         padding: 10px;
1645 |         width: 50%;
1646 |         
1647 |         position: fixed;
1648 |         right: 95px;
1649 |     }
1650 | 
1651 | </style>
1652 | 
1653 | 
1654 | <body>
1655 |     
1656 |     <div class="container">
1657 | 
1658 |       <div class="sub-container">
1659 | 
1660 |         <h2 class="fixed-pos-box">Fixed Positioning 1 : </h2>
1661 |           
1662 |       </div>
1663 | 
1664 |     </div>
1665 |     
1666 | </body>
1667 | ```
1668 | 
1669 | ### 5.11. Floats
1670 | - Floating simply denotes an element shifted/placed on the left or right side
1671 | - Floating is one of the widely used CSS layout techniques
1672 | - Floats are used to create: Layout Design, Horizontal Menu/Navigation, Columnar/Column Layouts
1673 | - The CSS float property is a `positioning property`
1674 | - The `float` property is used for positioning and formatting content e.g. let box/an image float left or right side of a container
1675 | - `clear: both` property is used to stop the floats of an element and start the normal document flow
1676 | 
1677 | ### How Float works
1678 | - Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down
1679 | - A floated element may be moved as far to the left or the right as possible. it simply means that a floated element can display at the extreme left or extreme right
1680 | - The elements before the floating element will not be affected. The elements after the floating element will flow around it
1681 | - If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right
1682 | 
1683 | > **Note**: A floated element is taken `out of the normal flow and shifted to the left or right` as far as possible in the space available of the containing element. Other elements normally flow around the floated items, unless they are prevented from doing so by their `clear` property. 
1684 | 
1685 | > **Syntax & Example**: 
1686 | ```css
1687 | div {
1688 |     float: left | righ | none | inherit
1689 | }
1690 | 
1691 | div {
1692 |     clear: both;
1693 | }
1694 | ```
1695 | 
1696 | ```html
1697 | <!-- internal style -->
1698 | <style>
1699 |     /* css selector: { property:value; } */
1700 |     body {
1701 |         margin: 0px;
1702 |         padding: 0px;
1703 |     }
1704 | 
1705 |     .container {
1706 |         background-color: burlywood;
1707 |         width: 80%;
1708 |         padding: 20px;
1709 |         border:5px solid #c5760f;
1710 |         margin: 20px auto;
1711 |     }
1712 | 
1713 |     .float-left-div {
1714 |         border: 1px solid brown;
1715 |         padding: 20px;
1716 |         margin: 10px;
1717 |         width: 25%;
1718 |         float: left;
1719 |     }
1720 | 
1721 |     .float-right-div {
1722 |         border: 1px solid brown;
1723 |         padding: 20px;
1724 |         margin: 10px;
1725 |         width: 25%;
1726 |         float: right;
1727 |     }
1728 | 
1729 |     .float-clear-div {
1730 |         border: 1px solid brown;
1731 |         padding: 20px;
1732 |         margin: 10px;
1733 |         clear:both;
1734 |     }
1735 | </style>
1736 | 
1737 | 
1738 | <div class="float-left-div">@ left - float: left;</div>
1739 | <div class="float-right-div">@ right - float: right;</div>
1740 | <div class="float-clear-div">@ normal float - clear:both</div> 
1741 | ```
1742 | 
1743 | ### 5.12. Basic Layout Concepts
1744 | - Create different `content regions` with DIVs or New HTML5 Semantics Tags and then do `region styling` as per layout requirements.
1745 | There are different ways to create multicolumn layouts. Each way/layout technique has its pros and cons:
1746 | 1. **HTML Layout using Tables `(not recommended)`**
1747 | 	- Use Table, TR, TD tag to create a whole layout
1748 | 	- Table-based layouts are not at all flexible and difficult to manage and modify
1749 | 2. **Layouts using Div and Span `(CSS float property)`**
1750 | 	- You can use `Div - the block level element` to create a complete web layout with CSS `float` property  
1751 | 	- It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
1752 | 	- Floating elements are tied to the document flow, which may harm the flexibility, and sometimes it's difficult to manage the whole layout
1753 | 3. **HTML5 Semantic Tags based Layout`(CSS float property)`**
1754 | 	- You can use HTML5 semantic tags like main, header, nav, section, article, aside, footer, etc. to create a fully functional web layout
1755 | 	- It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
1756 | 4. **CSS flexbox Layout**
1757 | 	- Flexbox is a new layout mode in CSS3
1758 | 5. **CSS framework**
1759 | 	- Create layout faster and quicker by using a framework like Bootstrap,W3.CSS or so
1760 | 6. **CSS grid Layout**
1761 | 	- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
1762 | 	- The CSS grid layout is a new layout model optimized for two-dimensional layouts. 
1763 | 	- It's ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.
1764 | 
1765 | #### 1. Creating Table-based Layout `(not recommended)`
1766 | - The purpose of the `<table>` element is to display tabular data
1767 | - The simplest and most popular way of creating layouts is using HTML `<table>` tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
1768 | - The `<table>` element was not designed to be a layout tool! Before the introduction to Div tag, web designers/developers use to follow table-based layout
1769 | > **Note**: Do not use tables for your page layout! They will make code length, tedious and brings a mess into your code
1770 | 
1771 | > **Syntax & Example (CSS Table base layout)**: 
1772 | ```
1773 | 
1774 | Please Check example/demo: 05.12.1a.html.table.layout & 05.12.1b.css.table.layout
1775 | 
1776 | ```
1777 | 
1778 | #### 2. Layouts using Div and Span `(CSS float property)`
1779 | 
1780 | > **Syntax & Example (CSS Div base layout)**: 
1781 | ```
1782 | 
1783 | Please Check example/demo: 05.12.2.css.div.layout
1784 | 
1785 | ```
1786 | 
1787 | #### 3. HTML5 Semantic Tags based Layout`(CSS float property)`
1788 | 
1789 | > **Syntax & Example (HTML5 Sementic tag based layout)**: 
1790 | ```
1791 | 
1792 | Please Check example/demo: 05.12.3.semantic.tag.layout
1793 | 
1794 | ```
1795 | 
1796 | ### 5.13. Media Types and Media Queries
1797 | - One of the great benefits of using HTML5 & CSS3 to separate structure and presentation is also the ability to present the same content in a different way on multiple devices
1798 | - CSS3 allows targeting multiple devices by using `media types & media queries`
1799 | - **Media Types**: Allows us to control/serve a different set of styles to multiple devices based on device type
1800 | - The same content can be viewed with different styles/layouts on different media devices (screen, printer, screen readers) 
1801 | 
1802 | > **Syntax & Example**: 
1803 | ```css
1804 | 1. @media screen {
1805 |     /* different styles for screen *\
1806 |     property: value;
1807 | }
1808 | 
1809 | /*2. @import syntax*/
1810 | @import url("style.css") screen;
1811 | ```
1812 | 
1813 | ```html
1814 | 3. link element syntax
1815 | <link rel="stylesheet" type="text/css" href="style.css" media="screen, projection">
1816 | ```
1817 | 
1818 | #### Media Type Benefits
1819 | - A powerful way to control the look and functionality of sites across multiple devices
1820 | - **Different Media Types**: all, print, projection, screen, speech (screen readers), tv
1821 | 
1822 | #### Media Queries
1823 | - Media queries allow combining media types with media property expressions, to further when styles are applied based on color, screen width, and other many factors
1824 | - **Different Media features**: width, height, (min-width, max-width)
1825 | 
1826 | ### 5.14. CSS3
1827 | - CSS3 is brand, the latest specification/module of CSS which consists of many latest and upgraded features/functionalities/powerful tools+options
1828 | - **CSS3 feature**: 
1829 |     - border-radius, border-image, multiple backgrounds images 
1830 |     - colors: rgba & hsla (alpha color values)
1831 |     - Text formatting: text-shadow, multiple columns, @font-face
1832 |     - New Selectors: many pseudo selectors like nth:
1833 |     - box-shadow
1834 |     - gradients
1835 |     - transforms
1836 |     - transitions
1837 |     - animations
1838 | 
1839 | ### 5.15. CSS Vendor Prefixes (CSS Browser Prefixes)
1840 | - Vendor Prefixes allows browsers manufacturers to add support for `proprietary features which are still in development`
1841 | - Browser manufacturers have used browser-specific `prefixes for experimental APIs`
1842 | - Vendor Prefixes allows the designer/developer an opportunity to use experimental/evolving features-properties
1843 | - CSS vendor prefixes/CSS browser prefixes are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers
1844 | 
1845 | > **Note**: CSS vendor prefixes/CSS browser prefixes are used only for the latest CSS3 properties which are not fully developed/supported by all browser
1846 | 
1847 | #### Common Vendor Prefixes
1848 | | Prefix        | Browser                                               |
1849 | | ------------- |-------------------------------------------------------|
1850 | | -webkit       | Webkit (Google Chrome, Safari)                        |
1851 | | -moz-         | Mozilla (Mozilla Firefox)                             |
1852 | | -ms-          | Microsoft (Internet EXplorer)                         |
1853 | | -o-           | Opera                                                 |
1854 | | -khtml-       | Konqueror                                             |
1855 | 
1856 | > **Syntax & Example**: 
1857 | ```css
1858 | <!-- internal style -->
1859 | <style>
1860 |     /* css selector: { property:value; } */
1861 |     .heading-text {
1862 |         padding: 10px;
1863 |         border: 2px solid #c5760f;
1864 | 
1865 |         -webkit-border-radius: 20px;
1866 |         -moz-border-radius: 20px;
1867 |         -ms-border-radius: 20px;
1868 |         -o-border-radius: 20px;
1869 | 
1870 |         border-radius: 20px;
1871 |     }
1872 | 
1873 |     .sub-heading-text {
1874 |         -webkit-text-shadow: 5px 5px 2px #c5760f;
1875 |         -moz-text-shadow: 5px 5px 2px #c5760f;
1876 |         -ms-text-shadow: 5px 5px 2px #c5760f;
1877 |         -o-text-shadow: 5px 5px 2px #c5760f;
1878 | 
1879 |         text-shadow: 5px 5px 2px #c5760f;
1880 |     }
1881 | </style>
1882 | ```
1883 | 
1884 | ```html
1885 | <body>
1886 |     <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
1887 | 
1888 |     <h2 class="sub-heading-text" id="subHeadingText">5.15. CSS Vendor Prefixes (CSS Browser Prefixes)</h2>
1889 | </body>
1890 | ```
1891 | 
1892 | ### 5.16. CSS Reset
1893 | - CSS Reset is a set of styles that `nullify a browsers default style` sheet
1894 | - CSS Reset a collection of styles allows designers to avoid conflicts between their styles and browser default styles
1895 | - Every browser has its own default `user agent stylesheet`, that it uses to make unstyled websites appear more beautiful/legible. (By default apply variable font-sizes to H1 to H6, a certain amount of padding to almost every element, make links blue and visited links purple, give tables a certain amount of border and padding)
1896 | - Using a CSS Reset, we can force every browser to have all its styles reset to null, thus `avoiding cross-browser differences` as much as possible
1897 | - The goal of a reset style is to `reduce browser inconsistencies` in things like default line heights, margins and font sizes of headings, etc.
1898 | 
1899 | - **Common CSS Reset Properties**:
1900 |     - margin
1901 |     - adding
1902 |     - borders
1903 |     - font-size
1904 |     - line-height
1905 | 
1906 | > **Syntax & Example**: 
1907 | ```css
1908 | /* css reset styles goes here */
1909 | body, h1, h2, h3, h4, h5, h6, p, input,li {
1910 |     margin:0px;
1911 |     padding:0px;
1912 | }   
1913 | ```
1914 | 
1915 | > **Reference websites**: https://meyerweb.com/eric/tools/css/reset/, https://cssreset.com/
1916 | 
1917 | Section 6. CSS resources
1918 | =====================
1919 | 
1920 | ### 6.1. CSS Frameworks and grids
1921 | - **CSS Frameworks**
1922 |     - CSS Frameworks are pre-existing/pre-prepared libraries/files which provide a templating tools/systems for site layout and design
1923 |     
1924 |     - **Common CSS Frameworks contents**
1925 |         - CSS reset for browser default styling
1926 |         - Baseline rules for common elements
1927 |         - Basic element styling
1928 |         - Basic structural rules/styling
1929 |         - Rules to overcome Browser inconsistencies
1930 |         - Form & Table styling, Typography, CSS Grid
1931 | 
1932 | #### CSS Grids
1933 | - CSS Grids allows to `quickly build multi-column layouts
1934 | - CSS Grids mainly designed to make `building multi-column layouts easier`
1935 | - Grids can be based on fixed, sizes, fluid layouts, or aspect ratios
1936 | - Consists of pre-build/readymade classes to define columns width and create layout easily
1937 | - CSS Grids are part of bigger CSS Frameworks or may be available alone as a grid library
1938 | 
1939 | #### CSS Frameworks - Advantages
1940 | - CSS Frameworks can save lots of time and work while designing large sites/apps
1941 | - CSS Frameworks usually assist with creating cross-browser compliant code
1942 | - Inbuilt CSS Grids speed up layout design/development
1943 | - CSS Frameworks creates a standard, consistent code-base, design layouts for team
1944 | 
1945 | #### CSS Frameworks - Disadvantages
1946 | - Many features/all utilities of CSS frameworks are not used in most of the sites
1947 | - Some frameworks consist of multiple files which designer/developer needs to include/import
1948 | - CSS Frameworks heavily depends on non-semantic classes
1949 | - Sometimes it is very tedious and difficult to update or debug the frameworks
1950 | - Adding custom functionality can be time-consuming and difficult
1951 | - Designer/Developer need to spend/invest time mastering framework
1952 | 
1953 | ### 6.2. Popular CSS Frameworks
1954 | - Twitter Bootstrap: https://getbootstrap.com/
1955 | - Foundation Zurb: https://foundation.zurb.com/
1956 | - Materialize CSS: https://materializecss.com/
1957 | - Semantic UI: https://semantic-ui.com/
1958 | - Material UI: https://v0.material-ui.com/#/
1959 | - UI Kit: https://getuikit.com/
1960 | 
1961 | ### 6.3. CSS Pre-Processors
1962 | - CSS Pre-Processors are programms/utilities `extends basic CSS features with programming abilities`
1963 | - Helps to use static CSS as a `programming language`
1964 | - Adds programming features like `variables, functions, mathematical operations, nesting etc into CSS`
1965 | - Allows to write `Semantic, Scalable, Moduler CSS with variables / mixins`
1966 | > **Example**: Pre-Processors syntax or files like .SASS, .SCSS, .LESS, .STYL -> Processed and converted to -> .CSS
1967 | 
1968 | - **Popular CSS Pre-Processors**
1969 |     - Sass: https://sass-lang.com/
1970 |     - Less: http://lesscss.org
1971 |     - Stylus: http://stylus-lang.com/
1972 | 
1973 | ### 6.4 CSS Editors / CSS Authoring Tools
1974 | Editors range from basic text editors to full-featured web suites
1975 | 
1976 | - **Basic Editors**
1977 |     - NotePad++ https://notepad-plus-plus.org/
1978 |     - textmate https://macromates.com/
1979 |     - bbedit https://www.barebones.com/products/bbedit/
1980 |     - SublimeText https://www.sublimetext.com/
1981 |     - Atom https://atom.io/
1982 |     - Adobe Bracket brackets.io/
1983 | 
1984 | - **IDE (Integrated Development Enviroment)**
1985 |     - ADOBE DREAMWEAVER CC https://www.adobe.com/products/dreamweaver.html
1986 |     - Aptana Studio 3 www.aptana.com/
1987 |     - Microsoft Visual Studio Community https://code.visualstudio.com/
1988 |     - Komodo Edit https://www.activestate.com/products/komodo-edit/
1989 | 
1990 | ### 6.5 CSS Tools
1991 | - **CSS Default Browser styles**
1992 |     - [Default Styles for Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) , https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css
1993 |     - [Default Styles for Internet Explorer](http://web.archive.org/web/20170122223926/http://www.iecss.com/)
1994 |     - [Default Styles for Chrome / Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
1995 |     - [Default Styles for Opera](http://web.archive.org/web/20161031005401/http://www.iecss.com/opera-10.51.css)
1996 |     - [w3.org](http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm)
1997 |     - [Default Styles for HTML4 (W3C spec)](https://www.w3.org/TR/CSS2/sample.html)
1998 |     - [Default Styles for HTML5 (W3C spec)](https://www.w3.org/TR/html5/rendering.html)
1999 | 
2000 | - **CSS3 Style Generators**: There are many online websites/tools which generate CSS3 code in quick time
2001 |     - http://css3generator.com/
2002 |     - https://www.css3maker.com/
2003 |     - http://css3please.com/
2004 |     - https://html-css-js.com/css/generator/
2005 |     - http://www.colorzilla.com/gradient-editor/
2006 | 
2007 | - **CSS validators**
2008 |     - https://jigsaw.w3.org/css-validator/
2009 |     - http://csslint.net/
2010 | 
2011 | - **PX to EM convertor**
2012 |     - http://pxtoem.com/
2013 |     - https://www.w3schools.com/tags/ref_pxtoemconversion.asp   
2014 | 
2015 | Section 7. What's the next step?
2016 | =====================
2017 | 
2018 | Outstanding work! Thank You for looking into CSS3 Fundamentals. I hope you enjoyed and learned a lot out of it. I think Now you have better understandings of how CSS works and functions. To learn more about CSS specifications visit [All CSS specifications](https://www.w3.org/Style/CSS/specs.en.html). Your next step could be Mastering CSS3 Advanced features or look into [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials), jump deeper with HTML5 Advanced topics or start with [JavaScript for beginners](https://github.com/dinanathsj29/javascript-beginners). Best of Luck! Happy Learning! 
2019 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/2. Introducing CSS/02.01.css.intro.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>02.01.css.intro.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body{
15 |         background-color: #FFC0E5;
16 |         font-family: Arial, Helvetica, sans-serif;
17 |         line-height: 30px;
18 |       }
19 |     </style>
20 |     
21 |   </head>
22 | 
23 |   <body>
24 | 
25 |     <h1>02.01.css.intro.html</h1>
26 | 
27 |     <!-- inline style -->
28 |     <h1 style="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-decoration: underline;"></h1>>Getting Started with CSS</h1>
29 | 
30 |     <p>In this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML. <br /> <br />
31 |     If you're just starting out in the world of web development, start learning from here <br /><br />
32 |     Well, let's get started with the most popular style sheet language.</p>
33 | 
34 |   </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.01.default.browser.styles.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.01.default.browser.styles.html</title>
10 |     
11 |   </head>
12 | 
13 |   <body>
14 |     
15 |     <h1>03.01.default.browser.styles.html</h1>
16 | 
17 |     <ul>
18 |       <li><strong>Note: Check the page source or Inspect page with Debugger utilities like: `FireBug, Inspect/ Inspect Element` (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML/CSS code/tags/properties).</strong></li>
19 |     </ul>
20 | 
21 |     <p>When Designer/Developer writes CSS to show custom look it overwrites browser default styles and apply `custom styles` <br /> <br />
22 |     - Many HTML elements come with browser specific some default CSS properties which can sometimes result in unknown/unwanted behaviour</p>
23 | 
24 |   </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.02.syntax.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.02.syntax.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body{
15 |         background-color: #FFC0E5;
16 |         font-family: Arial, Helvetica, sans-serif;
17 |         line-height: 30px;
18 |       }
19 | 
20 |       p { 
21 |         color: #0000ff; 
22 |         font-size: 20px;
23 |       } 
24 |     </style>
25 |     
26 |   </head>
27 | 
28 |   <body>
29 | 
30 |     <h1>03.02.syntax.html</h1>
31 | 
32 |     <ul>
33 |       <li>A CSS rule consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document.</li>
34 |     </ul>
35 | 
36 |     <img src="../assets/images/css-selector.png" alt="css-selector.png" title="css-selectors" />
37 | 
38 |     <p>Selectors are used to declare which of the markup elements a style applies to. <br /> <br />
39 |     The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute.
40 |     </p>
41 |     
42 |   </body>
43 | 
44 | </html>
45 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.04.selector.element.tag.type.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.04.selector.element.tag.type.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       h1 { 
15 |         background-color: #9999ff; 
16 |         text-transform: uppercase;
17 |       } 
18 | 
19 |       li {
20 |         line-height: 30px;
21 |         letter-spacing: 3px;
22 |       }
23 | 
24 |       p {
25 |         border: 2px dashed #9999ff;
26 |       }
27 |     </style>
28 |     
29 |   </head>
30 | 
31 |   <body>
32 | 
33 |     <h1>3.3. Basic Selector types</h1>
34 | 
35 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
36 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
37 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
38 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
39 |     
40 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
41 |     - CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more.
42 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
43 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
44 |     </p>
45 | 
46 |     <h1>03.04.selector.element.tag.type.html</h1>
47 |     
48 |     <ul>
49 |       <li>The element selector target/find/selects the HTML element/tag by name</li>
50 |       <li>Global selectors based on any HTML element/tag name</li>
51 |       <li>This is the simplest way to target all elements of a given element/tag/type</li>
52 |     </ul>
53 | 
54 |     <p>The element selector target/find/selects the HTML element/tag by name. Global selectors based on any HTML element/tag name. This is the simplest way to target all elements of a given element/tag/type.
55 |     </p>
56 | 
57 |   </body>
58 | 
59 | </html>
60 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.05.selector.class.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.05.selector.class.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       .headingsLarge { 
15 |         border: 2px dotted red;
16 |         text-transform: uppercase;
17 |         text-decoration: underline;
18 |         padding: 10px;
19 |       }
20 |       
21 |       .highlightRed{
22 |         background-color: #ffd1d1;
23 |         margin: 30px;
24 |       }
25 | 
26 |       .highlightGreen{
27 |         background-color: #d1ffd1;
28 |       }
29 |     </style>
30 |     
31 |   </head>
32 | 
33 |   <body>
34 | 
35 |     <h1 class="headingsLarge">3.3. Basic Selector types</h1>
36 | 
37 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
38 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
39 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
40 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
41 |     
42 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
43 |     - CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more.
44 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
45 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
46 |     </p>
47 | 
48 |     <h1 class="headingsLarge">3.5. Class Selector</h1>
49 |     
50 |     <ul>
51 |       <li class="highlightRed">The class selector selects HTML elements with a specific class attribute </li>
52 |       <li class="highlightGreen">It is used with a period character . (full stop symbol) followed by the class name</li>
53 |       <li class="highlightRed">Attribute selector based on `class attributes` applied to HTML element/tag</li>
54 |       <li class="highlightGreen">Generic set of rules applied to similar looking item</li>
55 |       <li class="highlightRed">.class is very important attribute while dealing with HTML+CSS as similar looking/output based things on web page usually belongs to one class</li>
56 |     </ul>
57 | 
58 |     <p>The class selector selects HTML elements with a specific class attribute . It is used with a period character . (full stop symbol) followed by the class name. Attribute selector based on `class attributes` applied to HTML element/tag.
59 |     </p>
60 | 
61 |   </body>
62 | 
63 | </html>
64 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.06.selector.id.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.06.selector.id.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       .headingMain { 
15 |         border: 2px dotted red;
16 |         text-transform: uppercase;
17 |         text-decoration: underline;
18 |         padding: 10px;
19 |         font-family:Arial;
20 |         font-style: italic;
21 |         letter-spacing: 6px;
22 |         text-align: center;
23 |       }
24 |     </style>
25 |     
26 |   </head>
27 | 
28 |   <body>
29 | 
30 |     <h1>3.3. Basic Selector types</h1>
31 | 
32 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
33 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
34 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
35 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
36 |     
37 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
38 |     - CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more.
39 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
40 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
41 |     </p>
42 | 
43 |     <h1 class="headingMain">3.6. ID Selector</h1>
44 |     
45 |     <ul>
46 |       <li>The id selector selects the id attribute of an HTML element to select a specific element</li>
47 |       <li>It is used with a hash/pound character # followed by the id name</li>
48 |       <li>Attribute selector based on specific id attributes applied to HTML element/tag</li>
49 |       <li>An `id` is always `single/unique` within the page so it is chosen to select a single, unique element in web page</li>
50 |       <li>#id is very important attribute while dealing with HTML+CSS to make and target single unique thing</li>
51 |     </ul>
52 | 
53 |     <p>The id selector selects the id attribute of an HTML element to select a specific element. It is used with a hash/pound character # followed by the id name. Attribute selector based on specific id attributes applied to HTML element/tag.
54 |     </p>
55 | 
56 |   </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.07.selector.universal.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.07.selector.universal.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       * { 
15 |         color: purple;
16 |         letter-spacing: 3px;
17 |         line-height: 36px;
18 |         word-spacing: 5px;
19 |         text-transform: capitalize;
20 |       } 
21 |      
22 |     </style>
23 |     
24 |   </head>
25 | 
26 |   <body>
27 | 
28 |     <h1>3.3. Basic Selector types</h1>
29 | 
30 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
31 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
32 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
33 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
34 |     
35 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
36 |     - CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more.
37 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
38 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
39 |     </p>
40 | 
41 |     <h1>3.7. Universal Selector</h1>
42 |     
43 |     <ul>
44 |       <li>The universal selector selects all the elements on the page </li>
45 |       <li>Rather selecting elements of a specific type, the universal selector simply matches the name of any element type</li>
46 |       <li>The universal selector is used as a wildcard * character</li>
47 |     </ul>
48 | 
49 |     <p>The universal selector selects all the elements on the page . Rather selecting elements of a specific type, the universal selector simply matches the name of any element type. The universal selector is used as a wildcard * character.
50 |     </p>
51 | 
52 |   </body>
53 | 
54 | </html>
55 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.08.selector.group.grouping.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 |   <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>03.08.selector.group.grouping.html</title>
 10 | 
 11 |     <!-- internal style -->
 12 |     <style>
 13 |       /* css selector: { property:value; } */
 14 | 
 15 |       /*
 16 |       .headingsLarge { 
 17 |         color: purple;
 18 |         letter-spacing: 3px;
 19 |         line-height: 36px;
 20 |         word-spacing: 5px;
 21 |         text-transform: capitalize;
 22 |       }
 23 | 
 24 |       #headingMain{
 25 |         color: purple;
 26 |         letter-spacing: 3px;
 27 |         line-height: 36px;
 28 |         word-spacing: 5px;
 29 |         text-transform: capitalize;
 30 |       }
 31 |       
 32 |       .highlightRed{
 33 |         color: purple;
 34 |         letter-spacing: 3px;
 35 |         line-height: 36px;
 36 |         word-spacing: 5px;
 37 |         text-transform: capitalize;
 38 |       }
 39 | 
 40 |       .highlightGreen{
 41 |         color: purple;
 42 |         letter-spacing: 3px;
 43 |         line-height: 36px;
 44 |         word-spacing: 5px;
 45 |         text-transform: capitalize;
 46 |       }
 47 | 
 48 |       li {
 49 |         color: purple;
 50 |         letter-spacing: 3px;
 51 |         line-height: 36px;
 52 |         word-spacing: 5px;
 53 |         text-transform: capitalize;
 54 |       }
 55 |       */
 56 | 
 57 |       .headingsLarge, #headingMain, p, .highlightRed, li { 
 58 |         color: purple;
 59 |         letter-spacing: 3px;
 60 |         line-height: 36px;
 61 |         word-spacing: 5px;
 62 |         text-transform: capitalize;
 63 |         font-family: arial;
 64 |       }
 65 |     </style>
 66 |     
 67 |   </head>
 68 | 
 69 |   <body>
 70 | 
 71 |     <h1 class="headingsLarge">3.3. Basic Selector types</h1>
 72 | 
 73 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
 74 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
 75 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
 76 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
 77 |     
 78 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
 79 |     - CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more.
 80 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
 81 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
 82 |     </p>
 83 | 
 84 |     <h1 id="headingMain">3.8. group/grouping Selector</h1>
 85 |     
 86 |     <ul>
 87 |       <li class="highlightRed">Group/Grouping selector allows you to group different types of selectors together that share similar formattings </li>
 88 |       <li class="highlightGreen">Grouping selector is used to minimize the code, its efficient</li>
 89 |       <li class="highlightRed">It also prevents you from repeating the same style rules over and over again</li>
 90 |       <li class="highlightGreen">You can apply a style to many selectors, Just separate the selectors with a comma</li>
 91 |       <li class="highlightRed">Commas are used to separate each selector in grouping</li>
 92 |     </ul>
 93 | 
 94 |     <p>Group/Grouping selector allows you to group different types of selectors together that share similar formattings . Grouping selector is used to minimize the code, its efficient. It also prevents you from repeating the same style rules over and over again.
 95 |     </p>
 96 | 
 97 |   </body>
 98 | 
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.09.selector.conditional.descendent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.09.selector.conditional.descendent.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       ol .highlightRed{ 
15 |         color: purple;
16 |         letter-spacing: 3px;
17 |         line-height: 36px;
18 |         word-spacing: 5px;
19 |         text-transform: capitalize;
20 |         font-family: arial;
21 |         background-color:#66a7a7;
22 |       }
23 | 
24 |       span {
25 |         font-weight: bold;
26 |         color: purple;
27 |         font-size: 20px;
28 |       }
29 | 
30 |       p.introParagraph span {
31 |         color: red;
32 |         background-color:#66a7a7;
33 |         padding: 0px 10px;
34 |         
35 |       }
36 |     </style>
37 |     
38 |   </head>
39 | 
40 |   <body>
41 | 
42 |     <h1 class="headingsLarge">3.3. Basic Selector types</h1>
43 | 
44 |     <div>
45 |       <h1 class="headingsLarge">3.3. Basic Selector types</h1>
46 |     </div>
47 | 
48 |     <ol>
49 |       <li class="highlightRed">Selector allows us to tell the browser which element/tag on the page we want to style</li>
50 |       <li class="highlightGreen">CSS selectors are used to <span>"target/find/select"</span> HTML elements based on  element/tag name, id, class, attribute, and more</li>
51 |       <li class="highlightRed">Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
52 |       <li class="highlightGreen">Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
53 |     </ol>
54 | 
55 |     <p>Selector allows us to tell the browser which element/tag on the page we want to style.
56 |     - CSS selectors are used to <span>"target/find/select"</span> HTML elements based on  element/tag name, id, class, attribute, and more.
57 |     - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
58 |     - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
59 |     </p>
60 | 
61 |     <h1 id="headingMain">3.9. conditional descendent Selector</h1>
62 |     
63 |     <ul>
64 |       <li class="highlightRed">Highly specific selector that target elements based on their location within other elements </li>
65 |       <li class="highlightGreen">You can use this selector when you need to select an element that is the descendant/inside of another element</li>
66 |       <li class="highlightRed">You want to apply a style rule to a particular element only when it lies inside a particular element</li>
67 |       <li class="highlightGreen">White space is used to denote hierarchy of element (parent nested child)</li>
68 |     </ul>
69 | 
70 |     <p class="introParagraph">Highly <span>specific selector</span> that target elements based on their location within other elements . You can use this selector when you need to select an element that is the <span>descendant/inside</span> of another element. You want to apply a style rule to a particular element only when it lies <span>inside a particular element</span>.
71 |     </p>
72 | 
73 |   </body>
74 | 
75 | </html>
76 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.10.1.selector.pseudo.class.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 |   <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <title>03.10.1.selector.pseudo.class.html</title>
 10 | 
 11 |     <!-- internal style -->
 12 |     <style>
 13 |     /* css selector: { property:value; } */
 14 |       body {
 15 |         background-color: #67b1b1;
 16 |         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 17 |       }
 18 | 
 19 |       .links-container a {
 20 |         width: 10%;
 21 |         background-color:#999;
 22 |         padding: 5px;
 23 |         margin: 10px;
 24 |       }
 25 | 
 26 |       .horizontal-menu a {
 27 |         display: inline-block;
 28 |       }
 29 | 
 30 |       .vertical-menu a {
 31 |         display: block;
 32 |       }
 33 | 
 34 |       .links-container a:link {
 35 |         color: #000;
 36 |       }
 37 | 
 38 |       .links-container a:visited {
 39 |         color: #666;
 40 |       }
 41 | 
 42 |       .links-container a:hover {
 43 |         color: #fff;
 44 |         font-weight: bold;
 45 |         background-color: #008080;
 46 |         border-bottom: 2px solid;
 47 |       }
 48 | 
 49 |       .links-container a:active {
 50 |         color: #008080;
 51 |         background-color: #fff;
 52 |       }
 53 | 
 54 |       .link-active {
 55 |         text-decoration: none;
 56 |         color: #008080 !important;
 57 |         font-weight: bold;
 58 |         border-bottom: 5px solid;
 59 |         background-color: #fff !important;;
 60 |       }
 61 |     </style>
 62 |     
 63 |   </head>
 64 | 
 65 |   <body>
 66 |     <h1 class="headingsLarge">3.3. Basic Selector types</h1>
 67 | 
 68 |     <li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
 69 |     <li>CSS selectors are used to "target/find/select" HTML elements based on  element/tag name, id, class, attribute, and more</li>
 70 |     <li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
 71 |     <li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
 72 | 
 73 |     <h1 id="headingMain">3.10. pseudo class Selector</h1>
 74 |     
 75 |     <ul>
 76 |       <li>pseudo means `not actually but having the appearance of; pretended; false or spurious;`</li>
 77 |       <li>Pseudo class selectors are CSS selectors with a colon preceding them `:`</li>
 78 |       <li>A CSS pseudo-class is a keyword added to a selector that specifies a `special state` of the selected element(s) like `hover, active, focus, visited, link`</li>
 79 |       <li>Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree</li>
 80 |       <li>a pseudo-class is basically a special state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are `:link, :visited, :hover, :active`</li>
 81 |     </ul>
 82 |     
 83 |     <div class="links-container horizontal-menu">
 84 |       <a class="link-active" href="#">Home</a> 
 85 |       <a href="#">About</a>
 86 |       <a href="#">Products</a>
 87 |       <a href="#">Services</a>
 88 |       <a href="#">Contact</a>
 89 |     </div>
 90 | 
 91 |     <br /> <br />
 92 |     
 93 |     <div class="links-container vertical-menu">
 94 |       <a class="link-active" href="#">Home</a> 
 95 |       <a href="#">About</a>
 96 |       <a href="#">Products</a>
 97 |       <a href="#">Services</a>
 98 |       <a href="#">Contact</a>
 99 |     </div>
100 |       
101 |   </body>
102 | 
103 | </html>
104 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.11.1.external.stylesheets.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.11.1.external.stylesheets.html</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="../assets/styles/03.11.1.style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 | 
17 |     <h1>3.11. Authoring options / Where and How to add CSS</h1>
18 | 
19 |     <p>CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):</p>
20 | 
21 |     <ol>
22 |       <li>External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]</li>
23 |       <li>Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]</li>
24 |       <li>Inline stylesheet [Using the style attribute in any HTML start tag]</li>
25 |     </ol>
26 | 
27 |     <h2>1. External stylesheet (Separation of concern)</h2>
28 | 
29 |     <ul>
30 |       <li>We can put required css styles into one seperate .css file</li>
31 |       <li>External stylesheet is like a normal text file with `.css extension` containing styles for html markup</li>
32 |       <li>Most of the time we have to use external style sheet (.css file) to seperate Markup, Style, and Script from a web document </li>
33 |       <li>`link` tag is used under `head` section to embed/import/link external css file which can be used in various html pages</li>
34 |       <li>Advantage of external css file over internal(embedded)/inline css is that a `single css file can be used in multiple pages` of an application to get flexibility & consistency over styling (efficient)</li>
35 |       <li>An external style sheet `holds all the style rules` in a separate document that you can link from any HTML file on your site.</li>
36 |       <li>External style sheets are the `most flexible` because with an external style sheet, you can change the look of an entire website by changing just one file.</li>
37 |     </ul>
38 | 
39 |   </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.11.2.internal.stylesheets.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.11.2.internal.stylesheets.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body{
15 |         background-color: #d3d3ff;
16 |         font-family: Arial, Helvetica, sans-serif;
17 |         line-height: 30px;
18 |       }
19 | 
20 |       h1 {
21 |         font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
22 |         text-decoration: underline;
23 |         text-transform: uppercase;
24 |         letter-spacing: 5px;
25 |       }
26 |     </style>
27 |     
28 |   </head>
29 | 
30 |   <body>
31 | 
32 |     <h1>3.11. Authoring options / Where and How to add CSS</h1>
33 | 
34 |     <p>CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):</p>
35 | 
36 |     <ol>
37 |       <li>External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]</li>
38 |       <li>Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]</li>
39 |       <li>Inline stylesheet [Using the style attribute in any HTML start tag]</li>
40 |     </ol>
41 | 
42 |     <h2>2. Internal stylesheet (Embedded stylesheet)</h2>
43 | 
44 |     <ul>
45 |       <li>Internal (Embedded) CSS is used to apply CSS on a single/specific document or page</li>
46 |       <li>An Internal style sheet may be useful if one single page has a unique style</li>
47 |       <li>An Internal/Embedded style sheets only affect the document they are embedded in</li>
48 |       <li>`style` tag is used to write internal styles under `head` section (binds to current file only)</li>
49 |       <li>Used in small non-scalable apps (it isn't quite as efficient as external stylesheets)</li>
50 |     </ul>
51 |     
52 |   </body>
53 | 
54 | </html>
55 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.11.3.inline.stylesheets.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.11.3.inline.stylesheets.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       /*body{
15 |         background-color: #d3d3ff;
16 |         font-family: Arial, Helvetica, sans-serif;
17 |         line-height: 30px;
18 |       }
19 | 
20 |       h1 {
21 |         font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
22 |         text-decoration: underline;
23 |         text-transform: uppercase;
24 |         letter-spacing: 5px;
25 |       }*/
26 |     </style>
27 |     
28 |   </head>
29 | 
30 |   <!-- inline style -->
31 |   <body style="background-color: #d3d3ff;
32 |   font-family: Arial, Helvetica, sans-serif;
33 |   line-height: 30px;">
34 | 
35 |     <!-- inline style -->
36 |     <h1 style=" font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
37 |     text-decoration: underline;
38 |     text-transform: uppercase;
39 |     letter-spacing: 5px;">3.11. Authoring options / Where and How to add CSS</h1>
40 | 
41 |     <p>CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):</p>
42 | 
43 |     <ol>
44 |       <li>External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]</li>
45 |       <li>Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]</li>
46 |       <li>Inline stylesheet [Using the style attribute in any HTML start tag]</li>
47 |     </ol>
48 | 
49 |     <h2>3. Inline stylesheet</h2>
50 | 
51 |     <ul>
52 |       <li>We can write/apply style directly into an HTML element</li>
53 |       <li>Inline CSS is used to apply CSS on a single line or element </li>
54 |       <li>`style` attribute is used to write inline styles specific to an element `p style="color:blue;">Some Text /p`</li>
55 |       <li>`Please don't use this, unless you really have to! It is really a `bad practice and bad for maintenance` (you might have to update the same information multiple times per document)</li>
56 |       <li>Used in small non-scalable apps (kind of last moment patch/solution)</li>
57 |     </ul>
58 |     
59 |   </body>
60 | 
61 | </html>
62 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.12.4.1.cascade.important.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.12.4.1.cascade.important.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       .para-text {
15 |         background-color: gray;
16 |         border: none !important;
17 |       }
18 | 
19 |       p {
20 |         background-color: blue;
21 |         color: white;
22 |         padding: 5px;
23 |         border: 2px dashed black;
24 |       }
25 |     </style>
26 |     
27 |   </head>
28 | 
29 |   <body>
30 | 
31 |     <h1>3.12.4 The cascade dependency factors</h1>
32 | 
33 |     <p class="para-text">What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):</p>
34 | 
35 |     <ol>
36 |       <li>Importance / !important</li>
37 |       <li>Specificity</li>
38 |       <li>Inheritance (Source order)</li>
39 |     </ol>
40 | 
41 |     <h2>1. Importance / !important</h2>
42 | 
43 |     <ul>
44 |       <li>`!important` - One property/keyword to rule all!</li>
45 |       <li>In CSS, there is a special piece of syntax you can use to make sure that a certain declaration will always win over all others: `!important`</li>
46 |       <li>The `!important` rule is used for overriding the previously assigned CSS declarations OR to make current rule as a supereme rule </li>
47 |       <li>It is strongly recommend that you `never use !important`, unless you absolutely have to</li>
48 |     </ul>
49 |     
50 |   </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.12.4.2.cascade.specificity.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.12.4.2.cascade.specificity.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 | 
15 |       /* element - least specific - specificity point/score= 1 */
16 |       p{
17 |         background-color: gray;
18 |         color: #fff;
19 |         padding: 5px;
20 |       }
21 | 
22 |       /* class - little specific - specificity point/score= 10 */
23 |       .para-text {
24 |         color: #000;
25 |       }
26 | 
27 |       /* id - more specific - specificity point/score= 100 */
28 |       #mainParaText {
29 |         color:#00f;
30 |       }
31 | 
32 |       /* element + id - much more specific - specificity point/score= 101 */
33 |       p#mainParaText {
34 |         color:#0f0;
35 |       } 
36 | 
37 |       /* !important - the supereme rule*/
38 |       p {
39 |         color:#f00 !important;
40 |       } 
41 |     </style>
42 |     
43 |   </head>
44 | 
45 |   <body>
46 | 
47 |     <h1>3.12.4 The cascade dependency factors</h1>
48 | 
49 |     <p class="para-text" id="mainParaText" style="color:gold;">What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):</p>
50 | 
51 |     <ol>
52 |       <li>Importance / !important</li>
53 |       <li>Specificity</li>
54 |       <li>Inheritance (Source order)</li>
55 |     </ol>
56 | 
57 |     <h2>2 Specificity</h2>
58 | 
59 |     <ul>
60 |       <li>Specificity is basically a measure of how specific a selector/rule is</li>
61 |       <li>If more conflicting CSS rules comes to the same element, than the browser follows some rules to determine which one is most specific selector to apply and wins out</li>
62 |       <li>`ID selectors` have an even higher specificity than class selectors and lowest is element selectors</li>
63 |       <li>Note: The only way to win against an ID selector is to use `!important` or using `inline styles`. The only way to win against an `!important` is to include another !important declaration</li>
64 |     </ul>
65 |     
66 |   </body>
67 | 
68 | </html>
69 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/3. CSS Basics/03.12.4.3.cascade.inheritance.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>03.12.4.3.cascade.inheritance.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         font-family: verdana;
16 |         color: #2617da;
17 |         margin: 10px;
18 |         padding: 10px;
19 |         font-style: italic;
20 |       }
21 |     
22 |       p {
23 |         background-color: gray;
24 |         color: #fff;
25 |         padding: 5px;
26 |       }
27 | 
28 |       h1 {
29 |         color: #b50e0e;
30 |       }
31 |     </style>
32 |     
33 |   </head>
34 | 
35 |   <body>
36 | 
37 |     <h1>3.12.4 The cascade dependency factors</h1>
38 | 
39 |     <p class="para-text" id="mainParaText">What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):</p>
40 | 
41 |     <ol>
42 |       <li>Importance / !important</li>
43 |       <li>Specificity</li>
44 |       <li>Inheritance (Source order)</li>
45 |     </ol>
46 | 
47 |     <h2>3 Inheritance</h2>
48 | 
49 |     <ul>
50 |       <li>Inheritance simply means using some properties from parent/container elements to child</li>
51 |       <li>The inherit keyword specifies that a property should inherit its value from its parent element</li>
52 |       <li>Latest/last rules applied will win over earlier rules</li>
53 |       <li>Styles are cumulative; so the final rendering of elements depends not only on selectors directly target the element but also any properties that might be inherited from parent/top level elements</li>
54 |       <li>Note: All child elements in documents inherits properties from CSS rules applied to body/parent/container elements</li>
55 |     </ul>
56 |     
57 |   </body>
58 | 
59 | </html>
60 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.1.font.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.1.font.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       .heading-text, h2, h3 {
15 |         font-family: Arial, Helvetica, sans-serif;
16 |         font-size: 3em; /* base font size * 3 = (16 * 3) = 48*/
17 |         font-style: italic;
18 |         font-variant: small-caps;
19 |         font-weight: lighter;
20 |         color:#008080;
21 |       
22 |         -webkit-font-smoothing: antialiased;
23 |         -moz-font-smoothing: antialiased;
24 |         -o-font-smoothing: antialiased;
25 |         -ms-font-smoothing: antialiased;
26 |         /* font-smoothing: antialiased; */
27 |       }
28 |     </style>
29 |     
30 |   </head>
31 | 
32 |   <body>
33 | 
34 |     <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
35 | 
36 |     <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.</p>
37 | 
38 |     <h2>5.1. Working with fonts</h2>
39 | 
40 |     <ul>
41 |       <li>Controlling `typography-text-font` is one of the most important thing to do with CSS</li>
42 |       <li>CSS `Font` property is used to control the look of font-texts </li>
43 |       <li>By the use of CSS font property you can change the font type, font-text size, color, style, bold etc.</li>
44 |       <li>Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.</li>
45 |       <li>Example/font attributes-properties: font-family, font-size, color, font-style, font-weight, font-variant,</li>
46 |     </ul>
47 | 
48 |     <h2>CSS Font Choices</h2>
49 | 
50 |     <ol>
51 |       <li>System Fonts</li>
52 |       <li>Web Fonts</li>
53 |     </ol>
54 |     
55 |   </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.10.1.position.relative.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.10.1.position.relative.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .relative-pos-box {
28 |         color: #fff;
29 |         background: #00c4cc;
30 |         padding: 10px;
31 |         width: 80%;
32 |         
33 |         position: relative;
34 |         left: 150px;
35 |       }
36 |     </style>
37 |     
38 |   </head>
39 | 
40 |   <body>
41 |     
42 |     <div class="container">
43 | 
44 |       <div class="sub-container">
45 | 
46 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
47 | 
48 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
49 | 
50 |         <h2>05.10. Element Positioning</h2>
51 |         
52 |         <ul class="normalList">
53 |           <li>Positioning allows to take an element on the page and `control where and how it can be positioned`</li>
54 |           <li>The CSS `position property` is used to `set position` for an element</li>
55 |           <li>It is also used to place an element `behind another` and also useful for `scripted animation effect`</li>
56 |         </ul>
57 | 
58 |         <h2>CSS positioning schemes</h2>
59 |         
60 |         <ol>
61 |           <li>Normal Flow</li>
62 |           <li>Element Floating</li>
63 |           <li>Absolute Positioning</li>
64 |         </ol>
65 | 
66 |         <div class="relative-pos-box">
67 |           <h2>Relative Positioning </h2>
68 |           
69 |           <ol>
70 |             <li>Elements are still considered as part of normal document flow, but one can offset the elements from its normal position using top, right, bottom, or left offset values</li>
71 |             <li>Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)</li>
72 |             <li>Relative Positioning helps to nudge or re-position an element from its `current position/location`</li>
73 |           </ol>
74 |         </div>
75 | 
76 |       </div>
77 | 
78 |     </div>
79 |     
80 |   </body>
81 | 
82 | </html>
83 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.10.2.position.absolute.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.10.2.position.absolute.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .absolute-pos-box {
28 |         color: #fff;
29 |         background: #00c4cc;
30 |         padding: 10px;
31 |         width: 50%;
32 |         
33 |         position: absolute;
34 |         left: 0px;
35 |         top: 0px;
36 |       }
37 |     </style>
38 |     
39 |   </head>
40 | 
41 |   <body>
42 |     
43 |     <div class="container">
44 | 
45 |       <div class="sub-container">
46 | 
47 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
48 | 
49 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
50 | 
51 |         <h2>05.10. Element Positioning</h2>
52 |         
53 |         <ul class="normalList">
54 |           <li>Positioning allows to take an element on the page and `control where and how it can be positioned`</li>
55 |           <li>The CSS `position property` is used to `set position` for an element</li>
56 |           <li>It is also used to place an element `behind another` and also useful for `scripted animation effect`</li>
57 |         </ul>
58 | 
59 |         <h2>CSS positioning schemes</h2>
60 |         
61 |         <ol>
62 |           <li>Normal Flow</li>
63 |           <li>Element Floating</li>
64 |           <li>Absolute Positioning</li>
65 |         </ol>
66 | 
67 |         <div class="absolute-pos-box">
68 |           <h2>Absolute Positioning </h2>
69 |           
70 |           <ol>
71 |             <li>Absolute Positioning is `not considered as a part of Normal Document flow`</li>
72 |             <li>Absolute Positioning removes the document from Normal Document flow and respositioned based on top, right, bottom, or left offset values</li>
73 |             <li>Other elements in flow moves up and takes empty space made by an absolute positioned element</li>
74 |             <li>Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport</li>
75 |           </ol>
76 |         </div>
77 | 
78 |       </div>
79 | 
80 |     </div>
81 |     
82 |   </body>
83 | 
84 | </html>
85 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.10.3.position.absolute.relative.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.10.3.position.absolute.relative.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 | 
26 |         position: relative;
27 |       }
28 | 
29 |       .absolute-pos-box {
30 |         color: #fff;
31 |         background: #00c4cc;
32 |         padding: 10px;
33 |         width: 50%;
34 |         
35 |         position: absolute;
36 |         right: 0px;
37 |         bottom: 0px;
38 | 
39 |         /* left:0px;
40 |         top:0px; */
41 |       }
42 |     </style>
43 |     
44 |   </head>
45 | 
46 |   <body>
47 |     
48 |     <div class="container">
49 | 
50 |       <div class="sub-container">
51 | 
52 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
53 | 
54 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
55 | 
56 |         <h2>05.10. Element Positioning</h2>
57 |         
58 |         <ul class="normalList">
59 |           <li>Positioning allows to take an element on the page and `control where and how it can be positioned`</li>
60 |           <li>The CSS `position property` is used to `set position` for an element</li>
61 |           <li>It is also used to place an element `behind another` and also useful for `scripted animation effect`</li>
62 |         </ul>
63 | 
64 |         <h2>CSS positioning schemes</h2>
65 |         
66 |         <ol>
67 |           <li>Normal Flow</li>
68 |           <li>Element Floating</li>
69 |           <li>Absolute Positioning</li>
70 |         </ol>
71 | 
72 |         <div class="absolute-pos-box">
73 |           <h2>Absolute + Relative Positioning: [Container=Releative, Child=Absolute]  </h2>
74 |           
75 |           <ol>
76 |             <li>Absolute Positioning is `not considered as a part of Normal Document flow`</li>
77 |             <li>Absolute Positioning removes the document from Normal Document flow and respositioned based on top, right, bottom, or left offset values</li>
78 |             <li>Other elements in flow moves up and takes empty space made by an absolute positioned element</li>
79 |             <li>Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport</li>
80 |           </ol>
81 |         </div>
82 | 
83 |       </div>
84 | 
85 |     </div>
86 |     
87 |   </body>
88 | 
89 | </html>
90 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.10.4.position.fixed.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 |   <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>05.10.4.position.fixed.html</title>
 10 | 
 11 |     <!-- internal style -->
 12 |     <style>
 13 |       /* css selector: { property:value; } */
 14 |       body {
 15 |         margin: 0px;
 16 |         padding: 0px;
 17 |       }
 18 | 
 19 |       .container {
 20 |         background-color: burlywood;
 21 |         width: 80%;
 22 |         padding: 20px;
 23 |         border:5px solid #c5760f;
 24 |         margin: 20px auto;
 25 | 
 26 |         position: relative;
 27 |       }
 28 | 
 29 |       .fixed-pos-box {
 30 |         color: #fff;
 31 |         background: #00c4cc;
 32 |         padding: 10px;
 33 |         width: 50%;
 34 |         
 35 |         position: fixed;
 36 |         right: 95px;
 37 |       }
 38 |     </style>
 39 |     
 40 |   </head>
 41 | 
 42 |   <body>
 43 |     
 44 |     <div class="container">
 45 | 
 46 |       <div class="sub-container">
 47 | 
 48 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
 49 | 
 50 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
 51 | 
 52 |         <h2>05.10. Element Positioning</h2>
 53 |         
 54 |         <ul class="normalList">
 55 |           <li>Positioning allows to take an element on the page and `control where and how it can be positioned`</li>
 56 |           <li>The CSS `position property` is used to `set position` for an element</li>
 57 |           <li>It is also used to place an element `behind another` and also useful for `scripted animation effect`</li>
 58 |         </ul>
 59 | 
 60 |         <h2>CSS positioning schemes</h2>
 61 |         
 62 |         <ol>
 63 |           <li>Normal Flow</li>
 64 |           <li>Element Floating</li>
 65 |           <li>Absolute Positioning</li>
 66 |         </ol>
 67 | 
 68 |         <h2 class="fixed-pos-box">Fixed Positioning 1 : </h2>
 69 |         
 70 |         <ol>
 71 |           <li>The fixed positioning property helps to put the text fixed on the browser</li>
 72 |           <li>Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`</li>
 73 |           <li>As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it</li>
 74 |           <li>Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)</li>
 75 |         </ol>
 76 | 
 77 |         <div>
 78 |           <h2>Fixed Positioning 2 : </h2>
 79 |           
 80 |           <ol>
 81 |             <li>The fixed positioning property helps to put the text fixed on the browser</li>
 82 |             <li>Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`</li>
 83 |             <li>As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it</li>
 84 |             <li>Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)</li>
 85 |           </ol>
 86 |         </div>
 87 | 
 88 |         <div>
 89 |           <h2>Fixed Positioning 3 : </h2>
 90 |           
 91 |           <ol>
 92 |             <li>The fixed positioning property helps to put the text fixed on the browser</li>
 93 |             <li>Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`</li>
 94 |             <li>As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it</li>
 95 |             <li>Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)</li>
 96 |           </ol>
 97 |         </div>
 98 | 
 99 |       </div>
100 | 
101 |     </div>
102 |     
103 |   </body>
104 | 
105 | </html>
106 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.11.1.float.basics.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.11.1.float.basics.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .float-left-div {
28 |         border: 1px solid brown;
29 |         padding: 20px;
30 |         margin: 10px;
31 |         width: 25%;
32 |         float: left;
33 |       }
34 | 
35 |       .float-right-div {
36 |         border: 1px solid brown;
37 |         padding: 20px;
38 |         margin: 10px;
39 |         width: 25%;
40 |         float: right;
41 |       }
42 | 
43 |       .float-clear-div {
44 |         border: 1px solid brown;
45 |         padding: 20px;
46 |         margin: 10px;
47 |         clear:both;
48 |       }
49 |     </style>
50 |     
51 |   </head>
52 | 
53 |   <body>
54 |     
55 |     <div class="container">
56 | 
57 |       <div class="sub-container">
58 | 
59 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
60 | 
61 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
62 | 
63 |         <h2>5.11. Floats</h2>
64 |         
65 |         <ul class="normalList">
66 |           <li>Floating simply denotes an element shifted/placed on the left or right side</li>
67 |           <li>Floating is one of the widely used CSS layout techniques</li>
68 |           <li>Floats are used to create: Layout Design, Horizontal Menu/Navigation, Columner Layouts</li>
69 |         </ul>
70 |         
71 |         <br />
72 | 
73 |         <div class="float-left-div">@ left - float: left;</div>
74 |         <div class="float-right-div">@ right - float: right;</div>
75 |         <div class="float-clear-div">@ normal float - clear:both</div> 
76 | 
77 |       </div>
78 | 
79 |     </div>
80 |     
81 |   </body>
82 | 
83 | </html>
84 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1a.html.table.layout.html/05.12.1.html.table.layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 
 9 |     <title>05.12.1.htmltable.layout</title>
10 | 
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 |   </head>
13 | 
14 |   <body>
15 |     <h1>HTML Table based layout</h1>
16 | 
17 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
18 |     <table width="100%" cellspacing="0" cellpadding="20">
19 | 
20 |       <thead>
21 |         <tr bgcolor="#008080">
22 |           <td colspan="2">
23 |             <font face="arial" size="6" color="white"><center>Welcome to My Website</center> </font>
24 |           </td>
25 |         </tr>
26 |       </thead>
27 | 
28 |       <tbody>
29 |         <tr>
30 |           <td bgcolor="#67b1b1" width="20%" height="350">
31 |             <font face="arial" color="white"><center><h2>Links</h2></center> 
32 |               <a href="./05.12.1.html.table.layout.html">Home</a> <br/> <br/>
33 |               <a href="./services.html">Services</a> <br/> <br/>
34 |               <a href="./products.html">Products</a> <br/> <br/>
35 |               <a href="./about.html">About</a> <br/> <br/>
36 |               <a href="./contact.html">Contact</a> <br/> <br/>
37 |             </font>
38 |           </td>
39 | 
40 |           <td bgcolor="#a9d0d0">
41 |             <font face="arial" color="#666666"><center><h2>Home</h2></center> 
42 |             
43 |               <p align="left">
44 |                 Click on the links at left panel.
45 |               </p>
46 | 
47 |             </font>
48 | 
49 |           </td>
50 |         </tr>
51 |       </tbody>
52 | 
53 |       <tfoot>
54 |         <tr bgcolor="#008080" width="*">
55 |           <td colspan="2">
56 |               <font face="arial" color="white"><center><small> CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade; </small></center>
57 |           </td>
58 |         </tr>
59 |       </tfoot>
60 |       
61 |     </table>
62 |       
63 |   </body>
64 | 
65 | </html>
66 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1a.html.table.layout.html/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 
 9 |     <title>about.html</title>
10 | 
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 |     <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
13 |     <script src="main.js"></script> -->
14 | 
15 |   </head>
16 | 
17 |   <body>
18 |     <h1>HTML Table based layout</h1>
19 | 
20 |     <table width="100%" cellspacing="0" cellpadding="20">
21 | 
22 |       <thead>
23 |         <tr bgcolor="#008080">
24 |           <td colspan="2">
25 |             <font face="arial" size="6" color="white"><center>Welcome to My Website</center> </font>
26 |           </td>
27 |         </tr>
28 |       </thead>
29 | 
30 |       <tbody>
31 |         <tr>
32 |           <td bgcolor="#67b1b1" width="20%" height="350">
33 |             <font face="arial" color="white"><center><h2>Links</h2></center> 
34 |               <a href="./05.12.1.html.table.layout.html">Home</a> <br/> <br/>
35 |               <a href="./services.html">Services</a> <br/> <br/>
36 |               <a href="./products.html">Products</a> <br/> <br/>
37 |               <a href="./about.html">About</a> <br/> <br/>
38 |               <a href="./contact.html">Contact</a> <br/> <br/>
39 |             </font>
40 |           </td>
41 | 
42 |           <td bgcolor="#a9d0d0">
43 |             <font face="arial" color="#666666"><center><h2>About</h2></center> 
44 |               
45 |               
46 |             </font>
47 | 
48 |           </td>
49 |         </tr>
50 |       </tbody>
51 | 
52 |       <tfoot>
53 |         <tr bgcolor="#008080" width="*">
54 |           <td colspan="2">
55 |               <font face="arial" color="white"><center><small> CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade; </small></center>
56 |           </td>
57 |         </tr>
58 |       </tfoot>
59 |       
60 |     </table>
61 |       
62 |   </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1a.html.table.layout.html/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 
 9 |     <title>contact</title>
10 | 
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 |     <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
13 |     <script src="main.js"></script> -->
14 | 
15 |   </head>
16 | 
17 |   <body>
18 |     <h1>HTML Table based layout</h1>
19 | 
20 |     <table width="100%" cellspacing="0" cellpadding="20">
21 | 
22 |       <thead>
23 |         <tr bgcolor="#008080">
24 |           <td colspan="2">
25 |             <font face="arial" size="6" color="white"><center>Welcome to My Website</center> </font>
26 |           </td>
27 |         </tr>
28 |       </thead>
29 | 
30 |       <tbody>
31 |         <tr>
32 |           <td bgcolor="#67b1b1" width="20%" height="350">
33 |             <font face="arial" color="white"><center><h2>Links</h2></center> 
34 |               <a href="./05.12.1.html.table.layout.html">Home</a> <br/> <br/>
35 |               <a href="./services.html">Services</a> <br/> <br/>
36 |               <a href="./products.html">Products</a> <br/> <br/>
37 |               <a href="./about.html">About</a> <br/> <br/>
38 |               <a href="./contact.html">Contact</a> <br/> <br/>
39 |             </font>
40 |           </td>
41 | 
42 |           <td bgcolor="#a9d0d0">
43 |             <font face="arial" color="#666666"><center><h2>Contact</h2></center> 
44 |               
45 |               
46 |             </font>
47 | 
48 |           </td>
49 |         </tr>
50 |       </tbody>
51 | 
52 |       <tfoot>
53 |         <tr bgcolor="#008080" width="*">
54 |           <td colspan="2">
55 |               <font face="arial" color="white"><center><small> CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade; </small></center>
56 |           </td>
57 |         </tr>
58 |       </tfoot>
59 |       
60 |     </table>
61 |       
62 |   </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1a.html.table.layout.html/products.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 
 9 |     <title>products</title>
10 | 
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 |     <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
13 |     <script src="main.js"></script> -->
14 | 
15 |   </head>
16 | 
17 |   <body>
18 |     <h1>HTML Table based layout</h1>
19 | 
20 |     <table width="100%" cellspacing="0" cellpadding="20">
21 | 
22 |       <thead>
23 |         <tr bgcolor="#008080">
24 |           <td colspan="2">
25 |             <font face="arial" size="6" color="white"><center>Welcome to My Website</center> </font>
26 |           </td>
27 |         </tr>
28 |       </thead>
29 | 
30 |       <tbody>
31 |         <tr>
32 |           <td bgcolor="#67b1b1" width="20%" height="350">
33 |             <font face="arial" color="white"><center><h2>Links</h2></center> 
34 |               <a href="./05.12.1.html.table.layout.html">Home</a> <br/> <br/>
35 |               <a href="./services.html">Services</a> <br/> <br/>
36 |               <a href="./products.html">Products</a> <br/> <br/>
37 |               <a href="./about.html">About</a> <br/> <br/>
38 |               <a href="./contact.html">Contact</a> <br/> <br/>
39 |             </font>
40 |           </td>
41 | 
42 |           <td bgcolor="#a9d0d0">
43 |             <font face="arial" color="#666666"><center><h2>Products</h2></center> 
44 |               
45 |               
46 |             </font>
47 | 
48 |           </td>
49 |         </tr>
50 |       </tbody>
51 | 
52 |       <tfoot>
53 |         <tr bgcolor="#008080" width="*">
54 |           <td colspan="2">
55 |               <font face="arial" color="white"><center><small> CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade; </small></center>
56 |           </td>
57 |         </tr>
58 |       </tfoot>
59 |       
60 |     </table>
61 |       
62 |   </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1a.html.table.layout.html/services.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 | 
 9 |     <title>services</title>
10 | 
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 |     <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
13 |     <script src="main.js"></script> -->
14 | 
15 |   </head>
16 | 
17 |   <body>
18 |     <h1>HTML Table based layout</h1>
19 | 
20 |     <table width="100%" cellspacing="0" cellpadding="20">
21 | 
22 |       <thead>
23 |         <tr bgcolor="#008080">
24 |           <td colspan="2">
25 |             <font face="arial" size="6" color="white"><center>Welcome to My Website</center> </font>
26 |           </td>
27 |         </tr>
28 |       </thead>
29 | 
30 |       <tbody>
31 |         <tr>
32 |           <td bgcolor="#67b1b1" width="20%" height="350">
33 |             <font face="arial" color="white"><center><h2>Links</h2></center> 
34 |               <a href="./05.12.1.html.table.layout.html">Home</a> <br/> <br/>
35 |               <a href="./services.html">Services</a> <br/> <br/>
36 |               <a href="./products.html">Products</a> <br/> <br/>
37 |               <a href="./about.html">About</a> <br/> <br/>
38 |               <a href="./contact.html">Contact</a> <br/> <br/>
39 |             </font>
40 |           </td>
41 | 
42 |           <td bgcolor="#a9d0d0">
43 |             <font face="arial" color="#666666"><center><h2>Services</h2></center> 
44 |               
45 |               
46 |             </font>
47 | 
48 |           </td>
49 |         </tr>
50 |       </tbody>
51 | 
52 |       <tfoot>
53 |         <tr bgcolor="#008080" width="*">
54 |           <td colspan="2">
55 |               <font face="arial" color="white"><center><small> CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade; </small></center>
56 |           </td>
57 |         </tr>
58 |       </tfoot>
59 |       
60 |     </table>
61 |       
62 |   </body>
63 | 
64 | </html>
65 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/05.12.2.css.table.layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>05.12.2.css.table.layout.html</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Table based layout</h1>
17 | 
18 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
19 |     <div class="container">
20 | 
21 |       <table class="table" width="100%" cellspacing="0" cellpadding="20">
22 | 
23 |         <thead class="bg-bar header">
24 |           <tr>
25 |             <td colspan="2">
26 |               Welcome to My Website
27 |             </td>
28 |           </tr>
29 |         </thead>
30 | 
31 |         <tbody >
32 |           <tr>
33 |             <td class="side-content">
34 |               <h2 class="heading-side-content">Links</h2>
35 | 
36 |               <div class="links-container">
37 |                 <a class="link-active" href="./05.12.2.css.table.layout.html">Home</a> 
38 |                 <a href="./about.html">About</a>
39 |                 <a href="./products.html">Products</a>
40 |                 <a href="./services.html">Services</a>
41 |                 <a href="./contact.html">Contact</a>
42 |               </div>
43 |             </td>
44 | 
45 |             <td class="main-content">
46 |               <h2 class="heading-main-content">Home</h2>
47 | 
48 |               <div class="content-text">
49 |                 <p>
50 |                   Click on the links at left panel.
51 |                 </p>
52 |               </div>
53 | 
54 |             </td>
55 |           </tr>
56 |         </tbody>
57 | 
58 |         <tfoot class="bg-bar footer">
59 |           <tr>
60 |             <td colspan="2">
61 |                 CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
62 |             </td>
63 |           </tr>
64 |         </tfoot>
65 |         
66 |       </table>
67 | 
68 |     </div>
69 |       
70 |   </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>About Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Table based layout</h1>
17 | 
18 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
19 |     <div class="container">
20 | 
21 |       <table class="table" width="100%" cellspacing="0" cellpadding="20">
22 | 
23 |         <thead class="bg-bar header">
24 |           <tr>
25 |             <td colspan="2">
26 |               Welcome to My Website
27 |             </td>
28 |           </tr>
29 |         </thead>
30 | 
31 |         <tbody >
32 |           <tr>
33 |             <td class="side-content">
34 |               <h2 class="heading-side-content">Links</h2>
35 | 
36 |               <div class="links-container">
37 |                 <a href="./05.12.2.css.table.layout.html">Home</a> 
38 |                 <a class="link-active" href="./about.html">About</a>
39 |                 <a href="./products.html">Products</a>
40 |                 <a href="./services.html">Services</a>
41 |                 <a href="./contact.html">Contact</a>
42 |               </div>
43 |             </td>
44 | 
45 |             <td class="main-content">
46 |               <h2 class="heading-main-content">About Us</h2>
47 | 
48 |               <div class="content-text">
49 |                 <p>
50 |                   Click on the links at left panel.
51 |                 </p>
52 |               </div>
53 | 
54 |             </td>
55 |           </tr>
56 |         </tbody>
57 | 
58 |         <tfoot class="bg-bar footer">
59 |           <tr>
60 |             <td colspan="2">
61 |                 CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
62 |             </td>
63 |           </tr>
64 |         </tfoot>
65 |         
66 |       </table>
67 | 
68 |     </div>
69 |       
70 |   </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Contact Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Table based layout</h1>
17 | 
18 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
19 |     <div class="container">
20 | 
21 |       <table class="table" width="100%" cellspacing="0" cellpadding="20">
22 | 
23 |         <thead class="bg-bar header">
24 |           <tr>
25 |             <td colspan="2">
26 |               Welcome to My Website
27 |             </td>
28 |           </tr>
29 |         </thead>
30 | 
31 |         <tbody >
32 |           <tr>
33 |             <td class="side-content">
34 |               <h2 class="heading-side-content">Links</h2>
35 | 
36 |               <div class="links-container">
37 |                 <a href="./05.12.2.css.table.layout.html">Home</a> 
38 |                 <a href="./about.html">About</a>
39 |                 <a href="./products.html">Products</a>
40 |                 <a href="./services.html">Services</a>
41 |                 <a class="link-active" href="./contact.html">Contact</a>
42 |               </div>
43 |             </td>
44 | 
45 |             <td class="main-content">
46 |               <h2 class="heading-main-content">Contact Us</h2>
47 | 
48 |               <div class="content-text">
49 |                 <p>
50 |                   Click on the links at left panel.
51 |                 </p>
52 |               </div>
53 | 
54 |             </td>
55 |           </tr>
56 |         </tbody>
57 | 
58 |         <tfoot class="bg-bar footer">
59 |           <tr>
60 |             <td colspan="2">
61 |                 CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
62 |             </td>
63 |           </tr>
64 |         </tfoot>
65 |         
66 |       </table>
67 | 
68 |     </div>
69 |       
70 |   </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/products.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Products</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Table based layout</h1>
17 | 
18 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
19 |     <div class="container">
20 | 
21 |       <table class="table" width="100%" cellspacing="0" cellpadding="20">
22 | 
23 |         <thead class="bg-bar header">
24 |           <tr>
25 |             <td colspan="2">
26 |               Welcome to My Website
27 |             </td>
28 |           </tr>
29 |         </thead>
30 | 
31 |         <tbody >
32 |           <tr>
33 |             <td class="side-content">
34 |               <h2 class="heading-side-content">Links</h2>
35 | 
36 |               <div class="links-container">
37 |                 <a href="./05.12.2.css.table.layout.html">Home</a> 
38 |                 <a href="./about.html">About</a>
39 |                 <a class="link-active" href="./products.html">Products</a>
40 |                 <a href="./services.html">Services</a>
41 |                 <a href="./contact.html">Contact</a>
42 |               </div>
43 |             </td>
44 | 
45 |             <td class="main-content">
46 |               <h2 class="heading-main-content">Products</h2>
47 | 
48 |               <div class="content-text">
49 |                 <p>
50 |                   Click on the links at left panel.
51 |                 </p>
52 |               </div>
53 | 
54 |             </td>
55 |           </tr>
56 |         </tbody>
57 | 
58 |         <tfoot class="bg-bar footer">
59 |           <tr>
60 |             <td colspan="2">
61 |                 CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
62 |             </td>
63 |           </tr>
64 |         </tfoot>
65 |         
66 |       </table>
67 | 
68 |     </div>
69 |       
70 |   </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/services.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Services</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Table based layout</h1>
17 | 
18 |     <!-- create an html layout with tables (NOT advisale, its better to use div or html5 semantic tags with css / CSS grid / Css flexbox )-->
19 |     <div class="container">
20 | 
21 |       <table class="table" width="100%" cellspacing="0" cellpadding="20">
22 | 
23 |         <thead class="bg-bar header">
24 |           <tr>
25 |             <td colspan="2">
26 |               Welcome to My Website
27 |             </td>
28 |           </tr>
29 |         </thead>
30 | 
31 |         <tbody >
32 |           <tr>
33 |             <td class="side-content">
34 |               <h2 class="heading-side-content">Links</h2>
35 | 
36 |               <div class="links-container">
37 |                 <a href="./05.12.2.css.table.layout.html">Home</a> 
38 |                 <a href="./about.html">About</a>
39 |                 <a href="./products.html">Products</a>
40 |                 <a class="link-active" href="./services.html">Services</a>
41 |                 <a href="./contact.html">Contact</a>
42 |               </div>
43 |             </td>
44 | 
45 |             <td class="main-content">
46 |               <h2 class="heading-main-content">Services</h2>
47 | 
48 |               <div class="content-text">
49 |                 <p>
50 |                   Click on the links at left panel.
51 |                 </p>
52 |               </div>
53 | 
54 |             </td>
55 |           </tr>
56 |         </tbody>
57 | 
58 |         <tfoot class="bg-bar footer">
59 |           <tr>
60 |             <td colspan="2">
61 |                 CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
62 |             </td>
63 |           </tr>
64 |         </tfoot>
65 |         
66 |       </table>
67 | 
68 |     </div>
69 |       
70 |   </body>
71 | 
72 | </html>
73 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.1b.css.table.layout.html/style.css:
--------------------------------------------------------------------------------
 1 |  /* external css file - css selector: { property:value; } */
 2 | body {
 3 |   font-family: Arial, Helvetica, sans-serif;
 4 | }
 5 | 
 6 | .container {
 7 | 
 8 | }
 9 | 
10 | .table {
11 | 
12 | }
13 | 
14 | .bg-bar {
15 |   background-color: #008080;
16 |   color: #fff;
17 |   text-align: center;
18 | }
19 | 
20 | .header { 
21 |   font-size: 32px;
22 | }
23 | 
24 | .side-content {
25 |   background-color: #67b1b1;
26 |   width:20%;
27 |   height:350px;
28 | }
29 | 
30 | .heading-side-content {
31 |   color: #fff;
32 |   text-align: center;
33 | }
34 | 
35 | .links-container a {
36 |   display: block;
37 |   margin: 20px 0px;
38 | }
39 | 
40 | .links-container a:link {
41 |   color: #000;
42 | }
43 | 
44 | .links-container a:visited {
45 |   color: #666;
46 | }
47 | 
48 | .links-container a:hover {
49 |   color: #fff;
50 |   font-weight: bold;
51 | }
52 | 
53 | .links-container a:active {
54 |   color: #008080;
55 | }
56 | 
57 | .link-active {
58 |   text-decoration: none;
59 |   color: #008080 !important;
60 |   font-weight: bold;
61 |   border-bottom: 2px solid;
62 | }
63 | 
64 | .main-content {
65 |   background-color: #a9d0d0;
66 |   width:80%;
67 | }
68 | 
69 | .heading-main-content {
70 |   color: #666;
71 |   text-align: center;
72 | }
73 | 
74 | .content-text {
75 |   color: #666;
76 |   text-align: left;
77 | }
78 | 
79 | .footer { 
80 |   font-size: 10px;
81 | }
82 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/05.12.2.css.div.layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>05.12.2.css.div.layout.html</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Div based layout</h1>
17 | 
18 |     <div class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <div class="header">
23 |           Welcome to My Website
24 |         </div>
25 | 
26 |         <div class="middle-container">
27 |           
28 |           <div class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <div class="links-container">
32 |               <a class="link-active" href="./05.12.2.css.div.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </div>
38 |           </div>
39 | 
40 |           <div class="main-content">
41 |             <h2 class="heading-main-content">Home</h2>
42 | 
43 |             <div class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </div>
48 |           </div>
49 | 
50 |         </div>
51 | 
52 |         <div class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </div>
55 | 
56 |       </div>
57 | 
58 |     </div>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>About Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Div based layout</h1>
17 | 
18 |     <div class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <div class="header">
23 |           Welcome to My Website
24 |         </div>
25 | 
26 |         <div class="middle-container">
27 |           
28 |           <div class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <div class="links-container">
32 |               <a href="./05.12.2.css.div.layout.html">Home</a> 
33 |               <a class="link-active" href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </div>
38 |           </div>
39 | 
40 |           <div class="main-content">
41 |             <h2 class="heading-main-content">About Us</h2>
42 | 
43 |             <div class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </div>
48 |           </div>
49 | 
50 |         </div>
51 | 
52 |         <div class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </div>
55 | 
56 |       </div>
57 | 
58 |     </div>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Contact Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Div based layout</h1>
17 | 
18 |     <div class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <div class="header">
23 |           Welcome to My Website
24 |         </div>
25 | 
26 |         <div class="middle-container">
27 |           
28 |           <div class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <div class="links-container">
32 |               <a href="./05.12.2.css.div.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a class="link-active" href="./contact.html">Contact</a>
37 |             </div>
38 |           </div>
39 | 
40 |           <div class="main-content">
41 |             <h2 class="heading-main-content">Contact Us</h2>
42 | 
43 |             <div class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </div>
48 |           </div>
49 | 
50 |         </div>
51 | 
52 |         <div class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </div>
55 | 
56 |       </div>
57 | 
58 |     </div>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/products.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Product</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Div based layout</h1>
17 | 
18 |     <div class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <div class="header">
23 |           Welcome to My Website
24 |         </div>
25 | 
26 |         <div class="middle-container">
27 |           
28 |           <div class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <div class="links-container">
32 |               <a href="./05.12.2.css.div.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a class="link-active" href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </div>
38 |           </div>
39 | 
40 |           <div class="main-content">
41 |             <h2 class="heading-main-content">Product</h2>
42 | 
43 |             <div class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </div>
48 |           </div>
49 | 
50 |         </div>
51 | 
52 |         <div class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </div>
55 | 
56 |       </div>
57 | 
58 |     </div>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/services.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Services</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML CSS Div based layout</h1>
17 | 
18 |     <div class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <div class="header">
23 |           Welcome to My Website
24 |         </div>
25 | 
26 |         <div class="middle-container">
27 |           
28 |           <div class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <div class="links-container">
32 |               <a href="./05.12.2.css.div.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a class="link-active" href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </div>
38 |           </div>
39 | 
40 |           <div class="main-content">
41 |             <h2 class="heading-main-content">Services</h2>
42 | 
43 |             <div class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </div>
48 |           </div>
49 | 
50 |         </div>
51 | 
52 |         <div class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </div>
55 | 
56 |       </div>
57 | 
58 |     </div>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.2.css.div.layout.html/style.css:
--------------------------------------------------------------------------------
 1 |  /* external css file - css selector: { property:value; } */
 2 | body {
 3 |   font-family: Arial, Helvetica, sans-serif;
 4 | }
 5 | 
 6 | .container {
 7 |   width: 100%;
 8 | }
 9 | 
10 | .content-container{
11 |   width: 100%;
12 | }
13 | 
14 | .header { 
15 |   padding: 20px;
16 |   font-size: 32px;
17 |   background-color: #008080;
18 |   color: #fff;
19 |   text-align: center;  
20 | }
21 | 
22 | .side-content {
23 |   padding: 20px;
24 |   background-color: #67b1b1;
25 |   width:20%;
26 |   height:350px;
27 |   float: left;
28 | }
29 | 
30 | .heading-side-content {
31 |   color: #fff;
32 |   text-align: center;
33 | }
34 | 
35 | .links-container a {
36 |   display: block;
37 |   margin: 20px 0px;
38 | }
39 | 
40 | .links-container a:link {
41 |   color: #000;
42 | }
43 | 
44 | .links-container a:visited {
45 |   color: #666;
46 | }
47 | 
48 | .links-container a:hover {
49 |   color: #fff;
50 |   font-weight: bold;
51 | }
52 | 
53 | .links-container a:active {
54 |   color: #008080;
55 | }
56 | 
57 | .link-active {
58 |   text-decoration: none;
59 |   color: #008080 !important;
60 |   font-weight: bold;
61 |   border-bottom: 2px solid;
62 | }
63 | 
64 | .main-content {
65 |   padding: 20px;
66 |   background-color: #a9d0d0;
67 |   width:73%;
68 |   height:350px;
69 |   float: right;
70 | }
71 | 
72 | .heading-main-content {
73 |   color: #666;
74 |   text-align: center;
75 | }
76 | 
77 | .content-text {
78 |   color: #666;
79 |   text-align: left;
80 | }
81 | 
82 | .footer { 
83 |   padding: 20px;
84 |   font-size: 10px;
85 |   background-color: #008080;
86 |   color: #fff;
87 |   text-align: center;  
88 |   clear: both;
89 | }
90 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/05.12.3.semantic.tag.layout.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>05.12.3.semantic.tag.layout</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML5 Semantic Tag based layout</h1>
17 | 
18 |     <main class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <header class="header">
23 |           Welcome to My Website
24 |         </header>
25 | 
26 |         <section class="middle-container">
27 |           
28 |           <aside class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <article class="links-container">
32 |               <a class="link-active" href="./05.12.3.semantic.tag.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </article>
38 |           </aside>
39 | 
40 |           <aside class="main-content">
41 |             <h2 class="heading-main-content">Home</h2>
42 | 
43 |             <article class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </article>
48 |           </aside>
49 | 
50 |         </section>
51 | 
52 |         <footer class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </footer>
55 | 
56 |       </div>
57 | 
58 |     </main>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>About Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML5 Semantic Tag based layout</h1>
17 | 
18 |     <main class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <header class="header">
23 |           Welcome to My Website
24 |         </header>
25 | 
26 |         <section class="middle-container">
27 |           
28 |           <aside class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <article class="links-container">
32 |               <a href="./05.12.3.semantic.tag.layout.html">Home</a> 
33 |               <a class="link-active" href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </article>
38 |           </aside>
39 | 
40 |           <aside class="main-content">
41 |             <h2 class="heading-main-content">About Us</h2>
42 | 
43 |             <article class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </article>
48 |           </aside>
49 | 
50 |         </section>
51 | 
52 |         <footer class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </footer>
55 | 
56 |       </div>
57 | 
58 |     </main>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/contact.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Contact Us</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML5 Semantic Tag based layout</h1>
17 | 
18 |     <main class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <header class="header">
23 |           Welcome to My Website
24 |         </header>
25 | 
26 |         <section class="middle-container">
27 |           
28 |           <aside class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <article class="links-container">
32 |               <a href="./05.12.3.semantic.tag.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a class="link-active" href="./contact.html">Contact</a>
37 |             </article>
38 |           </aside>
39 | 
40 |           <aside class="main-content">
41 |             <h2 class="heading-main-content">Contact Us</h2>
42 | 
43 |             <article class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </article>
48 |           </aside>
49 | 
50 |         </section>
51 | 
52 |         <footer class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </footer>
55 | 
56 |       </div>
57 | 
58 |     </main>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/products.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Products</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML5 Semantic Tag based layout</h1>
17 | 
18 |     <main class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <header class="header">
23 |           Welcome to My Website
24 |         </header>
25 | 
26 |         <section class="middle-container">
27 |           
28 |           <aside class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <article class="links-container">
32 |               <a href="./05.12.3.semantic.tag.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a class="link-active" href="./products.html">Products</a>
35 |               <a href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </article>
38 |           </aside>
39 | 
40 |           <aside class="main-content">
41 |             <h2 class="heading-main-content">Products</h2>
42 | 
43 |             <article class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </article>
48 |           </aside>
49 | 
50 |         </section>
51 | 
52 |         <footer class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </footer>
55 | 
56 |       </div>
57 | 
58 |     </main>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/services.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Services</title>
10 | 
11 |     <link rel="stylesheet" type="text/css" href="./style.css" />
12 |     
13 |   </head>
14 | 
15 |   <body>
16 |     <h1>HTML5 Semantic Tag based layout</h1>
17 | 
18 |     <main class="container">
19 | 
20 |       <div class="content-container">
21 | 
22 |         <header class="header">
23 |           Welcome to My Website
24 |         </header>
25 | 
26 |         <section class="middle-container">
27 |           
28 |           <aside class="side-content">
29 |             <h2 class="heading-side-content">Links</h2>
30 | 
31 |             <article class="links-container">
32 |               <a href="./05.12.3.semantic.tag.layout.html">Home</a> 
33 |               <a href="./about.html">About</a>
34 |               <a href="./products.html">Products</a>
35 |               <a class="link-active" href="./services.html">Services</a>
36 |               <a href="./contact.html">Contact</a>
37 |             </article>
38 |           </aside>
39 | 
40 |           <aside class="main-content">
41 |             <h2 class="heading-main-content">Services</h2>
42 | 
43 |             <article class="content-text">
44 |               <p>
45 |                 Click on the links at left panel.
46 |               </p>
47 |             </article>
48 |           </aside>
49 | 
50 |         </section>
51 | 
52 |         <footer class="footer">
53 |           CopyRight &copy; 2019 | DreamTech Corporation &reg; License  |  Dreams &trade;
54 |         </footer>
55 | 
56 |       </div>
57 | 
58 |     </main>
59 |       
60 |   </body>
61 | 
62 | </html>
63 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.12.3.semantic.tag.layout.html/style.css:
--------------------------------------------------------------------------------
 1 |  /* external css file - css selector: { property:value; } */
 2 | body {
 3 |   font-family: Arial, Helvetica, sans-serif;
 4 | }
 5 | 
 6 | .container {
 7 |   width: 100%;
 8 | }
 9 | 
10 | .content-container{
11 |   width: 100%;
12 | }
13 | 
14 | .header { 
15 |   padding: 20px;
16 |   font-size: 32px;
17 |   background-color: #008080;
18 |   color: #fff;
19 |   text-align: center;  
20 | }
21 | 
22 | .side-content {
23 |   padding: 20px;
24 |   background-color: #67b1b1;
25 |   width:20%;
26 |   height:350px;
27 |   float: left;
28 | }
29 | 
30 | .heading-side-content {
31 |   color: #fff;
32 |   text-align: center;
33 | }
34 | 
35 | .links-container a {
36 |   display: block;
37 |   margin: 20px 0px;
38 | }
39 | 
40 | .links-container a:link {
41 |   color: #000;
42 | }
43 | 
44 | .links-container a:visited {
45 |   color: #666;
46 | }
47 | 
48 | .links-container a:hover {
49 |   color: #fff;
50 |   font-weight: bold;
51 | }
52 | 
53 | .links-container a:active {
54 |   color: #008080;
55 | }
56 | 
57 | .link-active {
58 |   text-decoration: none;
59 |   color: #008080 !important;
60 |   font-weight: bold;
61 |   border-bottom: 2px solid;
62 | }
63 | 
64 | .main-content {
65 |   padding: 20px;
66 |   background-color: #a9d0d0;
67 |   width:73%;
68 |   height:350px;
69 |   float: right;
70 | }
71 | 
72 | .heading-main-content {
73 |   color: #666;
74 |   text-align: center;
75 | }
76 | 
77 | .content-text {
78 |   color: #666;
79 |   text-align: left;
80 | }
81 | 
82 | .footer { 
83 |   padding: 20px;
84 |   font-size: 10px;
85 |   background-color: #008080;
86 |   color: #fff;
87 |   text-align: center;  
88 |   clear: both;
89 | }
90 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.15.1.vendor.prefixes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.15.1.vendor.prefixes.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .heading-text {
28 |         padding: 10px;
29 |         border: 2px solid #c5760f;
30 | 
31 |         -webkit-border-radius: 20px;
32 |         -moz-border-radius: 20px;
33 |         -ms-border-radius: 20px;
34 |         -o-border-radius: 20px;
35 | 
36 |         border-radius: 20px;
37 |       }
38 | 
39 |       .sub-heading-text {
40 |         -webkit-text-shadow: 5px 5px 2px #c5760f;
41 |         -moz-text-shadow: 5px 5px 2px #c5760f;
42 |         -ms-text-shadow: 5px 5px 2px #c5760f;
43 |         -o-text-shadow: 5px 5px 2px #c5760f;
44 | 
45 |         text-shadow: 5px 5px 2px #c5760f;
46 |       }
47 |     </style>
48 |     
49 |   </head>
50 | 
51 |   <body>
52 |     
53 |     <div class="container">
54 | 
55 |       <div class="sub-container">
56 | 
57 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
58 | 
59 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
60 | 
61 |         <h2 class="sub-heading-text" id="subHeadingText">5.15. CSS Vendor Prefixes (CSS Browser Prefixes)</h2>
62 |         
63 |         <ul class="normalList">
64 |           <li>Vendor Prefixes allows browsers manufacturers to add support for `proprietory features which are still in development`</li>
65 |           <li>Browser manufacturers have used browser specific `prefixes for experimental APIs`</li>
66 |           <li>Vendor Prefixes gives designer/developer an opportunity to use experimental/evolving features-properties</li>
67 |           <li>CSS vendor prefixes/CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers</li>
68 |           <li>Note: CSS vendor prefixes/CSS browser prefixes are used only for latest CSS3 properties which are not fully developed/supported by all browser</li>
69 |         </ul>
70 |         
71 |       </div>
72 | 
73 |     </div>
74 |     
75 |   </body>
76 | 
77 | </html>
78 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.16.reset.css.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.16.reset.css.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       /* css reset styles goes here */
15 |       body, h1, h2, h3, h4, h5, h6, p, input,li {
16 |         margin:0px;
17 |         padding:0px;
18 |       }   
19 | 
20 |       .container {
21 |         background-color: burlywood;
22 |         width: 80%;
23 |         padding: 20px;
24 |         border:5px solid #c5760f;
25 |         margin: 20px auto;
26 |       }
27 |     </style>
28 |     
29 |   </head>
30 | 
31 |   <body>
32 |     
33 |     <div class="container">
34 | 
35 |       <div class="sub-container">
36 | 
37 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
38 | 
39 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
40 | 
41 |         <h2 class="sub-heading-text" id="subHeadingText">05.16. reset css</h2>
42 |         
43 |         <ul class="normalList">
44 |           <li>CSS Reset is a set of styles that nullify a browsers default style sheet</li>
45 |           <li>CSS Reset allows designers to avoid conflicts between their styles and browser default styles</li>
46 |           <li>Every browser has its own default `user agent stylesheet`, that it uses to make unstyled websites appear more beautiful/legible. (By default apply variable font-sizes to H1 to H6, certain amount of padding to almost every element, make links blue and visited links purple, give tables a certain amount of border and padding)</li>
47 |           <li>Using a CSS Reset, we can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible</li>
48 |           <li>The goal of a reset style is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings etc.</li>
49 |         </ul>
50 |         
51 |       </div>
52 | 
53 |     </div>
54 |     
55 |   </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.2.text.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.2.text.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 | 
15 |       .heading-text, h2 {
16 |         text-align: center;
17 |         text-decoration: overline;
18 |         text-transform: uppercase;
19 |       }
20 | 
21 |       .normal-list {
22 |         letter-spacing: 4px;
23 |         word-spacing: 8px;
24 |         line-height: 30px;
25 |         color: #008080;
26 |       }
27 |     </style>
28 |     
29 |   </head>
30 | 
31 |   <body>
32 | 
33 |     <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
34 | 
35 |     <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
36 | 
37 |     <h2>5.2. Formatting text</h2>
38 | 
39 |     <ul class="normal-list">
40 |       <li>CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.</li>
41 |       <li>Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of the space between lines and letters, and how the text is aligned within the content box</li>
42 |       <li>Example: color, text-align, text-decoration, text-transform, line-height, direction, word-spacing, text-shadow</li>
43 |     </ul>
44 |     
45 |   </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.3.color.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.3.color.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       .heading-text, h2 {
15 |         text-align: center;
16 |         text-decoration: overline;
17 |         text-transform: uppercase;
18 |         color: hsl(140, 50%, 60%); /* Hue=140 -> green color, Saturation=50% -> 50% green not full green, lightness=60% -> lighter shade of green*/
19 |       }
20 | 
21 |       h2 {
22 |         color:rgba(0,155,0,0.5);
23 |       }
24 | 
25 |       .normal-list {
26 |         letter-spacing: 4px;
27 |         word-spacing: 8px;
28 |         line-height: 30px;
29 |         background-color: wheat;
30 |         color:#000;
31 |         border-bottom: 5px solid #2f4f4f;
32 |         padding-bottom: 20px;
33 |       }
34 |     </style>
35 |     
36 |   </head>
37 | 
38 |   <body>
39 | 
40 |     <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
41 | 
42 |     <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
43 | 
44 |     <h2>05.3. color</h2>
45 | 
46 |     <ul class="normal-list">
47 |       <li>Colors are pretty powerful way to express different feelings and emotions in our human life and play an important role while desinging UI or UX</li>
48 |       <li>Typically, `color` is used to set a color either for the foreground of an element (i.e., its text), for the background of the element,  or else affect the color of borders/decorative effects</li>
49 |       <li>The CSS `color` property defines the foreground color (text color), `background-color` property defines the background color of an element</li>
50 |       <li>Example: color, border-color, background-color</li>
51 |     </ul>
52 |     
53 |   </body>
54 | 
55 | </html>
56 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.4.units.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.4.units.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         font-size: 20px;
16 |         margin: 0px;
17 |         padding: 0px;
18 |       }
19 | 
20 |       .container {
21 |         background-color: darkseagreen;
22 |         height: 100vh;
23 |         width: 100vw;
24 |         display: table-cell;
25 |         vertical-align: middle;
26 |       }
27 | 
28 |       .sub-container {
29 |         background-color:burlywood;
30 |         padding:20px;
31 |         width: 50vw;
32 |         margin: 0 auto;
33 |       }
34 | 
35 |       h1 {
36 |         margin: 0px;
37 |         padding: 0px;
38 |       }
39 | 
40 |       .normalList {
41 |         font-size: 0.5em;
42 |         line-height: 3em;
43 |         border:0.2em dashed #666;
44 |         padding: 3em;
45 |         margin: 2em;
46 |       }
47 |     </style>
48 |     
49 |   </head>
50 | 
51 |   <body>
52 |     
53 |     <div class="container">
54 | 
55 |       <div class="sub-container">
56 | 
57 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
58 | 
59 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
60 | 
61 |         <h2>05.4. Common Measurement units</h2>
62 | 
63 |         <ul class="normalList">
64 |           <li>Units are used to specify non-zero length value in CSS properties</li>
65 |           <li>Length measured can be either `absolute units such as pixels, points` and so on, or `relative such as percentages (%) and em` units</li>
66 |           <li>CSS properties take "length" values, such as width, height, margin, padding, font-size, border-width etc.</li>
67 |         </ul>
68 | 
69 |         <h3>There are two unit types: </h3>
70 | 
71 |         <ol>
72 |           <li>Absolute Values/Units</li>
73 |           <li>Relative Values/Units</li>
74 |         </ol>
75 | 
76 |       </div>
77 | 
78 |     </div>
79 |     
80 |   </body>
81 | 
82 | </html>
83 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.5.background.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.5.background.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       ol li {
15 |         height: 100px;
16 |         font-weight: bold;
17 |         margin-top: 20px;
18 |         padding: 5px;
19 |         border: 2px solid brown;
20 |       }
21 | 
22 |       ol li:nth-child(1) {
23 |         background-color: thistle;
24 |       }
25 | 
26 |       ol li:nth-child(2) {
27 |         background-image: url("../assets/images/css3.png");
28 |         background-color: bisque;
29 |       }
30 | 
31 |       ol li:nth-child(3) {
32 |         background-image: url("../assets/images/css3.png");
33 |         background-repeat: no-repeat; 
34 |         background-color: darkseagreen;
35 |       }
36 | 
37 |       /* body {
38 |         background-image: url("../assets/images/css3.png");
39 |         background-attachment: fixed;
40 |       } */
41 | 
42 |       ol li:nth-child(5) {
43 |         background-image: url("../assets/images/css3.png");
44 |         background-repeat: no-repeat;
45 |         background-color: wheat;
46 |         background-position: center -50px; /* horizontal X and vertical Y position*/
47 |       }
48 | 
49 |       ol li:nth-child(6) {
50 |         background-image: url("../assets/images/css3.png");
51 |         background-repeat: no-repeat;
52 |         background-color: wheat;
53 |         background-position: center center; /* horizontal X and vertical Y position*/
54 |         background-size: contain;
55 |       }
56 |     </style>
57 |     
58 |   </head>
59 | 
60 |   <body>
61 |     
62 |     <div class="container">
63 | 
64 |       <div class="sub-container">
65 | 
66 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
67 | 
68 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
69 | 
70 |         <h2>05.5. Backgrounds</h2>
71 | 
72 |         <ul class="normalList">
73 |           <li>CSS background properties are used to define background styles/effects for the elements</li>
74 |         </ul>
75 | 
76 |         <h2>Background Properties</h2>
77 |         The CSS provide several properties for styling the background of an element, like: 
78 |         <ol>
79 |           <li>background-color</li>
80 |           <li>background-image</li>
81 |           <li>background-repeat</li>
82 |           <li>background-attachment <br />  uncomment and check body styles</li>
83 |           <li>background-position</li>
84 |           <li>background-position</li>
85 |         </ol>
86 | 
87 |       </div>
88 | 
89 |     </div>
90 |     
91 |   </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.6.box.model.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.6.box.model.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 |     </style>
27 |     
28 |   </head>
29 | 
30 |   <body>
31 |     
32 |     <div class="container">
33 | 
34 |       <div class="sub-container">
35 | 
36 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
37 | 
38 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
39 | 
40 |         <h2>05.6. CSS box model</h2>
41 |         
42 |         <ul class="normalList">
43 |           <li>The Box Model refers to the physical properties of an elements rectangular box</li>
44 |           <li>Every element displayed is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page</li>
45 |           <li>The Bpx Model concepts helps to make layout/designing task easier</li>
46 |         </ul>
47 | 
48 |         <h2>Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)</h2>
49 |          
50 |         <ol>
51 |           <li>Margin = Space outside/around an element</li>
52 |           <li>Border = Rectangular outline/border surrouding an element/box</li>
53 |           <li>Padding = Breathing space inside an element border</li>
54 |           <li>Total width of an element: left border + left padding + content width + right padding + right border</li>
55 |         </ol>
56 | 
57 |         The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
58 |         <p align="center">
59 |           <img src="../assets/images/box-model.png" alt="CSS Box Model" title="CSS Box Model" width="400" />
60 |         </p>
61 | 
62 |       </div>
63 | 
64 |     </div>
65 |     
66 |   </body>
67 | 
68 | </html>
69 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.7.margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.7.margin.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .normalList li:nth-child(odd) {
28 |         /* margin: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
29 |         /* margin: 10px 20px;  /* pair top-bottom & right-left */
30 |         margin: 15px; /* all sides equally */
31 |         background-color: bisque;
32 |       }
33 |     </style>
34 |     
35 |   </head>
36 | 
37 |   <body>
38 |     
39 |     <div class="container">
40 | 
41 |       <div class="sub-container">
42 | 
43 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
44 | 
45 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
46 | 
47 |         <h2>05.7. CSS box model: margin</h2>
48 |         
49 |         <ul class="normalList">
50 |           <li>Margin is `Space outside/around an element`, Margin represent the `space between elements`</li>
51 |           <li>Margin values are not calculated as part of an elements total width</li>
52 |           <li>The margins does `not have a background-color`, it is `completely transparent`</li>
53 |           <li>Margin can be defined either to Top, Right, Bottom, Left or to each side of an element</li>
54 |         </ul>
55 | 
56 |         <h2>Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)</h2>
57 |          
58 |         <ol>
59 |           <li>Margin = Space outside/around an element</li>
60 |           <li>Border = Rectangular outline/border surrouding an element/box</li>
61 |           <li>Padding = Breathing space inside an element border</li>
62 |           <li>Total width of an element: left border + left padding + content width + right padding + right border</li>
63 |         </ol>
64 | 
65 |         The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
66 |         <p align="center">
67 |           <img src="../assets/images/box-model.png" alt="CSS Box Model" title="CSS Box Model" width="400" />
68 |         </p>
69 | 
70 |       </div>
71 | 
72 |     </div>
73 |     
74 |   </body>
75 | 
76 | </html>
77 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.8.padding.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 |   <head>
 5 | 
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 |     <title>05.8.padding.html</title>
10 | 
11 |     <!-- internal style -->
12 |     <style>
13 |       /* css selector: { property:value; } */
14 |       body {
15 |         margin: 0px;
16 |         padding: 0px;
17 |       }
18 | 
19 |       .container {
20 |         background-color: burlywood;
21 |         width: 80%;
22 |         padding: 20px;
23 |         border:5px solid #c5760f;
24 |         margin: 20px auto;
25 |       }
26 | 
27 |       .normalList li:nth-child(odd) {
28 |         /* padding: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
29 |         /* padding: 10px 20px;  /* pair top-bottom & right-left */
30 |         padding: 15px; /* all sides equally */
31 |         background-color: bisque;
32 |       }
33 |     </style>
34 |     
35 |   </head>
36 | 
37 |   <body>
38 |     
39 |     <div class="container">
40 | 
41 |       <div class="sub-container">
42 | 
43 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
44 | 
45 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
46 | 
47 |         <h2>05.8. CSS box model: padding</h2>
48 |         
49 |         <ul class="normalList">
50 |           <li>Padding is the `breathing space inside an element border` which holds the content aways from edge/border and allows readibility</li>
51 |           <li>CSS Padding property is used to define the space between the element content and the element border</li>
52 |           <li>`Padding is inside` and Margin is outside</li>
53 |           <li>Padding can be defined either to Top, Right, Bottom, Left or to each side of an element</li>
54 |         </ul>
55 | 
56 |         <h2>Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)</h2>
57 |          
58 |         <ol>
59 |           <li>Margin = Space outside/around an element</li>
60 |           <li>Border = Rectangular outline/border surrouding an element/box</li>
61 |           <li>Padding = Breathing space inside an element border</li>
62 |           <li>Total width of an element: left border + left padding + content width + right padding + right border</li>
63 |         </ol>
64 | 
65 |         The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
66 |         <p align="center">
67 |           <img src="../assets/images/box-model.png" alt="CSS Box Model" title="CSS Box Model" width="400" />
68 |         </p>
69 | 
70 |       </div>
71 | 
72 |     </div>
73 |     
74 |   </body>
75 | 
76 | </html>
77 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/5. Common CSS Concepts/05.9.border.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 |   <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9 |     <title>05.9.border.html</title>
 10 | 
 11 |     <!-- internal style -->
 12 |     <style>
 13 |       /* css selector: { property:value; } */
 14 |       body {
 15 |         margin: 0px;
 16 |         padding: 0px;
 17 |       }
 18 | 
 19 |       .container {
 20 |         background-color: burlywood;
 21 |         width: 80%;
 22 |         padding: 20px;
 23 |         border:5px solid #c5760f;
 24 |         margin: 20px auto;
 25 |       }
 26 | 
 27 |       .border-style-ilst li {
 28 |         font-weight: bold;
 29 |         margin-top: 20px;
 30 |         padding: 10px;
 31 |       }
 32 | 
 33 |       .border-style-ilst li:nth-child(1){
 34 |         border: 2px solid brown;
 35 |       }
 36 | 
 37 |       .border-style-ilst li:nth-child(2){
 38 |         border: 2px dashed brown;
 39 |       }
 40 | 
 41 |       .border-style-ilst li:nth-child(3){
 42 |         border: 2px dotted brown;
 43 |       }
 44 | 
 45 |       .border-style-ilst li:nth-child(4){
 46 |         border: 5px double brown;
 47 | 
 48 |         /* border-color: brown;
 49 |         border-style: double; */
 50 |       }
 51 | 
 52 |       .border-style-ilst li:nth-child(5){
 53 |         /* border-style: ridge; */
 54 |         border: 5px ridge brown;
 55 |       }
 56 | 
 57 |       .border-style-ilst li:nth-child(6){
 58 |         /* border-style: groove; */
 59 |         border: 5px groove brown;
 60 |       }
 61 | 
 62 |       .border-style-ilst li:nth-child(7){
 63 |         border-color: brown;
 64 |         border-style: solid dashed double dotted ;
 65 |       }
 66 | 
 67 |       .border-style-ilst li:nth-child(8){
 68 |         border:2px solid brown;
 69 |         border-radius: 15px;
 70 |       }
 71 | 
 72 |       .border-style-ilst li:nth-child(9){
 73 |         padding: 20px;
 74 |         border:2px solid brown;
 75 |         border-radius: 100px 0px;
 76 |         background-color: bisque;
 77 |       }
 78 |       
 79 |       .colors-channel-logo, .colors-channel-logo div {
 80 |         width: 100px;
 81 |         height:100px;
 82 |         border-radius: 100% 0%;
 83 |         position: relative;
 84 |       }
 85 | 
 86 |       .colors-channel-logo {
 87 |         background-color: #7d2792;
 88 |       }
 89 | 
 90 |       .colors-channel-logo div {
 91 |         width: 80px;
 92 |         height:80px;
 93 |         background-color: #ea008a;
 94 |         top: 20px;
 95 |       }
 96 | 
 97 |       .colors-channel-logo div  div{
 98 |         width: 60px;
 99 |         height:60px;
100 |         background-color: #f98900;
101 |       }
102 |     </style>
103 |     
104 |   </head>
105 | 
106 |   <body>
107 |     
108 |     <div class="container">
109 | 
110 |       <div class="sub-container">
111 | 
112 |         <h1 class="heading-text" id="mainHeadingText">5. Common CSS Concepts</h1>
113 | 
114 |         <p class="para-text" id="mainParaText">There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS. </p>
115 | 
116 |         <h2>05.9. CSS box model: border</h2>
117 |         
118 |         <ul class="normalList">
119 |           <li>Border defines the `outside edge` of an element </li>
120 |           <li>Widely used to define/apply `decorative effects/visual seperation` to an element</li>
121 |           <li>Border of an element goes around the padding and content</li>
122 |           <li>Borders are defined with 3 properties: `border-width, border-style, border-color, border-radius`</li>
123 |           <li>Border can be defined either to Top, Right, Bottom, Left or to whole element </li>
124 |         </ul>
125 | 
126 |         <h2>Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)</h2>
127 |          
128 |         <ol>
129 |           <li>Margin = Space outside/around an element</li>
130 |           <li>Border = Rectangular outline/border surrouding an element/box</li>
131 |           <li>Padding = Breathing space inside an element border</li>
132 |           <li>Total width of an element: left border + left padding + content width + right padding + right border</li>
133 |         </ol>
134 | 
135 |         <ul class="border-style-ilst">
136 |           <li>border: solid</li>
137 |           <li>border: dashed</li>
138 |           <li>border: dotted</li>
139 |           <li>border: double</li>
140 |           <li>border: ridge</li>
141 |           <li>border: groove</li>
142 |           <li>border: border-style:multiple type border</li>
143 |           <li>border: border-radius: rounded corner</li>
144 |           <li>border: border-radius: rounded corner: design</li>
145 |         </ul>
146 | 
147 |         <h3>Colors channel logo created with border-radius</h3>
148 |         <div class="colors-channel-logo">
149 |           <div>
150 |             <div></div>
151 |           </div>
152 |         </div> <br />
153 | 
154 |         The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
155 |         <p align="center">
156 |           <img src="../assets/images/box-model.png" alt="CSS Box Model" title="CSS Box Model" width="400" />
157 |         </p>
158 | 
159 |       </div>
160 | 
161 |     </div>
162 |     
163 |   </body>
164 | 
165 | </html>
166 | 


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/assets/images/box-model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css3-fundamentals-tutorial/0cc7b2411094a41a7ce60b260a037dde228353d6/_examples-css3-fundamentals/assets/images/box-model.png


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/assets/images/browers_all_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css3-fundamentals-tutorial/0cc7b2411094a41a7ce60b260a037dde228353d6/_examples-css3-fundamentals/assets/images/browers_all_2.png


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/assets/images/css-selector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css3-fundamentals-tutorial/0cc7b2411094a41a7ce60b260a037dde228353d6/_examples-css3-fundamentals/assets/images/css-selector.png


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/assets/images/css3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dinanathsj29/css3-fundamentals-tutorial/0cc7b2411094a41a7ce60b260a037dde228353d6/_examples-css3-fundamentals/assets/images/css3.png


--------------------------------------------------------------------------------
/_examples-css3-fundamentals/assets/styles/03.11.1.style.css:
--------------------------------------------------------------------------------
 1 |  /* external css file - css selector: { property:value; } */
 2 | body{
 3 |   background-color: #d3d3ff;
 4 |   font-family: Arial, Helvetica, sans-serif;
 5 |   line-height: 30px;
 6 | }
 7 | 
 8 | h1 {
 9 |   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
10 |   text-decoration: underline;
11 |   text-transform: uppercase;
12 |   letter-spacing: 5px;
13 | }
14 | 


--------------------------------------------------------------------------------