القائمة الرئيسية

الصفحات

تعديل المشاركة

css

(0)


What is CSS

 ● CSS stands for Cascading Style Sheets

 ● If HTML is the structure of the house then CSS is the look and feel of the house 

● It’s the language to make our web pages presentable 

● Designed to make style sheets for web 

● Now let’s try to break the acronym: Cascading: Falling of Styles Style: Adding designs/Styling our HTML tags Sheets: Writing our style in different documents


Basic Structure Selector 

{ Property1 : value; Property2 : value; Property3 : value; } 

● Selector: selects the element you want to target

 ● There are few basic selectors like tags, id’s, and classes 

● All forms this key - value pair 

● Keys : properties(attributes) like color, font-size, background, width, height,etc

 ● Value : values associated with these properties 

● Always remains same whether we apply internal or external styling 



Comments 

don’t render on the browser 

● Helps to understand our code better and makes it readable. 

● Helps to debugging our code 

● Two ways to comment: 

○ Single line

 ○ Multiple line Comments


Different ways to Write CSS

 ● There are 3 ways to write Css in our HTML file.

 ○ Inline Css

 ○ Internal Css 

○ External Css 

● Priority order

 ○ Inline > Internal > External


Inline CSS 

● Before Css this was the only way to apply styles

 ● Not an efficient way to write as it has lot a redundancy

 ● Self contained 

● Uniquely applied on each element

 ● Idea of separation of concerns was lost


Internal CSS 

● With the help of style tag we can apply styles within the HTML file 

● Redundancy is removed

 ● But idea of separation of concerns still lost

 ● Uniquely applied on single document 

● Example: < style> 

h1{ color:red; }


External CSS 

● With the help of tag in head tag we can apply styles

 ● Reference is added

 ● File saved with .css extension 

● Redundancy is removed

 ● Idea of separation of concerns is maintained 

● Uniquely applied on each document 

● Example: 

h1{ color:red; //.css file }

 

CSS Selectors


 ● Selector are used target elements and apply Css
 ● Three simple selectors 
○ Element Selector 
○ Id Selector
 ○ Class Selector 
● Priority of Selectors Id > Class>Element

Element Selector


 ● Used to select HTML elements by its name
 ● How we do it h1 { Color: red; }
 We selected the heading tag and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color as red 

ID Selector 


● Id attribute is used to select HTML element 
● Used to target specific or unique element 
● How we do it #unique { Color: red; }

Hi

We selected id and then changed the color property i.e text color to red. Now whatever is written in this tag (content) will have the text color as red


Class Selector

 ● Class attribute is used to select HTML element

 ● Used to target specific class of element 

● How we do it .group { Color: red; }


Universal Selector 

● Wild card character

 ● Used to target specific all the elements

 ● How we do it * { Color: red; }


Group Selector


 ● Group selector minimizes code
 ● Used to target specific group of elements 
● How we do it h1,p { color: red; }



Descendant Combinator Selector


● Combine two or more selectors
● How we do it
<div id="out">
<div class="in“>Hi </div>
</div>
We selected class inside id then changed the color property i.e text
color to red. Now whatever is written (content) will have the text color
as red
#out .in {
color: red;
}


Child Combinator Selector


● Combine two or more selectors like Descendant
● It only targets immediate child.
● How we do it
<div id="out">
<div class="in“>Hi </div>
</div>
We selected class inside id then changed the color property i.e text
color to red. Now whatever is written (content) will have the text color
as red
#out > .in {
color: red;
}

Pseudo-class Selector


 ● Used to target state of element 
● How we do it p : hover { Color: red; }


CSS Color


 ● There are different colouring schemes in CSS 

● 2 widely used techniques are as follows

 ○ RGB

 ■ This starts with rgb and takes 3 parameter 

■ 3 parameter basically corresponds to red, green and blue 

■ Value of each parameter may vary from 0 to 255. 

■ Eg: rgb(255,0,0); means color red 

○ HEX 

■ Hex code starts with # and comprises of 6 numbers which is further divided into 3 sets 

■ Sets basically corresponds to Red, Green and Blue 

■ A single set value can vary from 00 to ff


CSS Background


 ● There are different ways by which CSS can have effect on HTML elements

 ● Few of them are as follows: 

○ Color - used to set the color of the background

 ○ Repeat - used to determine if image has to repeat or not and if it is repeating then how it should do that 

○ Image - used to set image as the background 

○ Position - used to determine the position of the image 

○ Attachment - It basically helps in controlling the mechanism of scrolling

 
CSS Background


 Demo html{ background: #ff9900; } p{ background: url("https://encryptedtbn0.gstatic.com/images?q=tbn%3AANd9GcRT8t-o6oUJE9YRhimOvTU2TSH7vlBnRWBN554_rX30dZah466&usqp=CAU"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }

CSS Border


 ● Helps in setting up the border for HTML elements 
● There are 4 properties that can help in setting up of border: 
○ Width - sets the width of the border 
○ Style - sets the style of border; Eg: solid, dashed etc. 
○ Color - sets the color of the border 
○ Radius - determines the roundness of the border 
● You can set the border for specifically top, right, bottom and left 
● We can also club top and bottom together and same goes for left and right
 ○ Eg: border-width: 2px 5px; sets top and bottom 2px; left and right 5px 
● Border can also be set in a single line 
○ Eg: border : 2px solid blue; 


CSS Border 


Example p{ border-style: solid; border-color: blue; border-width: 2px 5px; border-radius: 10%; }

Box Model 


● Every element in CSS can be represented using BOX model 
● It helps developer to develop and manipulate the elements 
● It consist of 4 edges 
○ Content edge - It comprises of the actual content 
○ Padding edge - It lies in between content and border edge 
○ Border edge - Padding is followed by the border edge 
○ Margin edge - It is outside border and controls margin of the element
● Example: #styled{ border: 2px solid blue; margin: 5px; padding: 20px; width:20px; height:20px;


 





Commentaires

Enregistrer un commentaire

Merci pour ton message 🙂

Connectez-vous pour laisser un commentaire

التنقل السريع