Setting Up Brackets
This three-part video will show you how to set up Brackets, a free open-source code editor by Adobe.
Category Archives: CSS
Illustrated Poem Demo (Images & Positioning)
To follow along with the demo in playlist video series below, you will want to download a starter image file:
Click to open image in new tab; then right-click it to save to your computer.
This playlist is not complete yet but will be updated soon. It currently takes you through the first 8 steps of the demo project.
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 |
|
Sets all the font properties in one declaration |
|
|
Specifies the font family for text |
|
|
Specifies the font size of text |
|
|
Specifies the font style for text |
|
|
Specifies whether or not a text should be displayed in a small-caps font |
|
|
Specifies the weight of a font |
CSS Text Properties
|
Property |
Description |
|
Sets the color of text |
|
|
Specifies the text direction/writing direction |
|
|
Increases or decreases the space between characters in a text |
|
|
Sets the line height |
|
|
Specifies the horizontal alignment of text |
|
|
Specifies the decoration added to text |
|
|
Specifies the indentation of the first line in a text-block |
|
|
Specifies the shadow effect added to text |
|
|
Controls the capitalization of text |
|
|
Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
|
|
Sets the vertical alignment of an element |
|
|
Specifies how white-space inside an element is handled |
|
|
Increases or decreases the space between words in a text |
CSS3 Text Properties
|
Property |
Description |
|
Specifies how to align the last line of a text |
|
|
A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration |
|
|
Specifies how justified text should be aligned and spaced |
|
|
Specifies how overflowed content that is not displayed should be signaled to the user |
|
|
Specifies line breaking rules for non-CJK scripts |
|
|
Allows long words to be able to be broken and wrap onto the next line |
CSS List Properties
|
Property |
Description |
|
Sets all the properties for a list in one declaration |
|
|
Specifies an image as the list-item marker |
|
|
Specifies if the list-item markers should appear inside or outside the content flow |
|
|
Specifies the type of list-item marker |
CSS Background Properties
|
Property |
Description |
|
Sets all the background properties in one declaration |
|
|
Sets whether a background image is fixed or scrolls with the rest of the page |
|
|
Sets the background color of an element |
|
|
Sets the background image for an element |
|
|
Sets the starting position of a background image |
|
|
Sets how a background image will be repeated |
CSS3 Background Properties
|
Property |
Description |
|
A shorthand property for setting all the background properties in one declaration |
|
|
Specifies the painting area of the background |
|
|
Specifies one or more background images for an element |
|
|
Specifies where the background image(s) is/are positioned |
|
|
Specifies the size of the background image(s) |
CSS Border Properties
|
Property |
Description |
|
Sets all the border properties in one declaration |
|
|
Sets all the bottom border properties in one declaration |
|
|
Sets the color of the bottom border |
|
|
Sets the style of the bottom border |
|
|
Sets the width of the bottom border |
|
|
Sets the color of the four borders |
|
|
Sets all the left border properties in one declaration |
|
|
Sets the color of the left border |
|
|
Sets the style of the left border |
|
|
Sets the width of the left border |
|
|
Sets all the right border properties in one declaration |
|
|
Sets the color of the right border |
|
|
Sets the style of the right border |
|
|
Sets the width of the right border |
|
|
Sets the style of the four borders |
|
|
Sets all the top border properties in one declaration |
|
|
Sets the color of the top border |
|
|
Sets the style of the top border |
|
|
Sets the width of the top border |
|
|
Sets the width of the four borders |
CSS3 Rounded Corners Properties
|
Property |
Description |
|
A shorthand property for setting all the four border-*-*-radius properties |
|
|
Defines the shape of the border of the top-left corner |
|
|
Defines the shape of the border of the top-right corner |
|
|
Defines the shape of the border of the bottom-right corner |
|
|
Defines the shape of the border of the bottom-left corner |
CSS3 Shadow Properties
|
Property |
Description |
|
Adds one or more shadows to an element |
|
|
Adds one or more shadows to a text |
CSS Margin Properties
|
Property |
Description |
|
A shorthand property for setting the margin properties in one declaration |
|
|
Sets the bottom margin of an element |
|
|
Sets the left margin of an element |
|
|
Sets the right margin of an element |
|
|
Sets the top margin of an element |
CSS Padding Properties
|
Property |
Description |
|
A shorthand property for setting all the padding properties in one declaration |
|
|
Sets the bottom padding of an element |
|
|
Sets the left padding of an element |
|
|
Sets the right padding of an element |
|
|
Sets the top padding of an element |
CSS Dimension Properties
|
Property |
Description |
|
Sets the height of an element |
|
|
Sets the maximum height of an element |
|
|
Sets the maximum width of an element |
|
|
Sets the minimum height of an element |
|
|
Sets the minimum width of an element |
|
|
Sets the width of an element |
CSS Display/Visibility Properties
|
Property |
Description |
|
Specifies how an element should be displayed |
|
|
Specifies whether or not an element should be visible |
CSS Float Properties
|
Property |
Description |
|
Specifies on which sides of an element where floating elements are not allowed to float |
|
|
Specifies whether or not an element should float |
|
|
Specifies what happens if content overflows an element’s box |
|
|
Specifies what to do with the left/right edges of the content if it overflows the element’s content area |
|
|
Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area |
CSS Positioning Properties
|
Property |
Description |
|
Sets the bottom margin edge for a positioned box |
|
|
Clips an absolutely positioned element |
|
|
Specifies the type of cursor to be displayed |
|
|
Sets the left margin edge for a positioned box |
|
|
Specifies what happens if content overflows an element’s box |
|
|
Specifies what to do with the left/right edges of the content if it overflows the element’s content area |
|
|
Specifies what to do with the top/bottom edges of the content if it overflows the element’s content area |
|
|
Specifies the type of positioning for an element |
|
|
Sets the right margin edge for a positioned box |
|
|
Sets the top margin edge for a positioned box |
|
|
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)
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
- Mobile-First Responsive Web Design (good article by Brad Frost)
- CSS Reset: http://www.cssreset.com/
- Font Shorthand Order
- CSS3 Transitions
- CSS3 Generator (tool that helps you generate box shadows, text shadows, gradients, button styles, etc.
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.
JS : Make a Scrolling Effect Webpage
What this tutorial covers
This demo contains a 9-video demo series that will teach you how to make a single web page with a jQuery page-scrolling easing effect. The software demonstration is done in Dreamweaver, but you could also follow along with any decent script editing program.
Level :: Beginner
Continue reading JS : Make a Scrolling Effect Webpage
CSS – Making a Responsive Layout with Media Queries
This page contains a demonstration series outlining a method for designing a basic responsive grid layout with HTML and CSS. To first learn more about responsive design, you can watch the “Responsive Web Design: an Introduction” slideshow presentation. Continue reading CSS – Making a Responsive Layout with Media Queries
Responsive Web Design
An Introduction to Responsive Web Design
You can also open this presentation in a new, larger window.
CSS – Basic Styling with CSS
This is a video series playlist that walks you through how to style a webpage using CSS3 with HTML5. There are a total of 12 videos equalling almost three hours of instruction. Continue reading CSS – Basic Styling with CSS
Creating a Simple Template-Based HTML + CSS Site
An Approach To Making a Multi-Page Site
Getting Started
This set of tutorials will help beginners develop a basic workflow for building efficient, template-based sites using a code editor. Proprietary Dreamweaver template files are not covered here. Continue reading Creating a Simple Template-Based HTML + CSS Site
CSS – CSS Foundations In-Depth
To view this lecture, please download the CSS In-Depth PDF (2.4MB).
HTML – HTML and CSS Principles
To view this lecture, please download the HTML and CSS Principles PDF (2.9MB).
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
CSS – Examining Ways to Display Images
This demonstration uses a mock-up site that allow you to see via video demos below how images are commonly displayed using CSS and HTML. It also shows you how you can examine other websites to see how things have been constructed.
- Video Demo of Live Site “John Doe” Part 1
- Video Demo of Live Site “John Doe” Part 2
- Video Demo of Live Site “John Doe” Part 3
- Check out the live site to follow along.