7.7: The Basics of CSS – p5.js Tutorial

[ad_1]
This video covers the very very basics of CSS. I look at how to write a selector in a style tag as well as how to use the p5 style() function. More to come!

Support this channel on Patreon:

Contact:

Send me your questions and coding challenges!:

Link to code on Github:

p5.js:

For More p5.js Videos:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

21 responses to “7.7: The Basics of CSS – p5.js Tutorial”

  1. Sujan Dutta Avatar

    have you ever heard this song?
    "Give me some sunshine
    Give me some rain
    Give me another chance
    I wanna grow up once again….." ha ha ha

    Jokes apart, you are truly a world class teacher. Thank you for uploading these videos.

  2. Bradley Stone Avatar

    Wait so I'm using three languages at the least in p5. How many languages are just built into this thing?

  3. Topsoil Depletion Awareness Avatar

    How do I toggle the color with button?:

    var bgcolor;
    var button;
    var txt;

    function setup() {
    createCanvas(200, 200);
    bgcolor = color(50);
    txt = createP('some text');

    button = createButton('go');
    button.mousePressed(changeStyle);
    }

    function draw() {
    background(bgcolor);
    fill(255, 0, 175);
    ellipse(100, 100, 50, 50);
    }

    function changeStyle() {
    if (bgcolor === color(50)) {
    bgcolor = color(200,0,200)
    } else {
    bgcolor = color(50);
    }
    }

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style>
    body {
    padding: 0;
    margin: 0;
    text-align: center;
    }
    canvas {
    vertical-align: top;
    border-radius: 10px;
    }
    p {
    background-color: purple;
    color: white;
    padding: 8px;
    width: 50%;
    margin-right: auto; /need this bc text-align doesnt work on p here/
    margin-left: auto;
    border-radius: 10px;
    }
    </style>
    </head>
    <body>
    <h1>I am making a video</h1>
    <p>This is my essay how I love to make videos. They are my favorite thing to do. Rainbow. Rainbow. Rainbow.</p>
    </body>
    </html>

  4. iFeElGoOd63 Avatar

    Schiffy you are the best!

  5. vnder Avatar

    not sure how popular rgb() or rgba() color property is, but i prefer using it as its easier to visualize the respective color amounts

  6. k balaji Avatar

    I'd definitely pay to see that musical, D. Thanks for another awesome video.

  7. Jason Thomas Avatar

    You can use RGB values as well in CSS, or RGBA.
    ex: background-color: rgb(55, 144, 255); OR
    background-color: rbg(55, 144, 255, 0.4) with an alpha value added.

  8. Jason Thomas Avatar

    The "Cascading" in CSS, in a nutshell, means that style can be applied from multiple sources (multiple style sheets, inline styling, importing, the default styles applied by the browser), with an order of precedence when the statements of any style elements conflict with each other. I think a good way to sum it up is that you can add style to an element, and then later, restyle that same element by overriding the original. CASCADiNG!

  9. TechNerd01 Avatar

    +The Coding Train
    I need a bit of help… I want to make a circle packing program for my brother's birthday… But I want make it like it changes the image every few seconds… So I need some kind of delay mechanism. How would I exactly do that?

  10. SogMosee Avatar

    If you're watching this in the year 3000 please go get my brain out of that cryogenic thing lmao!

  11. kosmic dust Avatar

    ur zee best instructor daniel !!

  12. TheMinecrafter52 Avatar

    Your videos are great, I really enjoy learning this stuff. I've had one question ever since the beginning, how do I change the keyword highlighting ( I don't know if that is what it is called), because mine is mostly grey with the occaisional brown or pink, while yours has all different colors for more things.

  13. Julian Puppo Avatar

    I want to know how to make multiple canvas in one single html page.
    Is there any way to do this?

    Can you make a tutorial or im I asking for too much?

    I love you Daniel Shiffman. <3
    Thanks for just making processing and all that comes with it.

  14. Max Equation Avatar

    Who doesn't love padding? Javascript the musical. haha! yes Sir, I'm with you Shiffman! How do you change the canvas to % or vw/vh in order to make the dimensions responsive?

  15. Nicolay Nicolavich Avatar

    I'm Adi Wiedersheims brother. love your videos. thank you

  16. CZ Techs Avatar

    YOUR SO AWESOME!!! Thanks for everthing!!!!

  17. Nicolay Nicolavich Avatar

    You work at NYU Tisch, right?

Leave a Reply

Your email address will not be published. Required fields are marked *