Scribd Logo
Upload

Welcome to Scribd!

  • 1-3 CSS Intro 1 - 1 What Is CSS

    Uploaded by

    David Suárez Pérez
    8 views14 pages
    Cascading Style Sheets (CSS) is used to describe the presentation of HTML documents. CSS allows precise control over formatting of text, positioning of elements, and other visual aspects via style rules. There are hundreds of CSS properties that can be used to style HTML elements, and CSS can be added to HTML documents via inline styles, internal stylesheets defined in <style> tags, or external stylesheet files linked via <link> tags.

    Original Description:

    Original Title

    1-3 CSS Intro 1 - 1 What is 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
    Cascading Style Sheets (CSS) is used to describe the presentation of HTML documents. CSS allows precise control over formatting of text, positioning of elements, and other visual aspects via style rules. There are hundreds of CSS properties that can be used to style HTML elements, and CSS can be added to HTML documents via inline styles, internal stylesheets defined in <style> tags, or external stylesheet files linked via <link> tags.

    Copyright:

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

    1-3 CSS Intro 1 - 1 What Is CSS

    Uploaded by

    David Suárez Pérez
    Cascading Style Sheets (CSS) is used to describe the presentation of HTML documents. CSS allows precise control over formatting of text, positioning of elements, and other visual aspects via style rules. There are hundreds of CSS properties that can be used to style HTML elements, and CSS can be added to HTML documents via inline styles, internal stylesheets defined in <style> tags, or external stylesheet files linked via <link> tags.

    Copyright:

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

    Cascading Style Sheets (CSS) is a stylesheet language

    used to describe the presentation of a document written


    in HTML

    StyleSheets provide the browser with precise instructions


    on how to style each element we want displayed on the
    page and can affect:
    the text format - like font, size, color...
    the size and position of objects on the page

    There are literally hundreds of different properties we


    can use to style HTML elements on a webpage.
     
    http://www.csszengarden.com
    index.html
    There are many ways to add CSS 1 <!DOCTYPE>
    to your HTML, but we need to 2
    3
    <html>
    <head>
    start by creating an HTML file. 4
    5
    <title>Intro to CSS</title>
    </head>
    6 <body>
      7 <div class="highlight">
    8 Div with <b>highlight</b> class
    Let's create 3 DIVs, the first and 9
    10
    </div>

    the third one will have the 11


    12
    <div>
    Div without <b>highlight</b> class
    highlight class 13
    14
    </div>

    15 <div class="highlight">
    16 Div with <b>highlight</b> class
    17 </div>
    18 </body>
    19 </html>
    index.html
    There are many ways to add CSS 1 <!DOCTYPE>
    to your HTML, but we need to 2
    3
    <html>
    <head>
    start by creating an HTML file. 4
    5
    <title>Intro to CSS</title>
    </head>
    6 <body>
      7 <div class="highlight">
    8 Div with <b>highlight</b> class
    Let's create 3 DIVs, the first and 9
    10
    </div>

    the third one will have the 11


    12
    <div>
    Div without <b>highlight</b> class
    highlight class 13
    14
    </div>

    15 <div class="highlight">
    16 Div with <b>highlight</b> class
    17 </div>
    18 </body>
    19 </html>
    index.html
    There are many ways to add CSS 1 <!DOCTYPE>
    to your HTML, but we need to 2
    3
    <html>
    <head>
    start by creating an HTML file. 4
    5
    <title>Intro to CSS</title>
    </head>
    6 <body>
      7 <div class="highlight">
    8 Div with <b>highlight</b> class
    Let's create 3 DIVs, the first and 9
    10
    </div>

    the third one will have the 11


    12
    <div>
    Div without <b>highlight</b> class
    highlight class 13
    14
    </div>

    15 <div class="highlight">
    16 Div with <b>highlight</b> class
    17 </div>
    18 </body>
    19 </html>
    index.html
    There are many ways to add CSS 1 <!DOCTYPE>
    to your HTML, but we need to 2
    3
    <html>
    <head>
    start by creating an HTML file. 4
    5
    <title>Intro to CSS</title>
    </head>
    6 <body>
      7 <div class="highlight">
    8 Div with <b>highlight</b> class
    Let's create 3 DIVs, the first and 9
    10
    </div>

    the third one will have the 11


    12
    <div>
    Div without <b>highlight</b> class
    highlight class 13
    14
    </div>

    15 <div class="highlight">
    16 Div with <b>highlight</b> class
    17 </div>
    18 </body>
    19 </html>
    Adding CSS to the HTML

    There are three different ways you can use CSS to style your HTML:
     
    Inline styles
    Internal Stylesheet
    External Stylesheets
     
    Let’s see the difference!
     
    1 | Inline Styles

    If you're looking to add a unique style for a The example shows us changing the
    single HTML element, you can use an inline HTML body's background to red:
    style.
    index.html
    It can also be used to test different styles,
    initially, or for quick fixes, as it's much easier 1 <!DOCTYPE>
    2 <html>
    to change a single element on the page than 3 <head>
    4 <title>Intro to CSS</title>
    to find and change the source CSS file. 5
    6
    </head>
    <body style="background: red">
    7 <div class="highlight">
    8 Div with <b>highlight</b> class

    To use inline styles, add the style attribute to 9


    10
    </div>
    </body>

    the relevant tag. The style attribute can


    11 </html>

    contain any CSS property.


    1 | Inline Styles
     
      index.html
    WARNING
     
    1 <!DOCTYPE>
    2 <html>
    3 <head>
    Inline CSS has a lot of downsides, though, so 4
    5
    <title>Intro to CSS</title>
    </head>
    try to avoid using it on your projects and 6
    7
    <body style="background: red">
    <div class="highlight">
    during class. 8
    9
    Div with <b>highlight</b> class
    </div>

     
    10 </body>
    11 </html>

     
     
    2 | Internal Stylesheet

    If a single page has a unique style, you could index.html


    use an internal style sheet.
    1 <!DOCTYPE>
    2 <html>
    3 <head>
    Internal Stylesheets are defined and written in 4
    5
    <style>
    body {
    your HTML using the <style> element, inside 6
    7 }
    background: black

    the head section of an HTML page. 8


    9
    </style>
    <title>Intro to CSS</title>
    10 </head>
    11 <body>
    12 </body>
    The advantage of using internal stylesheets is 13 </html>

    that we keep all the styling declarations in one


    place.
     
    3 | External Stylesheet
      css/style.css
     
    1. Create a css folder and style.css file 1 body {
    2 background: black
    3 }
     
     
      index.html

    1 <!DOCTYPE>
    2. Link the style.css file in the HTML 2
    3
    <html>
    <head>
      4
    5
    <title>Intro to CSS</title>
    <link rel="stylesheet" href="css/style.css">
    6 </head>
    7 <body>
    8 </body>
    9 </html>
    Let’s add more stuff
     

    https://codepen.io/f3r/embed/f8160ebc20f8794c34afb547fcea6434
    PRO TIP // You can combine properties
     

    css/style.css css/style.css

    1 div { 1 div {
    2 font: 15px Arial, sans-serif; 2 border: 1px solid black;
    3 /* 3 /*
    4 font-size: 15px; 4 border-width: 1px;
    5 font-family: Arial, sans-serif; 5 border-style: solid;
    6 */ 6 border-color: black;
    7 } 7 */
    8 }

    You might also like