INTRODUCTION TO CSS
Notes Link: https://www.w3schools.com/css/css_intro.asp
Notes Link: https://html.com/css/
What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
For Example, click the link below, look to the right, and click on a different design… It’s the exact same HTML with different CSS!
http://www.csszengarden.com/001/
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file!
CSS Demo – One HTML Page – Multiple Styles!
Click this link below, look at the CSS Demo, and click on Stylesheet 1, Stylesheet2, etc… This will give us all a very good visual of what CSS actually can do.
https://www.w3schools.com/css/css_intro.asp
MOVING FORWARD, PLEASE PAY ATTENTION & STUDY/REMEMBER THIS EXACT CSS CODE FORMAT
p {
color:red;
}-The first portion says to take ALL p tags, and apply a Style to them…
-The brackets then contain all the styles that you want to apply.
-Then within those brackets you can start assigning any CSS styles you’d like… color:red; will make all p paragraph tags red!
h1 {
color:red;
font-size:100px;
}The CSS code above make all H1 tags red and 100px!
STUDY & REMEMBER THIS FORMAT ABOVE AND YOU WILL BE A CSS PRO!
Discussion 3 - Exploring CSS Styles
*Submit Discussion into D2L
Google CSS Styles, Find at least two CSS Styles that you aren’t familiar with, and Share what it can do!
Assignment 3: CSS Code Challenges
*Submit Assignment into D2L
—–Challenge 1: Complete a Minimum of 25 CSS Styles on W3Schools Website and Submit a Screenshot—–
Step 1. Visit this website: https://www.w3schools.com/css/exercise.asp
Step 2. Read Exercise 1, Use the Hint button if needed, Open a second window to look for CSS styles via Google, Write your Code, Check your Code, and Worst Case if you get stuck you can Show The Answer! If so, Make sure you still edit your code and re-check your code until it is complete.
Step 3. You will notice that Exercise 1 is now Checked Off! Now move to Exercise 2…
Step 4. Move down the list, and even feel free to skip some & explore them out of order, until you complete at least a minimum of 50 Exercises total. Many of these should only take you a few minutes. If you get stuck, try another one:)
Step 5. Upon completing at least 25 of 138 Total Exercises, take a screenshot of your browser window and submit it here into D2L.
The more you complete and understand in these simple exercises, the more valuable you will be worth down the road! CSS can easily turn into billing your time at $25/hour+ $50/hour+ $75/hour+ $100/hour+ always keep that in mind!
—–Challenge 2: Add CSS to your Win a Trip HTML Page—–
Step 1: Find your HTML Code from our last assignment, and “fork” a copy of the code in CodePen with a new title, such win-a-trip-with-css-code.
Step 2: Add the following CSS into your webpage:
A) Give your website a new background color.
B) Change all of the text on your website to a very dark gray, but not black.
C) Add a new font family to all of the text on your website.
D) Remove the bullet points from your list.
E) Add a class name to your image called fullwidth with a width property of 100%, however also set a max-width property of 500px so the image doesnt get too large on big screens.
F) Turn your Sign Up link into a button! Add a class to your Sign Up Now <a> tag called button with a new button class added in your CSS code using properties such as:
color:white;
padding:20px;
border:2px solid black;
background-color:red;
G) Change the hover background color of your new button, so that when you roll over the button, the background changes to a different color!
H) Add at least 3 of your own styles to the page as well that you can share with our class.
Make sure you review all of your CSS code and make sure you are using selectors : and ; correctly!
When finished, please submit a link to your code on CodePen!
Thank you and Good Luck! This is a HUGE challenge to get through and will help set the tone for the rest of your web career in the future!
Sample Student Work
