Scribd Logo
Upload

Welcome to Scribd!

  • GMT20221119-141536 Recording

    Uploaded by

    tharindu.adikari60
    10 views6 pages
    The document contains a discussion about CSS and HTML shortcuts and selectors. Users are asking questions and the host is providing explanations and examples of different CSS selectors like id selector, class selector, and element selector. Code snippets are shared to demonstrate CSS priority, nth-child selectors, and targeting elements with structural and attribute selectors.

    Original Description:

    Original Title

    GMT20221119-141536_Recording

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains a discussion about CSS and HTML shortcuts and selectors. Users are asking questions and the host is providing explanations and examples of different CSS selectors like id selector, class selector, and element selector. Code snippets are shared to demonstrate CSS priority, nth-child selectors, and targeting elements with structural and attribute selectors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views6 pages

    GMT20221119-141536 Recording

    Uploaded by

    tharindu.adikari60
    The document contains a discussion about CSS and HTML shortcuts and selectors. Users are asking questions and the host is providing explanations and examples of different CSS selectors like id selector, class selector, and element selector. Code snippets are shared to demonstrate CSS priority, nth-child selectors, and targeting elements with structural and attribute selectors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    00:23:37 2211549 Pramod Lakruwan: Matki sar

    00:23:50 2211549 Pramod Lakruwan: මතකයි sar


    00:25:14 2211159-Damintha: sound is ok to me
    00:26:23 Ravishan - 2211600: aiye giy sthiye thibb assignment eke prshn tik
    discuss krnwd ?
    00:27:17 2211383- Kavishka: Api submit kala
    00:28:51 Adeesha-2211351: ai kiyak co
    00:29:36 Tharindu Gimras: ctrl+space
    00:29:54 Janidu: select karapu tika comment 1k karala shortcut 1 mokdda sir.
    00:30:01 Tharindu Gimras: code .
    00:32:44 sajith: ada css iwara kranwad ?
    00:33:12 Tharindu Gimras: ctrl+space - get the drop down
    ctrl+/ - commenting
    ctrl+c - copy
    ctrl+v - paste
    ctrl+x - cut
    ctrl+alt+down arrow -copy and paste down
    ctrl+alt+up arrow -ccopy and paste up
    00:34:24 2211431 Heshan: CTRL+ALT+DOWN WADA NHA NE
    00:35:17 Tharindu Gimras: ctrl+space - get the drop down
    ctrl+/ - commenting
    ctrl+c - copy
    ctrl+v - paste
    ctrl+x - cut
    shift+alt+down arrow -copy and paste down
    shift+alt+up arrow -ccopy and paste up
    00:36:41 Tharindu Gimras: <p>This is a paragraph 1</p>
    <p>This is a paragraph 2</p> <p>This is a paragraph 3</p>
    <p>This is a paragraph 4</p>
    <p>This is a paragraph 5</p>
    <p>This is a paragraph 6</p>
    00:38:50 Dilan M Jayawardana: tharaha nethuwa chuttak editor eke font size
    eka tikak size wedi karnawa da
    00:39:26 2211151 - Pasindu: ctrl+
    00:39:50 Dilan M Jayawardana: shape
    00:40:45 2211467-ROOSANDA: p
    00:40:52 2211467-ROOSANDA: P {
    00:50:55 2211383- Kavishka: Aiyo sami
    00:50:55 Dinuka - 2211230: mic off karanna
    00:51:02 2211383- Kavishka: 😄
    00:51:23 2206375: 😁
    00:51:25 Lasith Neranjana#2211602: 🤪
    00:51:26 praveen: 🤣
    00:51:28 2211360: hosta mute karanna puluwan ne da ?
    00:51:31 2211460 - Saneer Ahamed: 😂
    00:51:35 lahiru isanka: එපා වෙනවා අප්පා
    00:51:36 2211383- Kavishka: Pramod and chathuranga
    01:06:56 Dilan M Jayawardana: eka poddak dannako chat ekata
    01:07:32 Tharindu Gimras: id selector > element selector
    class selector > element selector
    01:07:47 Dilan M Jayawardana: thanks
    01:19:23 Tharindu Gimras: inline styling(blue) > embedded style sheets(green) >
    external style sheets(red)
    01:27:02 Dilan M Jayawardana: e kiyanne wedi priority ekak hambenne important
    key word thiyena ekata da
    01:27:33 Adeesha-2211351: class vs ID
    01:28:10 2211595: ethkot id ekt dana eka select wenne
    01:28:26 2211595: neda sir
    01:28:28 Dilan M Jayawardana: ethakota Sass kyna eken puluwan da
    01:29:15 Adeesha-2211351: ou ou
    01:29:18 2211595: ehema dmmoth id enne
    01:32:12 Tharindu Gimras: id selector > class selctor > element selector
    01:34:55 Tharindu Gimras: HTML
    01:34:57 Tharindu Gimras: <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <style>
    .paragraph {
    color: green;
    }
    </style>

    <title>Document</title>

    </head>

    <body>
    <!-- meka paragraph 1 -->
    <p>This is a paragraph 1</p>
    <!-- meka paragraph 2 -->
    <p>This is a paragraph 2</p>
    <!-- meka paragaph 3 -->
    <p class="paragraph" id="up1">This is a paragraph 3</p>
    <p class="paragraph" style="color:blue">This is a paragraph 4</p>
    <p class="paragraph">This is a paragraph 5</p>
    <p class="paragraph">This is a paragraph 6</p>

    </body>

    </html>
    01:35:20 Tharindu Gimras: CSS
    01:35:22 Tharindu Gimras: /* p tag eka select karanava */

    /* #up1 {
    color: purple;
    } */

    #up1 {
    color: brown;
    }

    .paragraph {
    color: red;
    }

    /* .paragraph {
    color: purple;
    } */

    /* p {
    color: yellow;
    } */
    01:36:05 2211445 - Lakshitha: sir full code wkm ewnnko
    01:36:18 2211383- Kavishka: Sir oya pdf eka denawada
    01:36:26 Tharindu Gimras: HTML-Full code
    01:36:54 2211595: count eka wadi athi
    01:36:54 Somarathna PM: okkoma ekata bha sir
    01:37:20 2211432-Eranda Nadeeshan: doc ekakta danna sir
    01:43:06 Dilan M Jayawardana: eka page ekak local host nethiwa browser eken
    open karama hari neda
    01:56:17 2211595: aiye ehtml code eka danna puluwnd
    01:56:48 2211595: na aluthen gtta kalla withrk danna
    01:57:42 Tharindu Gimras: <div id="container-header">
    <div id="container-main">
    <p>Paragraph element 1</p>
    <div id="container-sub">
    <p>Paragraph element 1 sub</p>
    </div>
    </div>
    </div>

    #container-header #container-main p {
    color: purple;
    }
    01:57:52 Tharindu Gimras: <div id="container-header">
    <div id="container-main">
    <p>Paragraph element 1</p>
    <div id="container-sub">
    <p>Paragraph element 1 sub</p>
    </div>
    </div>
    </div>

    #container-main > p {
    color: purple;
    }
    02:07:27 Tharindu Gimras: <div id="container-header">
    <div class="container-main">
    <p>Paragraph element 1</p>
    <div id="container-sub">
    <p>Paragraph element 1 sub</p>
    </div>
    </div>

    <div>
    <p>Paragraph element 2</p>
    <div id="container-sub">
    <p>Paragraph element 2 sub</p>
    </div>
    </div>

    <p class="container-main">Outer div</p>


    </div>
    02:07:31 Tharindu Gimras: CSS
    02:07:37 Tharindu Gimras: #container-header div.container-main {
    color: red;
    }
    02:08:17 Somarathna PM: files whatsapp eata danna berid aiye
    02:21:19 Tharindu Gimras: HTML
    02:21:21 Tharindu Gimras: <a href="#">This is a link</a>
    <p>This is a paragraph 1</p>
    <p>This is a paragraph 2</p>
    <h1>This is a h1 tag 1</h1>
    02:21:25 Tharindu Gimras: CSS
    02:21:37 Tharindu Gimras: /* body {
    color: red;
    } */

    * {
    color: red;
    }
    02:29:21 sachindu 2211643: link eka change krnn
    02:29:48 sachindu 2211643: eka parak visited sechcha nisa
    02:31:21 Chamudith 2211143: Use Incognito
    02:34:35 Tharindu Gimras: HTML
    02:34:37 Tharindu Gimras: <a href="https://www.google.com" target="_blank">This
    is a link</a>
    02:34:42 Tharindu Gimras: CSS
    02:34:45 Tharindu Gimras: a:link {
    color: blue;
    }

    a:visited {
    color: hotpink;
    }

    a:hover {
    color: red;
    }

    a:active {
    color: yellow;
    }
    02:42:15 Tharindu Gimras: HTML
    02:42:17 Tharindu Gimras: <p>This paragraph 1</p>
    <p>This paragraph 2</p>
    <p>This paragraph 3</p>
    <p>This paragraph 4</p>
    <p>This paragraph 5</p>
    <p>This paragraph 6</p>
    <p>This paragraph 7</p>
    <p>This paragraph 8</p>
    <p>This paragraph 9</p>
    <p>This paragraph 10</p>
    <p>This paragraph 11</p>
    <p>This paragraph 12</p>
    <p>This paragraph 13</p>
    <p>This paragraph 14</p>
    <p>This paragraph 15</p>
    <p>This paragraph 16</p>
    <p>This paragraph 17</p>
    <p>This paragraph 18</p>
    <p>This paragraph 19</p>
    <p>This paragraph 20</p>
    02:42:34 Tharindu Gimras: CSS
    02:42:36 Tharindu Gimras: p:nth-child(5) {
    color: red;
    }

    /* odd - oththe (1,2,3,4,5,6,7,9....) */


    /* even - iratte (2,4,6,8,10....) */
    /* 5n-2 = 3,8,13,18 */
    02:50:25 Tharindu Gimras: HTML
    02:50:26 Tharindu Gimras: <div>
    <h1>This is a h1_1</h1>
    <h1>This is a h1_2</h1>
    <p>This is paragraph 1</p>
    <p>This is paragraph 2</p>
    <p>This is paragraph 3</p>
    <p>This is paragraph 4</p>
    <p>This is paragraph 5</p>
    <p>This is paragraph 6</p>
    </div>
    02:50:32 Tharindu Gimras: CSS
    02:50:35 Tharindu Gimras: p:nth-of-type(2) {
    color: red;
    }

    /* :nth-of-type() - element eke type eka balanava. ee type eken thyena adala
    element eka select karanava
    :nth-child() - element eka thiyena set eke parentge childlagen adala element eka
    select karanava */
    02:52:22 2211159-Damintha: it is ok...….
    02:55:19 2211467-Roosanda: Sir images tika whatsapp ekata evanavada
    02:56:15 2211595: mekatath danna puluwnd aiye
    02:56:21 2211467-Roosanda: Sir mama phone eken log Wela inne
    03:06:44 2211445 - Lakshitha: code ek ewn sir
    03:06:50 2211595: aiye powerpoint file eka dnna puluwnd
    03:07:03 Tharindu Gimras: HTML
    03:07:06 Tharindu Gimras: <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style2.css">
    <title>Document</title>

    </head>

    <body>
    <div class="background"></div>
    </body>

    </html>

    <!--inline styling(blue) > embedded style sheets(green) > external style


    sheets(red) -->

    <!-- ctrl+space - get the drop down


    ctrl+/ - commenting
    ctrl+c - copy
    ctrl+v - paste
    ctrl+x - cut
    shift+alt+down arrow -copy and paste down
    shift+alt+up arrow -ccopy and paste up
    ctrl+s -->
    03:07:14 Tharindu Gimras: CSS
    03:07:15 Tharindu Gimras: * {
    margin: 0;
    }

    .background {
    background-color: burlywood;
    height: 100vh;
    }

    You might also like