CSS Play

  1. Home
  2. Positioning
  3. Psuedo
The begining of w3 css tutorial. Below are some Font Awesome icons. (scripts)

Some bootstrap icons

some google icons
cloud favorite attachment computer traffic
Hit Me To Go To Google

Mouse over the words to change the cursor.

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)
mr.Clippy >> 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

check imageThe 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. check image 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; }

Nav Bars


  • Home
  • News
  • Dropdown
    Link 1 Link 2 Link 3


    • Responsive Gallery

    We dont want to make the website static, we should try and make it for every browser type for instance this gallery:

    Entre
    Add a description of the image here
    Paint
    Add a description of the image here
    Software
    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:

    Marble

    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: Painter 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;
    }

    Grids

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15