Scribd Logo
Upload

Welcome to Scribd!

  • Lesson 5 - Web Development

    Uploaded by

    Joshua Omolewa
    14 views25 pages
    The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.

    Original Description:

    Original Title

    Lesson 5 - Web Development.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    14 views25 pages

    Lesson 5 - Web Development

    Uploaded by

    Joshua Omolewa
    The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 25

    Design Foundations and styling

    pages with CSS


    Research topics
    • Foundational design principles and tools
    • How to create design mockups
    Iterative design process
    • Iterative design is the process of continual
    improvement, of a concept, prototype, design or
    product.

    • It is a cyclic approach to the development of a


    product, whereby a design is improved by frequent
    testing, client feedback, focus groups, materials
    testing, prototype testing, design development and
    evaluation, until a final refined / developed design is
    reached.
    Iterative design process
    • It differs from the linear approach to design,
    where by the designer goes through a number
    of predefined stages, one at a time, until a
    conclusive design is reached.

    • Start by writing a design problem, after


    consultation with potential clients / customers
    and stakeholders AND write a design brief.
    Iterative design process
    • Design tools are individual components of the
    Iterative Design Cycle.  They are used to help
    in the design and development of a product.

    • Sketching, model making, feedback, acting on


    feedback, design improvements, model
    making, questionnaires / surveys, are
    examples of “design tools”.
    Introduction to CSS
    • CSS stands for Cascading Style Sheets.

    • CSS is a language that describes the style of an


    HTML document.

    • CSS describes how HTML elements should be


    displayed.
    Introduction to CSS
    • When a browser reads a style sheet, it will format the HTML
    document according to the information in the style sheet.

    There are three ways of inserting a style sheet:


    • Internal style sheet
    • Inline style
    • External style sheet
    Internal style
    • An internal style sheet may be used if one single page has a unique style.
    • Internal styles are defined within the <style> element, inside the <head>
    section of an HTML page:

    <head>
    <style>
    body {
        background-color: linen;
    }

    h1 {
        color: maroon;
        margin-left: 40px;
    } 
    </style>
    </head>
    Inline style

    • 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.

    <h1 style="color:blue;margin-left:30px;">This is a
    heading</h1>
    External style sheet
    • With an external style sheet, you can change the
    look of an entire website by changing just one file!

    • Each page must include a reference to the external


    style sheet file inside the <link> element. The
    <link> element goes inside the <head> section:

    Example
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    CSS Colors

    • Colors are specified using predefined color names, or RGB, HEX, HSL,
    RGBA, HSLA values.

    Predefined Color Names:


    - In HTML, a color can be specified by using a color name.

    Examples include
    • Tomato
    • Orange
    • DodgerBlue
    • MediumSeaGreen
    • Gray
    • SlateBlue
    • Violet
    • LightGray
    CSS Colours
    Background Color
    • You can set the background color for HTML
    elements:

    <h1 style="background-color:DodgerBlue;">Hello
    World</h1>
    <p style="background-color:Tomato;">Lorem
    ipsum...</p>
    CSS Colours
    Text Color
    • You can set the color of text:
    Example
    <h1 style="color:Tomato;">Hello World</h1>

    Border Color
    • You can set the color of borders:
    Example
    • <h1 style="border:2px solid Tomato;">Hello World</h1>
    <h1 style="border:2px solid DodgerBlue;">Hello
    World</h1>
    <h1 style="border:2px solid Violet;">Hello World</h1>
    CSS Colours
    Color Values
    • In HTML, colors can also be specified using
    RGB values, HEX values, HSL values, RGBA
    values, and HSLA values:

    RGB Value
    • In HTML, a color can be specified as an RGB
    value, using this formula:
    • rgb(red, green, blue)
    CSS Colours
    HEX Value
    • In HTML, a color can be specified using a
    hexadecimal value in the form:
    • #rrggbb

    RGBA Value
    • RGBA color values are an extension of RGB color
    values with an alpha channel - which specifies the
    opacity for a color.
    • An RGBA color value is specified with:
    • rgba(red, green, blue, alpha)
    CSS Borders
    • The CSS border properties allow you to specify
    the style, width, and color of an element's
    border.
    • The border-style property specifies what kind of
    border to display.

    The following values are allowed:


    - dotted - Defines a dotted border
    - dashed - Defines a dashed border
    - solid - Defines a solid border
    CSS Borders
    • p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}

    Border Width
    • The border-width property specifies the width
    of the four borders.
    • The width can be set as a specific size (in px, pt,
    cm, em, etc) or by using one of the three pre-
    defined values: thin, medium, or thick.
    CSS Borders
    Border Width
    • The border-width property specifies the width of the four borders.
    • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
    the three pre-defined values: thin, medium, or thick.

    p.one {
        border-style: solid;
        border-width: 5px;
    }

    p.two {
        border-style: solid;
        border-width: medium;
    }

    p.three {
        border-style: solid;
        border-width: 2px 10px 4px 20px;
    }
    CSS Borders

    Border Color
    • The border-color property is used to set the color of the four
    borders.

    The color can be set by:


    • name - specify a color name, like "red"
    • Hex - specify a hex value, like "#ff0000"
    • RGB - specify a RGB value, like "rgb(255,0,0)"
    • transparent
    • The border-color property can have from one to four values
    (for the top border, right border, bottom border, and the left
    border). 
    • If border-color is not set, it inherits the color of the element.
    CSS Borders
    The border-color property can have from one to four values (for the top border, right
    border, bottom border, and the left border). 

    If border-color is not set, it inherits the color of the element.

    p.one {
        border-style: solid;
        border-color: red;
    }

    p.two {
        border-style: solid;
        border-color: green;
    }

    p.three {
        border-style: solid;
        border-color: red green blue yellow;
    }
    CSS Borders
    Border - Shorthand Property
    • There are many properties to consider when dealing with borders and to
    shorten the code, it is also possible to specify all the individual border
    properties in one property.

    The border property is a shorthand property for the following individual


    border properties:
    • border-width
    • border-style (required)
    • border-color

    Example
    p {
        border: 5px solid red;
    }
    CSS Border
    Rounded Borders
    • The border-radius property is used to add
    rounded borders to an element:

    Example
    p {
        border: 2px solid red;
        border-radius: 5px;
    }
    CSS Box Model
    • All HTML elements can be considered as
    boxes. In CSS, 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: margins, borders, padding, and the actual
    content. The image below illustrates the box
    model:
    CSS Box Model
    • Explanation of the different parts:
    • 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

    The box model allows us to add a border around elements, and to define
    space between elements. 

    Example
    • div {
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }
    Selectors
    • A selector designates exactly which element or
    elements within our HTML to target and apply
    styles (such as color, size, and position) to.

    • Selectors may include a combination of different


    qualifiers to select unique elements, all
    depending on how specific we wish to be.

    For example, we may want to select every


    paragraph on a page, or we may want to select
    only one specific paragraph on a page.

    p { ... }

    You might also like