Scribd Logo
Upload

Welcome to Scribd!

  • CSS Notes

    Uploaded by

    arundakhore123
    3 views7 pages
    We want this summary for editing purposes

    Original Title

    CSS NOTES

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    We want this summary for editing purposes

    Copyright:

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

    CSS Notes

    Uploaded by

    arundakhore123
    We want this summary for editing purposes

    Copyright:

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

    1.

    What is css

    CSS stands for Cascading Style Sheets CSS is the language we use to style an
    HTML document. CSS describes how HTML elements should be displayed.

    2. Css syntax
    Selector {
    Propetiy : value ;
    }
    Exa.
    p{
    color: red;
    text-align: center;
    }

    There are three ways of inserting a style sheet:

     External CSS
     Internal CSS
     Inline CSS

    External CSS

    With an external style sheet, you can change the look of an entire website by
    changing just one file!

    Each HTML page must include a reference to the external style sheet file inside
    the <link> element, inside the head section.

    <head>
    <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    </body>
    </html>

    In "mystyle.css" file

    h1 {
    color: navy;
    }
    Internal CSS

    An internal style sheet may be used if one single HTML page has a unique style.

    The internal style is defined inside the <style> element, inside the head section

    <html>
    <head>
    <style>
    h1 {
    color: maroon;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    </body>
    </html>
    Inline CSS

    An inline style may be used to apply a unique style for a single element.

    To use inline styles, add the style attribute to the relevant element. The style attribute
    can contain any CSS property.

    <body>
    <h1 style="color:blue ; text-align:center;">
    This is heading
    </h1>
    </body>

    Type of selectors

    CSS selectors are used to "find" (or select) the HTML elements you want to style.

    We can divide CSS selectors into five categories:

    a) Element selector
    b) Id selector
    c) Class selector
    d) Universal selector
    element Selector
    The element selector selects HTML elements based on the element name.
    In html file,
    p{
    text-align: center;
    color: red;
    }
    CSS id Selector

    The id selector uses the id attribute of an HTML element to select a specific element.

    The id of an element is unique within a page, so the id selector is used to select one
    unique element!

    To select an element with a specific id, write a hash (#) character, followed by the id of
    the element.

    In html file,

    <p>this is paregraph 1</p>


    <p id=”para2”>this is paregraph 2</p>

    In css file,

    #para2 {
    text-align: center;
    color: red;
    }
    The CSS class Selector

    The class selector selects HTML elements with a specific class attribute.

    To select elements with a specific class, write a period (.) character, followed by the
    class name.

    <h1 class="center">Red and center-aligned heading</h1>


    <p class="center">Red and center-aligned paragraph.</p>

    In css file,
    .center {
    text-align: center;
    color: red;

    The CSS Universal Selector

    The universal selector (*) selects all HTML elements on the page.

    *{
    text-align: center;
    color: blue;
    }

    3. Css font properties with example

     font-family

    In CSS, we use the font-family property to specify the font of a text.

    p{
    font-family: "Times New Roman", Times, serif;
    }

    font style

    The font-style property is mostly used to specify italic text.

    p{
    font-style: normal;
    }

    Font Size

    The font-size property sets the size of the text.

    p{
    font-size: 40px;
    }

     font-weight

    Specifies the weight means thickness of a font

    p{
    font-weight: normal/bold;
    }
    4. Css text properties with example
    a. Text Color
    Specifies the color of text
    h1 {
    color: green;
    }

    b. Text Alignment
    The text-align property is used to set the horizontal alignment of a text.
    h1 {
    text-align: center/left/right;
    }

    c. Text Decoration
    The text-decoration-line property is used to add a decoration line to
    text.
    h1 {
    text-decoration-line: overline/line-through/underline;
    }
    d. Text Transformation
    The text-transform property is used to specify uppercase and
    lowercase letters in a text.
    p{
    text-transform: uppercase/lowercase/capitalize;
    }
    e. Text spacing
    p{
    letter-spacing: 5px;
    line-height: 0.8;
    word-spacing: 10px;
    }
    f. Text shodow

    The text-shadow property adds shadow to text.

    In its simplest use, you only specify the horizontal shadow (2px) and the vertical
    shadow (2px):
    h1 {
    text-shadow: 2px 2px;
    }

    5. Css Box properties

    The CSS box model is essentially a box that wraps around every HTML element.
    It consists of: borders, padding, margins, and the actual content.

    Content - The content of the box, where text and images appear

    Padding - Clears an area around the content. The padding is transparent

    Border - A border that goes around the padding and content

    Margin - Clears an area outside the border. The margin is transparent

    p{
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
    }

    6. CSS Rounded Corners

    With the CSS border-radius property, you can give any element "rounded corners"

    In html file,

    <p id="rcorners1">Rounded corners!</p>


    In css file,
    #rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
    }

    7. CSS Transitions

    CSS transitions allows you to change property values smoothly, over a given duration.

    It contain 3 properties

     transition-delay
     transition-duration
     transition-timing-function

    p
    {
    transition: width .35s ease-in-out;
    }

    You might also like