Basic CSS: change the color of text

Override All other styles by using Important

!important;

Style element

.red-text { color: red; }

New class under style

.thick-green-border { border-color: green; border-width: 10px; border-style: solid; }

Basic CSS: Use a media query to change a variable

:root { }

Class Declarations with inline styles

<h1 style="color: green; ">

Change the color of text

<h2 style="color;blue;">CatPhotoApp</h2> It's good practice to end inline style declaration with a ;

Font size

<style> .red-text { color: red; } p { font-size: 16px; } </style>

Selectors to style Elements

<style> h2{ color: red; } </style>

Add Borders around your elements

CSS borders have properties like style, color and width.

Use a CSS Class to Style an Element

CSS class: EX: CSS class called blue-text: within the <style> tag. Class names start with a period, and while in the HTML class attribute, the class name does not include the period. <style> .red-text { color: red; } </style> <h2 class="red-text">CatPhotoApp</h2>

Basic CSS: use CSS variables to change several elements at once

CSS variables are a way to change many CSS style properties at once by changing only one value.

Basic CSS: Inherit styles from the body element

CSS- casacading style sheet , anything applies to the upper elements goes down to the lower elements or any elements inside other elements.

Background class

Div element should have a silver background, meaning "<div silver back-ground>

Basic CSS: use Hex Code to Mix colors

EX: orange is pure red mixed with green. no blue Can be translated into #FFA500. 00- means absence of color. F is the highest number in hex code, represents the max possible brightness.

Basic CSS: use RGB values to color Elements

EX: rgb( 255, 255, 255) 0 and 225 indicates the brightness of each color.

Basic CSS: use Hex code for specific Colors

Hexadecimal code; or hex code. Are base 16 numbers, meaning it uses 16 distinct symbols. 0-9 represents the values zero to nine, and then A,B,C,D,E,F represents values ten to fifteen . Different values can also be represent colors.

Absolute vs relative units

absolute units tie to physical units of length.-it's the actual measurement on a screen, but there are some differences depending on a screen's resolution. (in, mm) Relative units: such as em or rem are relative to another length value. em- is based on the size of an element's font. if you use it to set the font- size property itself, it's relative to the parent's font-size.

pixel

border radius

Basic CSS: override styles in subsequent CSS

class override the body element's CSS. override class we can: have a class below pink text

Change image size

class="smaller-image"

Margin

controls the amount of space between an element's border and surrounding element.

padding

controls the amount of space between the element's content and its border.

Basic CSS: change a variable for a specific area

create your variable in :root They will set the value of that variable for the whole page.

Basic CSS: Create a custom CSS variable

give CSS variable a name with two hyphens in front of it and assign it a value : -- penguins-skin: gray. Replace color with this

Style class

h2 { font-family; lobster, monospace; }

Basic CSS: Override Class declarations by styling ID attributes

id attributes overrides CSS. #orange text { color: orange; } id="orange-text"

Use an id attribute to style an element

id- is not reusable and should be only applied to one element. id-also has a higher specificity( importance) than a class. put in the style #cat-photo-element { background-color: green; }

Set the id of an element

in addition to classes, each html element also have id attribute. Each element only have 1 id.

Basic CSS: prioritize one style over another

new class (. pink-text{ color: pink; } <h1 class="pink-text"

Adjust the padding of an element

properties that control the space that surrounds each HTML element: padding, margin, and border.

set the Font Family of an element

set which font an element should use, by using the font-family property

Basic CSS: Improve compatibility with Browser Fallbacks

some browsers doesn't;t recognize or support CSS of a webpage.

Import a google font

use an h2 CSS selector to change the font-put on the same line.

Basic CSS: Inherit CSS variable

when create a variable, it's available to use inside the selector. CSS variable are often defined in the :root element.

Basic CSS: attach a Fallback value to a CSS variable

when using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.