Category Archives: CSS

CSS Properties Compilation


What this page does

This page is a compilation of commonly used CSS properties and is intended to make it easier for students to search for the type of property they might need to use based on the general categories above. To learn more about each property on this page and its syntax and acceptable values, click the property name. It will take you to the exact w3schools.com page for detailed information on each property.

CSS Font Properties

Property

Description

font

Sets all the font properties in one declaration

font-family

Specifies the font family for text

font-size

Specifies the font size of text

font-style

Specifies the font style for text

font-variant

Specifies whether or not a text should be displayed in a small-caps font

font-weight

Specifies the weight of a font


^menu


CSS Text Properties

Property

Description

color

Sets the color of text

direction

Specifies the text direction/writing direction

letter-spacing

Increases or decreases the space between characters in a text

line-height

Sets the line height

text-align

Specifies the horizontal alignment of text

text-decoration

Specifies the decoration added to text

text-indent

Specifies the indentation of the first line in a text-block

text-shadow

Specifies the shadow effect added to text

text-transform

Controls the capitalization of text

unicode-bidi

Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

vertical-align

Sets the vertical alignment of an element

white-space

Specifies how white-space inside an element is handled

word-spacing

Increases or decreases the space between words in a text

CSS3 Text Properties

Property

Description

text-align-last

Specifies how to align the last line of a text

text-emphasis

A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration

text-justify

Specifies how justified text should be aligned and spaced

text-overflow

Specifies how overflowed content that is not displayed should be signaled to the user

word-break

Specifies line breaking rules for non-CJK scripts

word-wrap

Allows long words to be able to be broken and wrap onto the next line


 

^menu


CSS List Properties

Property

Description

list-style

Sets all the properties for a list in one declaration

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies if the list-item markers should appear inside or outside the content flow

list-style-type

Specifies the type of list-item marker


^menu


CSS Background Properties

Property

Description

background

Sets all the background properties in one declaration

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

background-color

Sets the background color of an element

background-image

Sets the background image for an element

background-position

Sets the starting position of a background image

background-repeat

Sets how a background image will be repeated

CSS3 Background Properties

Property

Description

background

A shorthand property for setting all the background properties in one declaration

background-clip

Specifies the painting area of the background

background-image

Specifies one or more background images for an element

background-origin

Specifies where the background image(s) is/are positioned

background-size

Specifies the size of the background image(s)


^menu


CSS Border Properties

Property

Description

border

Sets all the border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-color

Sets the color of the four borders

border-left

Sets all the left border properties in one declaration

border-left-color

Sets the color of the left border

border-left-style

Sets the style of the left border

border-left-width

Sets the width of the left border

border-right

Sets all the right border properties in one declaration

border-right-color

Sets the color of the right border

border-right-style

Sets the style of the right border

border-right-width

Sets the width of the right border

border-style

Sets the style of the four borders

border-top

Sets all the top border properties in one declaration

border-top-color

Sets the color of the top border

border-top-style

Sets the style of the top border

border-top-width

Sets the width of the top border

border-width

Sets the width of the four borders


^menu


CSS3 Rounded Corners Properties

Property

Description

border-radius

A shorthand property for setting all the four border-*-*-radius properties

border-top-left-radius

Defines the shape of the border of the top-left corner

border-top-right-radius

Defines the shape of the border of the top-right corner

border-bottom-right-radius

Defines the shape of the border of the bottom-right corner

border-bottom-left-radius

Defines the shape of the border of the bottom-left corner


^menu


CSS3 Shadow Properties

Property

Description

box-shadow

Adds one or more shadows to an element

text-shadow

Adds one or more shadows to a text


^menu


CSS Margin Properties

Property

Description

margin

A shorthand property for setting the margin properties in one declaration

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element


^menu


CSS Padding Properties

Property

Description

padding

A shorthand property for setting all the padding properties in one declaration

padding-bottom

Sets the bottom padding of an element

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element


^menu


CSS Dimension Properties

Property

Description

height

Sets the height of an element

max-height

