Scribd Logo
Upload

Welcome to Scribd!

  • CSS1

    Uploaded by

    creatorcoder268
    2 views5 pages

    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

    Copyright:

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

    CSS1

    Uploaded by

    creatorcoder268

    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

    CSS ( Cascading Style Sheet )

    CSS stands for Cascading Style Sheet . It describes how HTML elements are to
    be displayed on screen, paper, or in other media . It saves a lot of work. It can
    control the layout of multiple web pages all at once . External stylesheets are
    stored in CSS files . It is a markup language responsible for how our web pages looks
    like. It controls the colors, fonts, and layouts of our website
    elements.
    CSS is used to define styles for your web pages, including the design, layout
    and variations in display for different devices and screen sizes.

    PROPERTIES IN CSS:
    ➢ Properties in CSS are used to assign different styles or
    behaviour to an HTML element.
    ➢ A property is an aspect of a selector.
    ➢ Example: color, border, font-style, margin, padding, etc.

    Way to insert Css :


    CSS can be defined in 3 ways-
    1. Inline CSS:
    ➢ An inline CSS is used to apply a unique style to a single HTML tag or
    element.
    ➢ It can be defined by using a style attribute inside certain HTML
    element or tag.
    ➢ It is applicable only for the single tag where it is defined.

    Inline Css - <tag style = “ property = value ; “

    2. Internal CSS:
    ➢ An internal CSS is used to define a style for a single HTML page.
    ➢ An internal CSS is defined in the <head> section of an HTML page,
    within the <style> element.
    ➢ It is applicable only for the single HTML file where it is defined.

    Internal Css - <style >


    Tagname{ property = value ; }
    </style>

    3. External CSS:
    ➢ An external CSS is the separate CSS file where the different styles
    are defined.
    ➢ It can be accessed by using the <link> element inside the <head>
    section of the HTML file.
    ➢ Multiple HTML files can use the same CSS file to access the styles
    defined in the page.

    External Css - create a file “filename.css”


    Inside css file code :- tagname { property = value ; }
    MEASUREMENTS IN CSS:
    Different types of measurements used in CSS for different purposes
    according to the user requirements.
    Following are the different measurements used in CSS-
    ➢ percentage (%)
    ➢ pixels (px)
    ➢ centimeters (cm)
    ➢ em
    ➢ inches (in)
    ➢ millimeters (mm)

    BOX MODEL :

    the term "box model" is used when talking about design and layout.
    The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
    padding, borders and margins.

    MARGIN :
    Margins are used to create space around elements, outside of any defined borders.

     margin-top
     margin-right
     margin-bottom
     margin-left

     Margin shorthand : margin: 25px 50px 75px 100px;


    o top margin is 25px
    o right margin is 50px
    o bottom margin is 75px
    o left margin is 100px

    BORDER :

    border properties allow you to specify the style, width, and color of an
    element's border.
    Border-style = dotted / dashed / solid / double / groove / ridge / inset /
    outset / none / hidden
    Border-width = value
    Border-color = color_name
    Border-radius = value
    Border-collapse = collapse
    Border-image-source : url(‘ …. ‘)
    Border-image-slice : value(with or without unit)
    Border-image-width : value
    Border-image-outset :value
    Border-image-repeat : stretch/repeat/round/space
    Border-image : source slice width outset repeat

    PADDING
    Padding is used to create space around an element's content, inside of any defined
    borders.

     padding-top
     padding-right
     padding-bottom
     padding-left

    Padding : top right bottom left


    BACKGROUND :

    The CSS background properties are used to add background effects for
    elements.
    In these chapters, you will learn about the following CSS background
    properties:
     background-color = colorname ;
     background-image = url(‘ image_path ‘ );
     background-repeat = repeat / no-repeat / repeat-x / repeat-y
     background-attachment = scroll / fixed / local
     background-position = left top / left center / right bottom / center top / x
    % y%
     background (shorthand property) = color image repeat attachment
    position
     Background-size : cover / contain / x% y%
     background-blend-mode : normal / multiple / screen / overlay /
    darken / lighten / color-dedge/ saturation / color / luminosity
    opacity : value ( between 0 to 1)
    Height : value
    Width : value

    Text
    Color : value
    Text-align
    Direction
    Unicode-bdi

    You might also like