auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait
CSS Lists
The list-style property is a shorthand property, which is used to set all the list properties in one declaration.
CSS Tables
Firstname
Lastname
Savings
Peter
Griffin
$100
Lois
Griffin
$150
Joe
Swanson
$300
Cleveland
Brown
$250
This
Little
Piggy
Went
To
Market
This
Little
Piggy
Went
To
This
Little
Piggy
This
Little
Piggy
Went
To
Little
Piggy
Went
To
The Display Property
The display property specifies if/how an element is displayed. Commented are block & inlinne elements:
CSS gives the ability to change the way these elements are displayed however. Display:Block or Inline.. Block level takes the entire width of the screen.
This is a max of 500 pixel and unmanaged
This has a max of 500 piels and is managed b screen size
Positioning
Position is static by defualt. Use CSS to change it up. Below are some ways to do so: >> position: relative; is positioned relative to its normal position. >> position: fixed; is positioned relative to the viewport (mr clippy br)
>> position: absolute; is positioned relative to the nearest positioned ancestor (div in div
or w/e is parent, great for adding text in an image (does it work with animation?)) >> position: sticky; is positioned based on the user's scroll position (sim to fixed);
Overlapping elements
>> The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). z-index: -1;
Overflow
The option is to tell the browser whether the block element will need scroll bars and or to have the ability, or not, to reach beyond the blocks height. The overflow property only works for block elements with a specified height probably wont use this
since most browsers are phones now and scroll bars arent very cool.
Floating
The float property is used for positioning and formatting content: for instance this photo can float to the right
Most commonly the left float is used. It just looks more proper i guess. The image can "float" but will only be floating next to the text that comes after the
image element. sksjakdjalsjflkasjdlkjaslkfjaslkjfdalksjdkljsalkdjaslkhfha sa dljaksd laskjd aslkjd alkj
Center an image you must set it to a block, set right to float AND set left to float. Quite a bit
Pseudo Classes
A pseudo-class is used to define a special state of an element. For example, it can be used to:
Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Example:
Pseudo-classes can be combined with CSS classes: a.highlight:hover { color: #ff0000; }
the CSS class highlight is being combined with the Pseudo class Hover. These classes are not case sensistive.
To use these just pick the element type and choose the class. (DIV:HOVER)
Pseudo-Element
selector::pseudo-element { property: value; }
To select the first line in all paragraphs for example would be:
p::first-line { color: #ff0000; font-variant: small-caps; }
In a more rare case but cool none the less: if a USER selects soething on your page you can change the way it highlights, or whatever. ::selection { color: red; background: yellow; }
We dont want to make the website static, we should try and make it for every browser type for instance this gallery:
Add a description of the image here
Add a description of the image here
Add a description of the image here
Forms
Using CSS to style an HTML Form
Standard Page Formatting:
TITLE HEADING
Title description, Dec 7, 2017
Image
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADING
Title description, Sep 2, 2017
Image
Some text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
About Me
Image
Some text about me in culpa qui officia deserunt mollit anim..
Popular Post
Image
Image
Image
Follow Me
Some text..
Here we have multiple backgrounds.
Shadows
Shadows can be applied to text to create a neon look, images to give it a shadow or to make it look like paper like this one:
Blue Marble
Changing Fonts
We can change fonts to different types by using css @Font Rule
For instance this font is different than others
Done by doing the @Font Rule
Transformations(Transform: ...)
translate(): moves the object in x or y direction rotate(): rotates with dgrees scaleX(): increases/dec size of width scaleY(): increases/dec size of height scale(): changes size skewX(): will skew along x axis skewY(): will skew along y axis with degree skew(): both x and y axis skewd matrix(): combines all 2d transformations in one: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
CSS Transitions:
instead of using JavaScript to control the moition of images we can use CSS! Using shorthand notation: transition: width 2s linear 1s
sahdjashllkdsja asldljaslkjlksdjalk as kdjaslkdj asldkjas lkdjajslk asdjalksdj
sahdjashllkdsja asldljaslkjlksdjalk as kdjaslkdj asldkjas lkdjajslk asdjalksdj
Animations using CSS @keyframes
WOW
Images with CSS
Pic As A Link:
Fade in a box:
Hire Me
Animated Button
My Columns
This Div should be split into 3 columns: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
CSS Var()
Var() is a key value. It is useful for when you use the same colors over and over again. May be easier to use this notation.
You can access these variables with JavaScript. The variable can be changed dynamically for instance if the browser window size is greater than 450 pixels.
boxed without padding: box-sizing: 300 width 100 height;
Boxed with padding: box-sizing: 300 width 100 height;
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
This Div will turn green if the viewport is greater than 480, as well as other change.
Media Queries For Columns: A common use of media queries, is to create a flexible layout. In this example, we create a layout that varies between four, two and full-width columns, depending on different screen sizes:
With FlexBoxes
Row 1 Column 1
Top Info
Row 1 Column 2
Second info
Row 1 Column 3
Some text..
Row 1 Column 4
Some text..
Perhaps you want to add multiple stipulations to the Media Queries say for a tablet
FlexBox
The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary: Justify-content is a way to align the divs withhn the flexbox. Also stretching, use that with alight items to get height alighnment and exact cetner
The flex item properties are:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1
2
3
4
5
6
7
8
9
10
11
12
with a lttle css @media and many flex boxes we can create responsive websites! maybe another webpage for that
Responsive Web Design.
Typical size breakpoints: /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}
Orientation
@media only screen and (orientation: landscape) { body { background-color: lightblue; } }
Responsive backgrounds
Instead of scaling images, use different ones for different medias
/* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); }
/* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); }
}
Using max-width the images or videos you show wonnt get very pizelated on large windows.
video { max-width: 100%; height: auto; }