CompSci//Media Arts - External CSS

Starting CSS:
Internal to External

Today's Goal

Start Learning about CSS;
Moving from Internal to External.

Completed

Basics of HTML
Slides & Organization
Starting Project Research
Revisiting Portfolios
Quiz

Today

Start CSS:
From Internal to External

Upcoming

Survey
Block-based Programming

Typing Practice

Start with typing:
https://shaunwegs.github.io/2024/focs/typing/index.html

Add you screenshot to your slide for today, and keep your typing log updated.

What's CSS Again

If someone were to ask you to explain what CSS is, would you be able to give a confident and correct answer? Hopefully you're starting to feel like you have a good grasp on what CSS is and how to use it. You're probably getting there if you're not there yet.

css-overview-3.mp4

Solution to Yesterday

Let's start with the solution to yesterday's challenge.

css-solution-big.mp4

Continuing Inline

As has been previously mentioned, there are 3 primary ways to add CSS to your webpages and websites. Right now, we've worked with two of them; inline and internal.

To make our CSS apply to a whole site, when using internal, we'll have to copy and paste the internal style to each page individually.

css-next.mp4

What's next?

Go back to your 3 Web Langs website (the Builder/Artist/Wizard website). Your site should have 4 pages total.

Add some style to your 3 Web Langs site, do this using the internal style sheet method. My recommendation would be to start with the main page- figure out how you want your page to look there. Once you're happy with the style, copy the style tags and paste them into the head tags of the other three pages.

TASK PART 1

Take a video showing your improved 3 Web Langs site; show me that you've added the style tags to all 3 pages, and how your site looks now. Add this video to today's slide.

You'll need to first upload the video to your google drive, then you can use add it to your slide. See the screenshot, ask for help if you need it.

From Internal to External

The next logical step is to move from internal stylesheets to external stylesheets.

external-css.mp4

TASK PART 2

Edit your 3 Web Langs site again. Convert your internal style sheet into an external stylesheet.

Let's make another video; this time show me that you've been able to move the style out of the individual pages and instead into an external style sheet. Show me that your page still looks correct, even with the style now referenced via an external .css file.

Starting CSS:Internal to External