Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    My Learning Udemy

    Uploaded by

    rashi kumawat
    The document provides information on various CSS concepts including: 1. It recommends using em over i and strong over b for accessibility and emphasizes using CSS over HTML for styling. 2. It describes different methods of applying CSS like inline, internal and external stylesheets and provides examples of each. 3. It explains CSS syntax, selectors like id and class, pseudo-classes, box model, position properties, units like em and rem, the float property and basic default rendering of HTML elements.

    Copyright:

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

    You might also like

    My Learning Udemy

    Uploaded by

    rashi kumawat
    5 views5 pages
    The document provides information on various CSS concepts including: 1. It recommends using em over i and strong over b for accessibility and emphasizes using CSS over HTML for styling. 2. It describes different methods of applying CSS like inline, internal and external stylesheets and provides examples of each. 3. It explains CSS syntax, selectors like id and class, pseudo-classes, box model, position properties, units like em and rem, the float property and basic default rendering of HTML elements.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides information on various CSS concepts including: 1. It recommends using em over i and strong over b for accessibility and emphasizes using CSS over HTML for styling. 2. It describes different methods of applying CSS like inline, internal and external stylesheets and provides examples of each. 3. It explains CSS syntax, selectors like id and class, pseudo-classes, box model, position properties, units like em and rem, the float property and basic default rendering of HTML elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    5 views5 pages

    My Learning Udemy

    Uploaded by

    rashi kumawat
    The document provides information on various CSS concepts including: 1. It recommends using em over i and strong over b for accessibility and emphasizes using CSS over HTML for styling. 2. It describes different methods of applying CSS like inline, internal and external stylesheets and provides examples of each. 3. It explains CSS syntax, selectors like id and class, pseudo-classes, box model, position properties, units like em and rem, the float property and basic default rendering of HTML elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    always prefer to use

    em tag insted of i

    strong tag instead of b

    read for both

    avoid styling using HTML

    Always use CSS

    read enctype in form attributes

    CSS: Cascading Style sheet.


    Inline CSS :
    Background color in body <body style="Background-color: Blue;">

    colorhunt.co to find Beautiful colors and


    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

    Internal CSS:
    Style tag in head

    <style>

    body

    background-color: #D8FFF1;

    </style>

    border style: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

    The border-style property may be specified using one, two, three, or four values.

    When one value is specified, it applies the same style to all four sides.

    When two values are specified, the first style applies to the top and bottom, the second to the left
    and right.
    When three values are specified, the first style applies to the top, the second to the left and right,
    the third to the bottom.

    When four values are specified, the styles apply to the top, right, bottom, and left in that order
    (clockwise).

    External CSS:
    Create a separate CSS page and link it to the HTML File.

    <link rel="stylesheet" href="C:\Users\Rashi\Desktop\Web Developement\CSS\styles.css">

    CSS Syntax
    Selector{property: value;}

    Selector: h1 , p , body, who

    Property: bg color, text color, position What

    Value: (blue, red). How

    Classes and Ids


    Id: we cannot assign same id to different tags (to identify a single element)

    #id_name{}

    Class: any class can have same name (for groups all going to behave same)

    .Class_name{}

    Pseudo class:

    Favicons (favorite Icon)


    Was an icon that show up in your browser which u have marked favorite.

    Div tag: a content division element


    allows us to divide a content in separate so we can structure each div separetly.

    Read the Box Model

    Padding:
    Margin:
    CSS Display Property
    Block
    : Take whole width of the screen and that’s why they lock out other elements.

    Ex: P, body, h, hr, list

    Hello

    Inline Display Element


    SPAN tag
    Span element is known as Inline display element.

    It doesn’t take the whole width of screen. Just the space which is required.

    Hello World

    Another ex: Img, anchor tag.

    Inline Block:
    Elements

    {Display: inline-block;}

    None
    Element

    Display: None;

    It removes the element from the website as it didn’t exist.

    Default Rules for How thing get rendered on the screen based on HTML Code.
    1. Content is everything.
    2. Order comes from HTML Code.
    3. Children Sits on Parents. <div><h1>A <span>Prog</span>ramer</h1></div>
    Position elements on Screen
    1. Static All HTML elements are static in position by default. HTML without CSS and changing
    any Position
    2. Relativeallows us to position the element we select relevant to position when it is static.
    Img
    {
    Position: relative;
    Left:30px; // Coordinates (Top,Botton,Left,Right)
    }
    i. When you move an element that has a relevant position, it doesn’t affect
    the position of anything on the screen.
    ii. When we change the coordinates property, we are taking the left where the
    image used to be and we are giving it 30px margin from the left of our
    current img.
    3. Absoluteit changes according to the instructions irrevelant to static default.
    .Red
    {
    background-color:Red;
    width:20px;
    Height:20px;
    position:absolute;
    top:40px;
    left:40px;
    }
    4. Fixed
    Top:0;
    So when we scroll the page the fixed position will be fixed on the page.

    Em in CSS
    That is the M is the width of capital letter M.

    2em == MM size.

    16px=100%=1em=1rem.

    Rem
     Ignore all the parent size, it will be the same we set.
     Always try to use rem when sizing in CSS.
    Float

    .css

    width: 25%;

    float: left;

    So the text xan be at right in the img.

    We also can use clear:left property to set the <p>text infront of image to be at the bottom.

    Clear is like anti-float.

    Only use float when it is really really necessary. Only use for wrapping text around an element.

    Don’t use it for positioning only use relative, margin and padding for positioning.

    You might also like