Scribd Logo
Upload

Welcome to Scribd!

  • 2,3,4,5 HTML and CSS

    Uploaded by

    Andres R. Bucheli
    3 views8 pages

    Original Title

    2,3,4,5 HTML AND CSS

    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
    3 views8 pages

    2,3,4,5 HTML and CSS

    Uploaded by

    Andres R. Bucheli

    Copyright:

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

    SECTION 2: INTRODUCTION TO HTML

    <center>
    </center>

    <hr size="3" noshade>

    SECTION 3: INTERMEDIATE HTML

    <table cellspacing="10">
    <tr>
    <td>iOS Development</td>
    <td>⭐⭐⭐⭐⭐</td>
    </tr>
    <tr>
    <td>Web Development</td>
    <td>⭐⭐⭐⭐⭐</td>
    </tr>
    <tr>
    <td>Photography</td>
    <td>⭐⭐</td>
    </tr>
    </table>

    SECTION 4: INTRODUCTION TO CSS

    INLINE:

    <body style=”background-color: blue;”>

    INTERNAL:
    <style>
    body {
    background-color: blue;
    }
    </style>
    EXTERNAL:
    Create a styles.css file and link to that from index.html

    <link rel=”stylesheet” href=”/css/master.css”>

    ANATOMY:
    selector { property : value; }

    SELECTORS:
    class: When you need to style a group of related
    elements.
    id: Use when an element is only a single one.

    And id needs to be unit.


    class can be used for many elements.

    An element can have more than one class, but only ond ID.

    Pseudoclass:
    Pseudoclasses start with :

    :hover → It’s very widely used.

    SECTION 5: INTERMEDIATE CSS

    FAVICONS:

    Icons for websites.

    <div> → Don’t do anything unless you use css with it.

    A div is a content division element.

    Remember always that the browser introduces a default


    margin.
    When you set a property to 0, you don’t need to especify
    the units. For example:

    h1 {
    margin-top: 0;
    }

    Website styling is based in a box model.


    Padding: Space of an element inside a box.
    Margin: Space of the box in relation with other elements.

    Display: Block, Inline, Inline-Block, None.

    By default some elements are block displayed. These


    elements take the whole widht of the screen.

    Common Block Elements:


    Paragraphs (<p>)
    Headers (<h1> through <h6>)
    Divisions (<div>)
    Lists and list elements (<ol>, <ul>, and <li>)
    Forms (<form>)

    These types of elements block other elements for occuring


    in the same line.

    Other elements like for example <span> are only as wide


    as it needs to be.

    Common Inline Elements:


    Spans (<span>)
    Images (<img>)
    Anchors (<a>)

    With inline elements is impossible to change the width.


    Nevertheless is possible to display block elements like
    inline elements with the display property:

    Ex:
    p {
    display: inline;
    }

    It’s possible to present inline elements like block


    elements with display: block, but that won’t allow them to
    be in the same line (for example in the case of span
    elements)
    span {
    display: block;
    }
    If I want an element that occuppies the same line but at
    the same time I can set the width, I need to use another
    property: display: inline-block;

    This is kinda images work. We can treat images as if they


    are inline-block elements.

    Example:

    p {
    display: inline-block;
    }

    The last one is display: none → This gets rid of the


    element. It removes the element from the website.

    Other way to hide elements is for example:

    span {
    visibility: hidden;
    }

    This is going an element disappear, but it keeps the


    original position an all other elements still keep their
    positions in relation to the hidden element.

    Even without CSS, there are some positioning by default.


    There are some rules:

    1. Content is everything.
    The content determines the width and height of the boxes.

    2. Order comes from code.


    The rendering comes from the order of the code.
    <h1> </h1>
    <p></p>
    <p></p>
    <img>

    3. Children sit on parents.


    <div>
    <h1> a progammer</h1>
    </div>

    The children are shown on the front.

    Position:
    Static
    Relative
    Absolute
    Fixed

    Static: By default, go along with the html rules and keep


    to the default html flow.
    Relative: Allow us to position the element that we select,
    relative to how it would have been positioned had it been
    static.

    Coordinates: Top, bottom, left, right.

    Absolute: We position the element relative to its parent.


    Ex:

    div {
    position: relative
    }

    img {
    position: absolute
    right: 30px;
    }

    This is a right margin of 30 px between the image and the


    div that is the parent.

    Fixed: The element stays exactly where it is located


    without moving. Used for example with nav bars.

    text-align: Used to center elements. This property has to


    be set inside the parent container. This will center
    everything inside, that doesn’t have a width set.

    margin: With auto, can be used too, to center an element.


    Used when there is a width set.

    font-family: Has five main groups: cursive, fantasy


    inherit, monospace, sans-serif, serif.

    • sans-serif: without decoration.


    • serif: with decoration.
    • monospace: all leters take the same amount of space.
    • cursive: DON’T USE THIS.
    • fantasy: DON’T USE THIS.

    For most browsert the default serif is times and the


    default sans-serif is arial.

    The next example especifies a specific type of sans-serif.

    font-family: verdana, sans-serif;

    If the browser doesn’t find verdana, it sets the text to


    the default sans-serif.

    WEB SAFE FONTS:


    Fonts that most of the operating systems will be able to
    render correctly.

    But no font is totally web safe, so we need fallbacks.

    We can go to → css font stack and copy a set of fallbacks.

    Example:

    font-family: "Helvetica Neue", Helvetica, Arial, sans-


    serif;

    If I want that everybody see my design exactly as I designed


    it:

    In this case, we need to use font embeding. This allows


    to program the font isnted of presuming that people’s
    browser already have it.

    Use GOOGLE FONTS: Select the fonts that you like and copy
    the link in the html file.
    Ex:
    <link
    href="https://fonts.googleapis.com/css2?family=Merriwea
    ther&family=Montserrat&family=Sacramento&display=swap"
    rel="stylesheet">

    Then in the css file, you just use:


    1. font-family: 'Sacramento', cursive;

    font-size: Remember to don’t use always pixels and use


    percentages and em if you want a dynamic font-size.

    em → width of the capital letter M.

    1 em = 16px = 100%
    90px = 5.625em

    Units in em and % are inheritated from the container. →


    To avoid this in CSS3 there is something called the rem →
    The root em (Ignores all the parent settings).

    It’s highly recommended to use always rem.

    float: left; Allows to align elements to the left for


    example (or to the right) and to wrap a paragraph around
    the element.

    Only use float when really necessary and for what is meant.
    Don’t use it for positioning. Only use this for wrapping
    text.

    clear: left; This property and value deletes the previous


    float property from the element in which it is applied.

    You might also like