Sets the maximum height of an element

max-width

Sets the maximum width of an element

min-height

Sets the minimum height of an element

min-width

Sets the minimum width of an element

width

Sets the width of an element


^menu


CSS Display/Visibility Properties

Property

Description

display

Specifies how an element should be displayed

visibility

Specifies whether or not an element should be visible


^menu


CSS Float Properties

Property

Description

clear

Specifies on which sides of an element where floating elements are not allowed to float

float

Specifies whether or not an element should float

overflow

Specifies what happens if content overflows an element’s box

overflow-x

Specifies what to do with the left/right edges of the content if it overflows the element’s content area

overflow-y

Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area


^menu


CSS Positioning Properties

Property

Description

bottom

Sets the bottom margin edge for a positioned box

clip

Clips an absolutely positioned element

cursor

Specifies the type of cursor to be displayed

left

Sets the left margin edge for a positioned box

overflow

Specifies what happens if content overflows an element’s box

overflow-x

Specifies what to do with the left/right edges of the content if it overflows the element’s content area

overflow-y

Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area

position

Specifies the type of positioning for an element

right

Sets the right margin edge for a positioned box

top

Sets the top margin edge for a positioned box

z-index

Sets the stack order of an element

JS – Project1 – Mobile JS Menu (+ more)

This demo series will show you how you can make your navigation mobile friendly and accessible using jQuery whether javascript is enabled on the client-side or not.

JS Mobile Menu Demo Series

This series is approximately 45 minutes long. You should expect it to take at least twice that time to do complete the work.

1 – Menu setup (18min)
2 – jQuery setup and custom script (17min)
3 – Styling the menu for proper behavior (13min)

 

 

Continue reading JS – Project1 – Mobile JS Menu (+ more)

CSS – Creating a Mobile-First Design Template

Creating a Mobile-First Design Template for Your PHP Project

This demo will give you guidance in styling a web page with HTML5 markup from a mobile-first design approach. It covers the following concepts, principles, and methods:

  • the php/html starter file’s proper markup
  • how to add Google Fonts to a design
  • using a viewport/device-width meta tag
  • removing native browser styling with a ‘reset’ css file
  • using @viewport and @-ms-viewport in CSS
  • designing for smallest screens in mind first
  • using @media queries to alter layout on larger screens
  • styling a baseline for very commonly used elements

To follow along with these videos using the exact same markup,  download the template ‘project1’ folder in a zipped file. After downloading, unzip and place the unzipped folder into your “htdocs/” folder to work on the files.

Creating a Mobile-First Responsive Site Template
(7-Part Video Demo Playlist BELOW)

Approximately 2.5 hours of demo. Expect the work you do to create your own base design template to take a minimum of 8 hours.

00 – Getting Started (19:37)
01 – Start Styling (27:49)
02 – Styling the Banner (24:46)
03 – Styling the Banner’s NAV (22:25)
04 – Styling the Baseline Content (20:53)
05 – Styling the Baseline Content (Continued 14:26)
06 – Styling the Footer / Using Additional Breakpoints (22:51)


 


Want to learn more about using Google Web Fonts?

Check this video out.

 

Useful Project Resources

JS : Single Page Parallax Resume

What is in this tutorial?

  • Mobile-first design principles
  • Learn how ‘vh’ viewport height works
  • Learn how to vertically and horizontally center elements on page
  • Writing jQuery script for collapsible navigation menu
  • Applying parallax smooth scrolling jQuery script for single page navigation
  • Applying Lightbox 2 jQuery effects to gallery

Please watch all videos below to complete the tutorial.


Continue reading JS : Single Page Parallax Resume

CSS – Styling Lists

What This Tutorial Covers

The following 4-part series explains how to style lists for navigation. It covers the following topis:

  • switching from block-level (vertical) to inline (horizontal) lists
  • how margins and padding behave with text and inline lists
  • centering text in in-line lists vertically and horizontally
  • making horizontal lists using floats
  • using background images in both inline and floated lists
  • clearing floated items Continue reading CSS – Styling Lists