Scribd Logo
Upload

Welcome to Scribd!

  • Unit 12 - Designing Using CSS

    Uploaded by

    April Joy Gonzales
    2 views12 pages

    Original Title

    Unit 12 - Designing Using CSS.pptx

    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

    Copyright:

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

    Unit 12 - Designing Using CSS

    Uploaded by

    April Joy Gonzales

    Copyright:

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

    Designing

    using css
    Topic

    ES5
    Computer Fundamentals and Programming
    Contents of this Lecture

    Here’s what you’ll find in this Lecture:

    1. Introduction to CSS – Explain what Cascading Style Sheet is.


    2. Different properties in CSS – Be familiarize with the different CSS.
    3. Applying designs to HTML using CSS – import CSS styles to HTML
    and create CSS file to modify properties of HTML.
    01.

    Introduction to CSS
    Cascading
    Style Sheet
    CSS stands for Cascading Style Sheet.
    CSS describes how HTML elements
    are to be displayed.
    Here’s how you start
    making your design
    <!DOCTYPE html>
    <html>
    <head>
    <title>CSS Example</title>
    <style>
    body{background-color:lightblue;text-align:center;}
    h1{color:blue;font-size:40px;}
    p{font-family:verdana;font-size:20px;}
    </style>
    </head>
    <body>
    <h1>My First CSS Heading</h1>
    <p>My first CSS paragraph.</p>
    </body>
    </html>
    Big letters
    Accent

    CSS Syntax
    1 60
    12 12
    3

    12
    RED OR BLACK?

    Declaration Declaration

    h1{color:blue;font-size:40px;}
    Selector Value Value
    Property Property
    DECORATIVE
    ELEMENTS

    Import a
    CSS File
    DROP
    SHADOW
    BASE LINE

    SWASH
    How to import?

    Put all the styles inside


    the style.css

    01 02 03
    Create a file style.css Use the link tag inside the head element like this:
    <link rel="stylesheet" href="style.css">
    Try this!
    HTML x CSS

    <!DOCTYPE html> body{


    <html> background-color:orange;
    <head><title>Import CSS</title> font-family:verdana;
    <link rel="stylesheet" href=".\style.css"> }
    </head>
    <body> h1{
    color:white;
    <h1>My First CSS Example</h1> }
    <p>This is a paragraph.</p>
    p{
    </body> font-size:20px;
    </html> }
    CSS id selector
    The id selector uses the id attribute of an HTML element to select a specific element.

    <!DOCTYPE html> body{


    <html> background-color:orange;
    <head><title>Import CSS</title> font-family:verdana;
    <link rel="stylesheet" href=".\style.css"> }
    </head> h1{
    <body> color:red;
    }
    <h1>My First CSS Example</h1> #me{
    <h1 id="me">My First CSS Example</h1> color:white;
    <h1>My First CSS Example</h1> }

    </body> p{
    </html> font-size:20px;
    }
    CSS class selector
    The class attribute is often used to point to a class name in a style sheet.

    <!DOCTYPE html> body{


    <html> background-color:orange;
    <head><title>Import CSS</title> font-family:verdana;
    <link rel="stylesheet" href=".\style.css"> }
    </head> h1, p{
    <body> color:red;
    <h1>My First CSS Example</h1> }
    <h1 id="me">My First CSS Example</h1> #me{
    <h1 class="c1">My First CSS Example</h1> color:white;
    }
    <p>Another CSS Example</p> .c1{
    <p>Another CSS Example</p> font-family:"Time New Roman";
    <p class="c1">Another CSS Example</p> font-style:italic;
    </body> }
    </html>
    p{
    font-size:20px;
    }
    TOP LINE

    Thanks!
    DIFFERENT
    ORNAMENTS

    You might also like