CSS cheatsheet

CSS describes how HTML elements are to be displayed

CSS

CSS stands for Cascading Style Sheets; CSS describes how HTML elements are to be displayed on screen, paper, or in other media. often used via frameork such s Bootstrap

Basics

Selectors

CSS selectors are used to "find" (or select) the HTML elements to style. CSS selectors into five categories Examples

Simple selectors

  • Simple selectors: (select elements based on name, id, class)
    • element P{}
    • id #idname{}
    • .classname{}
    • * {} all items
    • multi defination are separted by , ie .classname, .classname
  • Combinator selectors :(select elements based on a specific relationship between them))
    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)
full list of selections

Pseudo-class selectors

(select elements based on a certain state) for example
  • Style an element when a user mouses over it (a:hover {} )
  • Style visited and unvisited links differently
  • Style an element when it gets focus

Pseudo-elements selectors

(select and style a part of an element)
  • Style the first letter, or line, of an element (p::first-line {})
  • Insert content before, or after, the content of an element (h1::before {)

Attribute selectors

(select elements based on an attribute or attribute value) for example :-
  • based on class name example (includes top [class|=top] {}}
  • based on element type input[type="text"]

Height and width properties

The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

  • auto - This is default. The browser calculates the height and width
  • length - Defines the height/width in px, cm etc.
  • % - Defines the height/width in percent of the containing block
  • initial - Sets the height/width to its default value
  • inherit - The height/width will be inherited from its parent value

Absolute Lengths

  • cm centimeters
  • mm : millimeters
  • in : inches (1in = 96px = 2.54cm)
  • px *: pixels (1px = 1/96th of 1in)
  • pt : points (1pt = 1/72 of 1in)
  • pc : picas (1pc = 12 pt)

Relative Lengths

  • em : Relative to the font-size of the element (2em means 2 times the size of the current font)
  • ex : Relative to the x-height of the current font (rarely used)
  • ch : Relative to width of the "0" (zero)
  • rem : Relative to font-size of the root element
  • vw : Relative to 1% of the width of the viewport
  • vh : Relative to 1% of the height of the viewport
  • vmin : Relative to 1% of viewport's* smaller dimension
  • vmax : Relative to 1% of viewport's* larger dimension
  • % : Relative to the parent element

Colour values

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Colour

can define as name, or value and add opacity
  • colour name : red, blue, green, dark green
  • rgb : red rgb(255,0,0), blue, green, dark green
  • rgb % : red rgb(100%,0%,0%), blue, green, dark green
  • rgba (additional alpha for opacity for a color.): red rgb(100%,0,0,0.5), blue, green, dark green
  • hex value #rrggbb: red color:#ff0000, blue (color:#0000ff), green, dark green
  • hsl (hue, saturation,lightness): red, blue, green, dark green

Margin padding etc

border properties are used to specify the style, width, and color of an element's border.
margin properties are used to create space around elements, outside of any defined borders.
padding properties are used to generate space around an element's content, inside of any defined borders.

Backgrounds

The CSS background properties are used to define the background effects for elements.

Background colours (green low opacity) no effect on text using rgba

background Image with repeat (default)

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.

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. page only

Advance useages

Outline


(An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

A 4px thick outline.

Multi columns newspaper style
for text layouts within section

Options:-

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

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.

Other examples

lorem ipsum dolor sit amet consectetuer (text-area)

capitialse first letter (cap-text)

capitialse all words with background (header-large)

capitialse all letters with background(header-uppercase)

first letter only with background using ::first-letter (cap-text-bold)

shadow text (shadow-text)

The link with target="_blank" gets a yellow background:

w3schools.com disney.com
.text-area {text-transform: lowercase; background: gray ; color: white }
.cap-text-bold::first-letter { text-transform: uppercase; background: black ; color: red }
.cap-text::first-letter { text-transform: capitalize; colour: red}
.header-large { text-transform: capitalize; background: black ; color: white}
.header-uppercase { text-transform: uppercase; background: black ; color: red}
.uppercase {text-transform: uppercase; colour: red}
p::first-letter { color: red; font-size: xx-large;} // using pusedue letters .shadow-text { text-shadow: 2px 2px #FF0000; }
a[target=_blank] { background-color: yellow;}
.references a:visited {color :darkblue; text-transform: uppercase; }
.references p {text-transform: uppercase; }
.large-text { font-size: 1.3em; }
.red {color: red}

References