Starting CSS:
Starting CSS:
Inline Styles
Inline Styles
Embedded Files
Today's Goal
Today's Goal
Start Learning about CSS;
Try Inline Styles.
Completed
Basics of HTML
Slides & Organization
Starting Project Research
Revisiting Portfolios
Quiz
Today
Start learning CSS
Upcoming
Survey
Block-based Programming
New Slides for
the New Week
New Slides for
the New Week
Make a copy of these slides:
https://docs.google.com/presentation/d/1ciwYLVux_5xvoeGVrl976oaKgFbCFlDdPDjFDk3CvH8/edit?usp=sharing
In your Google Drive, you should have a shared folder for this class; it should have a folder for the 2nd Quarter in it.
Change the 1st slide to say Q2: Week 2
Revisiting the Core Languages
Revisiting the Core Languages
Before we move into block-based programming for our project, let's look a little at CSS. Before we do, let's review what the core languages are. We will continue to use HTML (and add CSS) for our project's website, so you do need to understand it.
core-langs-revisit.mp4You will often hear people say that without CSS, the web would be ugly. That simply isn't true. We were creating beautiful sites without CSS, but HTML was getting really complicated as we added more and more code related to the appearance. CSS became the preferred way to keep the two separate.
If you look at my example resume page:
https://shaunwegs.github.io/resumes/index.html
This was all created with just HTML; not exactly the boring examples the videos like to show you. You also created visuals with your own HTML pages without any CSS; so be aware that it's just not true that you can't have any style without CSS.
Starting CSS
Starting CSS
There are several ways we can work with CSS. We will look at all of these methods, but we'll start with the simplest: inline CSS aka, inline styles. Some people don't consider this to be CSS; but it's not part of the original HTML documentation, and came about with CSS. So, I consider it part of CSS, just be aware that some people don't consider it to be CSS.
Learn a bit about how to add inline style attributes below, and try it in your own documents.
inline-css-1.mp4Adding Multiple Style Properties
Adding Multiple Style Properties
There are several ways we can work with CSS. We will look at all of these methods, but we'll start with the simplest: inline CSS aka, inline styles. Some people don't consider this to be CSS; but it's not part of the original HTML documentation, and came about with CSS. So, I consider it part of CSS, just be aware that some people don't consider it to be CSS.
Learn a bit about how to add inline style attributes below, and try it in your own documents.
inline-css-2.mp4Multiple Properties
Multiple Properties
You can also add multiple style properties into one style tag; see this example here on the right.
Adding multiple properties is how you can start to create some really interesting designs and styles to your pages.
example.mp4
In the body tag here, you can see how to add a gradient as your background.
You can check out this resource from w3schools on gradients with CSS.
Today's Work
Today's Work
Play with adding different styles to either a new HTML file or one you already have from a previous task. Check out this resource from Simmons University; can you try to add some of these into your own? Maybe check out some of the border properties.
Try adding styles to the background, to h1 tags, p tags, and more. Play with adding multiple style properties to the same html tag, as shown in the videos above. Add screenshots showing your experiments to your slide for today.
Page updated
Report abuse