html css

avatar
Created by
DeafeningCrackers25344

Subdecks (3)

Cards (104)

  • CSS

    Cascading Style Sheets
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • CSS

    Styles and Colors
  • CSS

    • Manipulate Text
    • Colors
    • Boxes
  • Cascading

    A style applied to a parent element will also apply to all children elements within the parent
  • Ways to add CSS to HTML

    • Inline
    • Internal
    • External
  • Inline CSS

    Used to apply a unique style to a single HTML element, using the style attribute
  • Inline CSS

    • <h1 style="color:blue;">A Blue Heading</h1><p style="color:red;">A red paragraph.</p>
  • Internal CSS

    Used to define a style for a single HTML page, defined in the <head> section within a <style> element
  • Internal CSS

    • <!DOCTYPE html>
    <html>
    <head>
    <style>
    body { background-color: powderblue; }
    h1 { color: blue; }
    p { color: red; }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
  • External CSS

    Used to define the style for many HTML pages, by linking to an external CSS file in the <head> section
  • The external style sheet can be written in any text editor, must not contain any HTML code, and must be saved with a .css extension
  • External CSS file "styles.css"

    • body {
    background-color: powderblue;
    }
    h1 {
    color: blue;
    }
    p {
    color: red;
    }
  • CSS color property

    Defines the text color to be used
  • CSS font-family property

    Defines the font to be used
  • CSS font-size property

    Defines the text size to be used
  • Use of CSS color, font-family and font-size properties

    • <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
    }
    p {
    color: red;
    font-family: courier;
    font-size: 160%;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
  • CSS border property

    Defines a border around an HTML element
  • Use of CSS border property
    • p {
    border: 2px solid powderblue;
    }
  • CSS padding property

    Defines a padding (space) between the text and the border
  • Use of CSS border and padding properties
    • p {
    border: 2px solid powderblue;
    padding: 30px;
    }
  • CSS margin property

    Defines a margin (space) outside the border
  • Use of CSS border and margin properties
    • p {
    border: 2px solid powderblue;
    margin: 50px;
    }
  • Ways to link to an external CSS file
    • Full URL
    • Relative path to current web page
    • Relative path to same folder as current page
  • You can learn much more about CSS in the CSS Tutorial
  • CSS

    Cascading Style Sheets
  • CSS

    • Saves a lot of work
    • Can control the layout of multiple web pages all at once
  • CSS

    • Styles and Colors
    • Manipulate Text
    • Colors
    • Boxes
  • CSS

    Used to format the layout of a webpage
  • CSS can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
  • Cascading

    A style applied to a parent element will also apply to all children elements within the parent
  • Ways to add CSS to HTML
    • Inline
    • Internal
    • External
  • Inline CSS

    Used to apply a unique style to a single HTML element
  • Inline CSS

    • <h1 style="color:blue;">A Blue Heading</h1>
    • <p style="color:red;">A red paragraph.</p>
  • Internal CSS

    Used to define a style for a single HTML page
  • CSS

    Cascading Style Sheets
  • CSS

    • Can control the layout of multiple web pages all at once
    • Can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more
  • Cascading

    A style applied to a parent element will also apply to all children elements within the parent
  • Ways to add CSS to HTML
    • Inline - by using the style attribute inside HTML elements
    • Internal - by using a <style> element in the <head> section
    • External - by using a <link> element to link to an external CSS file
  • Inline CSS

    Used to apply a unique style to a single HTML element