What is CSS?
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.
Press CTRL+D / CMD + D CSS Properties Cheat Sheet 95 We provide you with all the CSS3 properties and functions list for you to master CSS. It makes solving UI related problems much quicker. Online jQuery Cheat Sheet. JQuery Cheat Sheet will help you create the code for animations, various effects and other features for your website. Find the most common code snippets on a single page. Hide the green comments with the link in the top right corner of the site. Click the code snippets to highlight then copy-paste them in your project!
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 Code 2714 toyota.
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
Css Selectors Cheat Sheet Example
Values
Property
Values
Property
Values
Property
Values
Css Selector Syntax
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
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
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.