What is CSS?
A cheat sheet covering the basics of CSS selectors and units. A CSS rule set contains one or more selectors and one or more declarations. The selector (s), which in this example is h1, points to an HTML element. The declaration (s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.
CSS is a foundational element of the Internet. CSS stands for Cascading Style Sheets. It was created in 1994 by Håkon Wium Lie during the early days of the modern World Wide Web. The “style” term in the acronym gives the one-word explanation of what CSS is. The coding language specifies the style and design elements of a website.
CSS is distinct from HTML (Hyper Text Markup Language), which specifies the content. Separating the style from the content allows website developers to better manage websites. HTML elements could be styled in-line in the early days of the Internet. Many browsers still support some HTML attributes for style, which mimic CSS.
For example, to make an item bold in CSS, the code used is
font-weight: bold;
. the code used in HTML is strong
. The best practice for coding is to use CSS for styling and not use any in-line HTML styles.One advantage of using CSS is that the design style can be separated from the in-line, on-page code. This means that developers can edit the text in one location and the changes will be reflected across the website.
This benefit is realized if the developers specifies the names of CSS Classes and IDs in the code on the page. In conjunction the developer writes the CSS code to style elements in an external CSS file. Which will be placed in the
head
of your document.With CSS code, all sorts of element design parameters can be specified. The color, size, spacing alignment, and other characteristics of blocks of text, images, and many other elements can be controlled. Modern CSS continues to evolve to give developers more and more control and creativity with design. The latest set of guidelines being developed is CSS3.
CSS Selectors
CSS Selectors are the foundation of using CSS. You use selectors to target specific elements that you want to style. Below is how the syntax works.
Descendant
Selects all li within an unordered list ul
- ul li
Adjacent
Selects all p elements that are placed immediately after ul elements
- ul + p
Direct children
Selects all a elements where the parent is a p element
- p > a
Sibling combinator
Selects every a element that are preceded by a p element
- p ~ a
Attributes
Selects all elements with a target attribute
- a[target]
Backgrounds
Property
Values
background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background (shorthand)
background: bg-color bg-image [position/bg-size] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment] [initial|inherit];
Example
Property
Values
background-position
- top left
- top center
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x-%
- y-%
- x-pos
- y-pos
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Borders
Property
Values
border (shorthand)
border: width style color;
Example
Property
Values
border-style
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- dashed
- ridge
- inset
- outset
Property
Values
border-bottom
- border-bottom-width
- border-style
- border-color
border-left
- border-left-width
- border-style
- border-color
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
border-top
- border-top-width
- border-style
- border-color
Property
Values
Property
Values
Property
Values
Property
Values
border-right
- border-top-width
- border-style
- border-color
border-radius
- border-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-top-left-radius
Property
Values
Property
Values
Box Model
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
margin
- margin-top
- margin-right
- margin-bottom
- margin-left
margin (shorthand)
margin: top right bottom left;
Example
Property
Values
Property
Values
Property
Values
Property
Values
padding
- padding-top
- padding-right
- padding-bottom
- padding-left
padding (shorthand)
padding: top right bottom left;
Example
Property
Values
Property
Values
Property
Values
Property
Values
display
- inline
- inline-block
- block
- flex
- inline-flex
- grid
- inline-grid
- table
- none
- initial
- inherit
Property
Values
Property
Values
Property
Values
Property
Values
Text
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
text-decoration
- none
- underline
- overline
- line-thorugh
- blink
Property
Values
word-break
- normal
- keep-all
- loose
- break-strict
- break-all
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
Font
Property
Values
font
- font-style
- font-weight
- font-size/line-height
- font-family
Property
Values
Property
Values
Property
Values
Property
Values
Property
Values
font-weight
- lighter
- normal
- bold
- bolder
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- inherit
Lists
list-style
- list-style-type
- list-style-position
- list-style-image
These are just a few. To see all list style types visit w3schools.
Property
Values
Colors
Property
Values
Tables
Property
Values
Property
Values
Property
RONR Cheat Sheet Boston DSA conducts its convention according to Robert’s Rules of Order, Newly Revised (RONR). RONR is a widely used series of parliamentary procedures that ensure meetings are conducted fairly, transparently, and without denying access. Dsa cheat sheet. Contribute to adwiteeya3/dsa-cheatsheet development by creating an account on GitHub. If DSA is the jurisdictional authority, our 'California Access Compliance Reference Manual' has all of the building code accessibility regulations and policies used on projects under DSA approval authority. The Manual is available as a free download as an Adobe Acrobat (PDF) file. DSA-LA 2020 Voter Guide 2 Table of Contents Table of Contents Introduction 1 Table of Contents 2 Cheat Sheet 9 Congress 11 CD 23 11 CD 25 11 CD 26 12.
Values
Property
Values
Property
Values
Animations
Property
Values
animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
Property
Values
Property
Values
Property
Values
Css Selectors Cheat Sheet Examples
animation-timing-function
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-Bezier
Property
Values
Transitions
Property
Values
transition
- transition-property
- transition-duration
- transition-duration
- transition-timing-function
- transition-delay
Property
Values
Property
Values
Property
Values
transition-timing-function
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubicBezier
Recieve resources directly to your inbox
Sign up to get weekly insights & inspiration in your inbox.
Please enable JavaScript to view the comments powered by Disqus.Selectors
Tag
- Select all the tags of the same type.
- Select an element that has a class.
- There needs to be a matching class in the HTML:
#
— ID- Select an element that has the ID.
- There needs to be a matching ID in the HTML:
- Select an element that’s a descendant of another element.
>
— Child- Select an element directly inside another element.
- Select an element immediately beside another element.
~
— General sibling- Select an element that’s at the same level.
- Select an element by it’s attribute.
- Good for styling links differently if they’re external.
Pseudo classes
:first-child
- Select the element when it’s the first inside its parent.
- Select the element when it’s the last inside its parent.
:only-child
- Select an element when it’s the only thing inside its parent.
- Select an element by it’s number.
- Good for zebra-striping table rows.
:nth-last-child()
- Select an element by it’s number, counting backwards from the end.
- Select an element by it’s number, but only counting others that match—not all children.
:nth-last-of-type()
- Select an element by it’s number, counting backwards from the end.
- Select an element that’s the first of its kind within its parent.
:last-of-type
- Select an element that’s the last of its kind within its parent.
- Select an element when it’s the only child of its parent of a specific kind.
:empty
- Select an element it has no children.
- Select an element when its
disabled
attribute is set.
:checked
- Select an
<input>
when itschecked
attribute is set.
- Select an element when the URL matches its ID.
:not()
- Select matching elements that do not match the selection inside the
()
Pseudo elements
- A hidden element before the content of most elements.
::after
- A hidden element after the content of most elements.
- Select the first line of text.
- Good for highlighting the first line of a paragraph.
::first-letter
- Select the first character in the text.
- Good for drop caps.
- Style an element when it has been selected and highlighted.
Interaction selectors
:link
- For styling a link that hasn’t been visited.
- For styling a link that has been visited.
:hover
- For styling an element when the mouse hovers over it.
- For styling an element for when the keyboard focuses it.
- Only works on
<a>
,<button>
, and form inputs by default.
:active
- For styling an element when the mouse button is clicked down on it.
Attribute selectors
- Select when an element has a specific attribute.
- Exact match
- Select when an attribute that’s exactly the same.
- Select when an attribute starts with some text.
- Ends with
- Select when an attribute ends with some text.
- Select when an attribute contains some text anywhere.
- Contains when separated by spaces
- Select an element when its attribute matches one item from a space separated list.
- Select an element when its attribute matches one item from a dash separated list.
- Case insensitive
- Allows the search to ignore upper vs. lower case letters.
Colours
- Standardized, named colours. Color keywords.
- Hexadecimal
- Hex colours start with a hash:
#
. - Three separate numbers: red, green, blue.
- Simplify pairs:
#000
,#fff
,#f33
- Specify colours using red, green & blue numbers.
- RGBA
- RGB with semi-transparent/opacity.
- Specify colours using the hue, saturation, lightness system.
- Different from Photoshop’s HSB system.
- HSLA
- HSL with semi-transparent/opacity.
- The
transparent
keyword can be used to remove a colour.
- Current colour
- The
currentColor
keyword can be used to capture thecolor
of the same element.
Units
- CSS pixels—different sizes for every device.
100px
is exactly 100 pixels in all situations.
em
- Based on the font-size of the parent (or current element).
1em
is 1 × the parent element’s size.0.5em
is 0.5 × the parent element’s size.
- Based on the font-size set in the
html
element. 1.5rem
is 1.5 × thehtml
element’s font size.
%
- Percentage
- A percentage of the parent element.
100%
is to whole width of the parent element.- If the parent element is
50%
wide, and this element is50%
wide, then it only takes up25%
of the original grand parent element.
- Viewport height
- Like percentage, but based on the height of the window.
100vh
is the whole height of the window.50vh
is half the height of the window.
vw
- Viewport width
- Like percentage, but based on the width of the window.
75vw
is three-quarters the width of the window.
C++ Cheat Sheet Pdf
Unit rules
Css Code Cheat Sheet
- Always use
rem
for font sizes because it’s easier to manage. - Never—ever—user
px
for font sizes.
- Use
rem
orem
for paddings and margins- The idea being that we want the margins and paddings to increase when the font size increases.
- Most often I use
em
forpadding
andrem
formargin
- Most often use
%
for widths because we want most things to be flexible. - Sometimes using
px
orem
for widths is okay too.
- Use
em
for maximum widths- Maximum widths required a fixed measurement—so
em
formax-width
works because we want themax-width
to increase as the font size increases.
- Use pixels for accuracy—when things should always be the same size: logos as an example.
- Or use pixels for borders—though sometimes
em
forborder
is cool too. - Never—ever—user
px
for font sizes.