Scribd
Upload
7 views7 pages

1.simple, Combinator Selector

The document explains different methods of applying CSS, including inline, internal, and external styles, highlighting that inline CSS takes precedence when applied together. It outlines various CSS selectors, including simple selectors (tag name, class, id) and combinator selectors (descendant, direct child, adjacent sibling, general sibling). Additionally, it provides syntax examples and notes on best practices for using CSS effectively.

Uploaded by

Vithya Harini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views7 pages

1.simple, Combinator Selector

The document explains different methods of applying CSS, including inline, internal, and external styles, highlighting that inline CSS takes precedence when applied together. It outlines various CSS selectors, including simple selectors (tag name, class, id) and combinator selectors (descendant, direct child, adjacent sibling, general sibling). Additionally, it provides syntax examples and notes on best practices for using CSS effectively.

Uploaded by

Vithya Harini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

<!-- !

Inline CSS -->

It is the way of writing the css in same line.


for this we need style attribute .

<!--! Internal CSS : -->

it is the way of writing the css in same html file by


using <style> tag.

<!--? notes -->

when we will apply inline and internal css on same element.


inline css will be applyed.

<!--? syntax of selector -->

selectorName {
propertyName : value ;
propertyName : value;
.
.
.
propertyName:value
}

example :

p {
color:blue;
font-sixe: 20px;
}

<!-- ! external css -->


here we are writing our css code in separate css file.
for creating css file we need .css ext
then we have to link our css file with our html file.
for that we need <link> tag.
in <link> tag we have two attributes. (rel, href)

<link rel="stylesheet" href="./style.css">

<!--! Notes -->

if we apply inline, internal and external css on the


same element. the inline css will be applyed.

internal and external css has same priority. which one


will be at the end , that will be applyed.

<!-- ! Selectors -->

<!--? types : -->

1. Simple Selector
2. Combinator Selector
3. Pseudo Class Selector
4. Pseudo Element Selector
5. Attribute Selector
<!--! 1. Simple Selectors -->

TagName
Grouping (,)
Universal (*)
Id Name (#)
Class Name (.)

<!-- ? TagName: -->

○ To target the element based on tagname itself we


have to use
tagName selector.
○ The symbol was the tagname itself.

<!--? Grouping: -->

○ To target multiple elements at a time we have to use


a grouping
selector.
○ Whenever we need to pass similar properties for
multiple elements
we can use a grouping selector.
○ The symbol used to combine all elements is comma
(,)

<!--? Universal: -->

○ It will target all the elements in the document


including body tag too.
○ The symbol used is asterisk (*).
<!-- ? Id Name: -->

○ To target the elements uniquely we have to use an


id name.
○ In CSS id name can be duplicated also there is no
problem,
<!--! But once we moved to advanced languages,
Repetition of id name will not work. So it is highly
recommended not to use it from now on. -->
○ The Symbol used is hash (#).

<!-- ? Class Name: -->

○ To target the specific elements on the basis of


class name we have to
use class name.
○ Class attribute allows multiple identifier names in
the same attribute.
○ Class names can be repetitive also.
○ The symbol used is dot (.)
<!--! 2. Combinator Selector -->

It is a combination of 2 simple selectors.


Based on the relation b/w 2 elements the css will target
the elements.
They are:

1. Descendent Selector ( )
2. Direct Child Selector (>)
3. Adjacent Sibling Selector (+)
4. General Sibling Selector (~)

<!-- ? Descendent Selector: -->

○ It will target all the children, grandchildren , great


grandchildren and so on.
○ The symbol used is space ( ).

<!-- ? Direct Child Selector: -->

○ It will target only the children but not grandchildren


, great grandchildren and so on.
○ The symbol used is greater than ( > ).

<!--? Adjacent Sibling Selector: -->

○ It will target only the first sibling of the element.


○ The symbol used is plus ( + ).

<!-- ? General Sibling Selector: -->

○ It will target all the siblings of the element.


○ The symbol used is plus ( ~ ).

You might also like