Save
Busy. Please wait.
Log in with Clever
or
show password
Forgot Password?
Don't have an account?  Sign up 
Sign up using Clever
or
Username is available taken
show password


Make sure to remember your password. If you forget it there is no way for StudyStack to send you a reset link. You would need to create a new account. Your email address is only used to allow you to reset your password. See our Privacy Policy and Terms of Service.

Already a StudyStack user? Log In

Reset Password
Enter the associated with your account, and we'll email you a link to reset your password.
focusNode
Didn't know it?
click below
 
Knew it?
click below
Don't Know
Remaining cards (0)
Know
0:00
edit
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

  Normal Size     Small Size show me how

CSS - Week 1

WTWD 210 - CSS Basic Concepts, Selectors, Colors & Text

TermDefinitionExample
CSS Cascading Style Sheets body { font-family: Arial, sans-serif; }
Selector A pattern used to select the elements you want to style. h1 { color: blue; }
Property An aspect of the HTML element you want to change. color, font-size, margin
Value The setting you want to apply to a property. color: red;
Class Selector Selects elements with a specific class attribute. .class-name { background-color: yellow; }
ID Selector Selects a single element with a specific id attribute. #id-name { margin-top: 20px; }
Element Selector Selects all elements of a given type. p { line-height: 1.5; }
Universal Selector Selects all elements in the document. * { box-sizing: border-box; }
Group Selector Selects multiple elements and applies the same styles. h1, h2, h3 { margin-bottom: 0.5em; }
Descendant Selector Selects all elements that are descendants of a specified element. div p { color: blue; }
Child Selector Selects all elements that are direct children of a specified element. ul>li { font-weight: bold; }
Adjacent Sibling Selector Selects the element that is immediately preceded by a specified element. h1+p { margin-top: 0; }
General Sibling Selector Selects all elements that are siblings of a specified element. h1~p {color: green;}
Color The property used to set the color of text. color: #333;
Background-Color The property used to set the background color of an element. background-color: #f0f0f0;
Font-Family Specifies the font for the text. font-family: 'Open Sans', sans-serif;
Font-Size Specifies the size of the text. font-size: 16px;
Font-Weight Specifies the weight (or boldness) of the font. font-weight: bold;
Text-Align Specifies the horizontal alignment of text. text-align: center;
Line-Height Specifies the space between lines of text. line-height: 1.5;
Text-Decoration Specifies the decoration added to text. text-decoration: underline;
Color Values Different ways to define colors (name, hex, RGB, HSL). color: red; color: #ff0000; color: rgb(255, 0, 0); color: hsl(0, 100%, 50%);
Color Name Specifies a color using a predefined color name. color: red;
Hex Color Specifies a color using a hexadecimal value, which is a combination of six hexadecimal digits representing the red, green, and blue components of the color. color: #ff0000;
RGB Color Specifies a color using the RGB (Red, Green, Blue) color model. Each parameter (red, green, blue) defines the intensity of the color as an integer between 0 and 255. color: rgb(255, 0, 0);
HSL Color Specifies a color using the HSL (Hue, Saturation, Lightness) color model. Hue is a degree on the color wheel (0-360), saturation is a percentage (0%-100%), and lightness is also a percentage (0%-100%). color: hsl(0, 100%, 50%);
Created by: ProfJordan
Popular Computers sets

 

 



Voices

Use these flashcards to help memorize information. Look at the large card and try to recall what is on the other side. Then click the card to flip it. If you knew the answer, click the green Know box. Otherwise, click the red Don't know box.

When you've placed seven or more cards in the Don't know box, click "retry" to try those cards again.

If you've accidentally put the card in the wrong box, just click on the card to take it out of the box.

You can also use your keyboard to move the cards as follows:

If you are logged in to your account, this website will remember which cards you know and don't know so that they are in the same box the next time you log in.

When you need a break, try one of the other activities listed below the flashcards like Matching, Snowman, or Hungry Bug. Although it may feel like you're playing a game, your brain is still making more connections with the information to help you out.

To see how well you know the information, try the Quiz or Test activity.

Pass complete!
"Know" box contains:
Time elapsed:
Retries:
restart all cards