Internal CSS| CSS Selectors | Shortcuts with Emmets | Intro to HTML5

[harshitrajlnctcse]

Learning Internal CSS| CSS Selectors | Shortcuts with Emmets | Intro to HTML5

Drop your notes and learning here.

[harshitrajlnctcse]

@nikhileshyadav281199

sir how to do background color of only harshit raj by using inline css

[harshitrajlnctcse]

Post the emmet for

    <div>
        <div>
            <h1></h1>
        </div>

        <div>
            <div>
                <pre></pre>
            </div>
        </div>
    </div>

[lakshmidurgakuncha]

Emmet: div>(div>h1)+div>div>pre

[harshitrajlnctcse]

@lakshmidurgakuncha cool

[pathakdivya93]

Today’s class notes:

CSS In HTML

Types of CSS
Inline CSS
Internal CSS
External CSS

CSS Selectors
id(#) and class(.)

The HTML class attribute is used to specify a class for an HTML element.

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

Here is an example for class:

.city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; }

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.


id

The HTML id attribute is used to specify a unique id for an HTML element
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

Note: The id name is case sensitive!
Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

Example for id:

#myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }

My Header

Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page.

Example:

/* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; }

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

order of priority
Inline>Internal>External

[pathakdivya93]

output for class:

[harshitrajlnctcse]

@pathakdivya93 has summarized everything

[harshitrajlnctcse]

Everyone from FSR150423 batch. Post your Notes here like @pathakdivya93

[rhythm]

What we have learnt yesterday

Different ways to apply CSS to the HTML document-

• Inline CSS- It is used to apply a unique style for a single element.
• Internal CSS- An internal style sheet may be used if one single HTML page has a unique style.
• External CSS- With an external style sheet, you can change the look of an entire website by changing just one file!
  Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Types of CSS Selectors

• Element Selector- The element selector selects HTML elements based on the element name.

• ID Selector- The id selector uses the id attribute of an HTML element to select a specific element.
  The id of an element is unique within a page, so the id selector is used to select one unique element!
  Can be selected using the “#” symbol.

• Class Selector- The class selector selects HTML elements with a specific class attribute.
  To select elements with a specific class, write a period (.) character, followed by the class name.

Order of Priority

1. Inline CSS
2. Internal CSS
3. External CSS

Additional Notes

Why it is recommended to have a unique ID for each element while the class can be the same for many elements?

• Let’s make a box using <div> and target it through element selector.

<div class="div-class" id="div-id"></div>
<style>
  div{
    background-color: red;
    width: 100px;
    height:100px;
  }
</style>

Output-

• Now, let’s target the same div using the class selector-

<div class="div-class" id="div-id"></div>
<style>
  div{
    background-color: red;
    width: 100px;
    height:100px;
  }
  .div-class{
    background-color: green;
  }
</style>

Output-

Red color overridden by Green color.

• Now, finally let’s target through the id selector-

<div class="div-class" id="div-id"></div>
<style>
  div{
    background-color: red;
    width: 100px;
    height:100px;
  }
  .div-class{
    background-color: green;
  }
  #div-id{
    background-color: magenta;
  }
</style>

Output-

Now again, the green color is overridden by magenta.

Through the above example, we can see that id selector has the highest priority, while element selector has the lowest. Priority is fine, again why ID should be unique? Because id has a specificity score of 100, the class has 10, and the element has 1. So, if two elements has the same id, it would be nearly impossible to make them have a different style. The only way to do make them have different styles is by adding inline styles which has a specificity score of 1000(highest), which is mostly not recommended.
Reference- CSS Specificity

[knmsurajmishra001]

we use for: div>(div>h1)+div>div>pre

[harshitrajlnctcse]

@rhythm @knmsurajmishra001 Good. @nikhileshyadav281199 try to upload it again

[nikhileshyadav281199]

<h1 style="color: red;background-color: yellow; font-size: 70px;">Harshit Raj</h1>

[induapr5667]

i try this. it came out well.

[harshitrajlnctcse]

@nikhileshyadav281199 . Thanks for putting my name. Try with your name It would look even better Good going

[harshitrajlnctcse]

@induapr5667 Hope now you are getting why and when we use semantic tags. Thanks my name BTW