Showing posts with label Coding. Show all posts
Showing posts with label Coding. Show all posts

CSS2- Cascading Style Sheet Introduction by TECH grovestudies

Tech Grovestudies 

CSS / Tech Grovestuides

Ways to write CSS in HTML

There are three ways to CSS in html file .

·        Inline css

·        Internal css

·        External css

Priority Order

            Inline > Internal > External

 

Inline CSS

è Before CSS we use inline to apply style

è Not an efficient way to write

è Self contained

è Uniquely applied to each content element

Example –

            <h3 style=” color : red”> Have a great day </h3>

            <p style –“color; purple”> I make this </p>

 

Internal CSS

·        With the help of style tag we apply styles with the HTML file .

·        Redundancy is removed

·        But idea of speparation concern still lost

·        Uniquely applied on single document

·        Example –

<style>

            H1 {

            Color : red;

            }

</style>

<h3> Have a good sweet night </h3>

External CSS

·        With the help of  <link> tag in head we apply styles

·        Reference is added

·        File saved with css extension

·        Redundancy is removed

·        Idea of separation is maintained

·        Uniquely applied in each contents

Example –

            <link rel=”stylesheet” type=”text/css” href=””>

            H1 {

                        Color : red;                                                                   //.cssfile

            }

 

CSS Selectors

·        Selectors are used target and apply CSS

·        Three simple selectors

o   Element Selectors

o   Id selectors

o   Class selectors

·        Priority selectors

Id> Class> Element

Id Selectors

·        Id attributes is used to select HTML element

·        Used to target specific or unique element

·        How we do it ?

#unique

            {

            Color: red;

            }

            <H1 ID=” unique”> Hello world </p>

Firstly we select the id and then change the color property , text color to red.

And then written text in the content tag will change the color to red.

 

Class Selectors

·        Class attribute is used to select HTML element

·        Used to target specific class of element

·        How we do –

.group {

Color: red;

}

<h1 class =” group”> Heloo litty </h1>

We select the class and then changed the color property , text color to red.

Then written text in this tag content will have the text color as  red.

CSS - Cascading Style Sheet Introduction by TECH grovestudies

CSS by TECH Grovestudies

TECH Grovestudies 

CSS - Cascading Style Sheet 

CSS is a language which is used to create or style a web page. 

Contents : \

Background properties 
Color property 
Border Property 
Box Model 

Introduction 

CSS - Cascading style Sheet 
If HTML is the structure of web page then we use CSS to give look and feel of the web page. 
It is the language to make website look presentable and beautiful 
Design to make style for web. 

Breaking the CSS - 
    Cascading - Falling of Styles 
    Style : Adding design / styling to HTML tags 
    Sheets :  Writing our style in different documents 

History 

  • 1994 : First proposed by Hakon Wium Lie on 10th October. 
  • 1996 : CSS become official (Published in December ) 
  • 1997 : Created level 2 
  • 1998 : Published on 12th May 

CSS Editors 

Atom 
Brackets 
Espresso ( MAC user) 
Notepad ++ ( good for Html or CSS) 
Komodo edit 
Sublime Text 
Visual Studio Code  ( using)

Basic Structure 

Selectors  { 
                Property 1 :  value; 
                Property 2 : value ;
                Property 3 : value ;
                 } 
  • Selectors - select the element you want to target 
  • There few basic tags like  , 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 whether we apply internal or external styling. 

Comments 

  • Comments don't render on the browser 
  • Helps to understand our code better and make it readable 
  • Helps to debugging our code 
  •  Two ways to comments 
    • Single line 
    • Multiple line