-
Regions
Regions are a new CSS3 specification that allows content to be dispersed across multiple containing elements; or regions. In this; video James Lee demonstrates how to use the flow-into and flow-from CSS properties to define a named flow and allow content to flow logically through regions in an HTML document.
-
Working with Functions
In CSS3; you can use SassScript built-in functions or define your own. In this video; James Lee uses the rgb function to generate a color as understood by HTML.
-
Inline Styles
In CSS3; inline styles allow you to quickly and easily add style rules directly to the specific instances of elements in an HTML document and override styles in any other associated style sheet. In this video; Mark Lassoff demonstrates how to apply style changes to specific elements in an HTML document by embedding styles inline with the elements code.
-
Styling Links
Styling links is done differently than CSS styling of other parts of an HTML page. In this video; Mark Lassoff will demonstrate how to make links interesting and interactive using CSS styling.
-
Styling Lists
Long paragraphs are difficult to read on screen; so information is often put in lists. In this video; Mark Lassoff will demonstrate how to style lists using CSS styling.
-
Styling Text
One of the most common reasons people use CSS is to style text including selecting the font and font size. In this video; Mark Lassoff will demonstrate how to select text for styling and apply some styling options.
-
Transformations with CSS3
Various aspects of a vector graphic can be changed; or transformed; to change the graphic's appearance. In this video; Mark Lassoff will demonstrate how to use CSS 3 code to apply transformations to a vector graphic.
-
Using CSS3 to Insert Content
You might need to insert content into an HTML document which used to require a lot of JavaScript code. In this video; Mark Lassoff will demonstrate how to insert content using just CSS code.
-
Styling Tables
A well designed HTML table that is easy for the user to read can display a lot of information in a small space. In this video; Mark Lassoff will demonstrate how to use CSS to style tables.
-
Columns with CSS
Creating columns in a web page used to require a great deal of effort. In CSS 3 you can create columns in just about any text element. In this video; Mark Lassoff will demonstrate how to create nice; even columns using CSS code.
-
CSS Box Model
One of the most complicated things to do with CSS is lay out an entire page in columns or some other type of design. In this video; Mark Lassoff will demonstrate how to use the CSS box model to successfully lay out a page.
-
CSS Gradients
Gradients are a gradual transition of one color to another color. In this video; Mark Lassoff will demonstrate how to create gradients in HTML elements using CSS code.
-
CSS Page Backgrounds
Creating a page background used to require a lot of HTML code and some JavaScript as well. In this video; Mark Lassoff will demonstrate how to create interesting page backgrounds with just a little CSS code.
-
Custom Bulleted Lists
Using default style sheets; you have very few options for what your bullets look like. In this video; Mark Lassoff will demonstrate how to use CSS to create custom bullets that fit in with a page's styling and brand.
-
Drop Shadows
Drop shadows are a common text styling element which previously required the text to be created as a graphic. In this video; Mark Lassoff will demonstrate how to create text with drop shadows using CSS 3 code.
-
ID and Class Selectors
In CSS there are several ways to isolate and select elements in the HTML for styling. In this video; Mark Lassoff will demonstrate how to use IDs and class selectors to do this.
-
Rounded Edges
The ability to create rectangular images with rounded edges is another new feature of CSS 3.0. In this video; Mark Lassoff will demonstrate how to create rounded edges.
-
Specialized Selectors
In CSS there you can use several methods to apply formatting to all of the content on the page; specific sections; or specific text. In this video; Mark Lassoff will demonstrate how to use the universal selector and selectors for specific sections of the page.
-
Basic CSS Selectors
CSS3 contains a variety of elements that can be styled. And there are a number of characters that can be employed to change these styles. In this video; James Lee uses CSS selectors to style HTML elements.
-
Block and Inline Elements
CSS3 allows you to change the default display styles of HTML elements presented within web content and user interfaces. In this video; James Lee demonstrates how to change the default displays of block and inline elements.
-
Centering a Layout
In CSS3; you can easily center divs within your HTML page layout by using margin properties. In this video; James Lee demonstrates how to apply the margin left and margin right properties in order to center a div within a HTML layout.
-
Clearing Block-level Elements
The CSS3 clear both property allows you to adjust your app layouts so that there are no floating elements to the left or right side of a specific element. In this video; James Lee demonstrates how to use the clear both property to ensure that there are no floating elements to either side of a specific element in your layout.
-
Compositing and Blending
Compositing and Blending is a feature in CSS3 that enables advanced graphical effects by blending colors and combining shapes into a single image. In this video; James Lee demonstrates how the concept of compositing expands on previous models; before highlighting the blending and isolation properties; as well as some of the characteristics and advanced features of CSS3 Compositing and Blending.
-
Configuring Borders in Tables
In CSS3; you can use the border property to add and configure borders for tables created in HTML. In this video; James Lee demonstrates how to add borders to tables and table elements.
-
Configuring Tabbed Navigation
CSS3 allows you to style an unordered list (UL) into horizontal tab navigation. This is useful for creating tabs to navigate a website easily. In this; video James Lee demonstrates how to configure tabbed navigation using CSS3.
-
Creating a Thumbnails Gallery
CSS3 allows you to easily create and configure thumbnail galleries for your HTML web content. In this video; James Lee demonstrates how to create and configure a thumbnails gallery for HTML content.
-
Displaying Calendar Data
You can use CSS3 to style an HTML table so that it appears as a calendar. In this video; James Lee demonstrates how to apply styling to a table so that it appears as a calendar for the month; with labeled days of the week; and both navigational links and links on specific days.
-
Exclusions
CSS3 Exclusions is a new feature that extends content wrapping by allowing you to define areas around which inline content can flow. In this video; James Lee demonstrates how to use the CSS wrap-flow property and its values to define a Document Object Model (DOM) element as an exclusion element around which text can flow.
-
Extending Complex Selectors
In CSS3; you can use Sass code to generate chained and multiple extends. In this video; James Lee uses multiple extends to extend both a class and its definitions.
-
Filters
CSS3 filters is a new feature that allows you to manipulate the images in your web pages by applying one of many predefined filter effects. In this video; James Lee demonstrates how to use the CSS filter property and its functions to achieve visual effects that include grayscale; brightness and contrast; and blurring amongst others.
-
Generating Nav Bars
Using CSS3; you can convert an unordered list of elements into a navigation bar. In this video; James Lee demonstrates how to use CSS styling to convert an unordered list into a horizontal navigation bar with links that look like buttons.
-
Getting Started with Less
In CSS3; in order to install Less you must first install the Node Package Manager (NPM); which is part of Node. In this video; James Lee uses the npm install -g less command to install Less.
-
Grouping Related Fields on a Form
You can use CSS3 to group related fields together in a form when creating forms that have a similar look and feel. To group fields; you can combine CSS with HTML. In this video; James Lee demonstrates how to group form widgets together and then style them.
-
Grouping Selectors with Combinators
In CSS3; grouping selectors allows for the definition of descendent; child; and adjacent sibling selectors. In this; video James Lee demonstrates how to group selectors.
-
Highlighting Form Fields with Focus
In CSS3; you are able to style what happens when you focus on a form field to provide forms with more of an interactive feel simply by applying the focus pseudo class to an element; ID; or class. In this video; James Lee demonstrates how to highlight form fields with focus.
-
Highlighting Selected Table Rows
In CSS3; you can use the tr:hover pseudo-class to highlight a row in a table created in HTML when hovering over it with your cursor. In this video; James Lee demonstrates how to use the tr:hover pseudo-class to apply a background color to a row that you are hovering over.
-
Inheritance and Cascade in CSS Style
In CSS3; there is a child parent relationship where elements are inherited from each other. An element in a web page may be preceded by the same style from before. In this video; James Lee demonstrates how a cascading style sheet incorporates inheritance.
-
Installing and Using Sass
Sass (Syntactically Awesome Style Sheets) is a CSS pre-processor that extends CSS3 and allows you to write well-formatted logical style sheets. In this video; James Lee demonstrates how to install Ruby; before installing the Sass gem and illustrating how to use the Sass syntax and the CSS-like structure of SCSS syntax to generate CSS code from the Command Prompt.
-
Manipulating CSS with jQuery
jQuery provides flexible ways for you to manipulate the CSS3 classes assigned to HTML elements once a web page has loaded. In this video; James Lee demonstrates how to add; remove; toggle; and set CSS classes that control the look and feel of the HTML DOM (Document Object Model) elements using jQuery methods.
-
Masking
CSS3 masking allows you to render portions of a graphical element transparent or translucent by applying a mask image or image manipulation function to the underlying image. In this video; James Lee demonstrates how to create gradient masks using the -webkit-mask-box-image and -webkit-mask-image CSS properties.
-
Modifying the Specificity of a Selector
In CSS3; specificity determines the order in which styles are applied to HTML elements. In this video; James Lee demonstrates the order of specificity for different CSS selectors; such as inline styles; ID styles; class styles; element styles; and the !important indicator.
-
Nested CSS Properties
In CSS3; you can nest properties with Sass. In this video; James Lee uses a font grouping to illustrate nesting properties where the font items are converted.
-
Nested Rules in Sass
In CSS3; you can define a selector nested under another selector. In this video; James Lee uses nested rules to convert an unordered list into a navbar.
-
Opacity
The CSS3 opacity attribute specifies the opacity level for HTML elements. In this video; James Lee demonstrates how to use the opacity attribute to adjust the opacity level of a header; paragraph; and button on a web page.
-
Parent Selectors and Combined Selectors
In CSS3; you can name classes and refer to the parent selector using the ampersand symbol. In this video; James Lee uses the &:hover command to set the background color for four divs.
-
Passing Rulesets to Mixins in Less
In CSS3; a ruleset is a group of properties stored in a variable that can be passed into a mixin. In this video; James Lee uses the @rules command to apply the ruleset within the mixin.
-
Positioning – The Stacking Order with z-Index
CSS3 allows you to adjust the stacking order of HTML elements. In this video; James Lee demonstrates how to configure the stacking order of three images by changing each of their z-index values.
-
Positioning Text
CSS3 definitions can be modified within HTML elements to change the text style displayed on a web page. In this video; James Lee demonstrates how to make changes to the position of text on a web page by modifying these definitions.
-
Pseudo-Classes
In CSS3; pseudo-classes can be used to apply styles to the special states of HTML elements. In this video; James Lee demonstrates how to use the link; visited; hover; active; and first-child pseudo-classes to apply CSS styles.
-
Pseudo-Elements
In CSS3; pseudo-elements can be used to apply styles to specified parts of HTML elements. In this video; James Lee demonstrates how to use the first-line; first-letter; before; and after pseudo-elements to apply color; font variants; and content to a paragraph element.
-
Rollover Navigation
Using CSS3; you can apply rollover navigation to links so they appear more alive if you hover over them. There are various properties you can apply to these links; such as font weight and text decoration. In this video; James Lee demonstrates how to configure rollover navigation.
-
Style Spreadsheets
In CSS3; styles can be applied to a table created in HTML to give it spreadsheet like qualities. In this video; James Lee demonstrates how to apply styles to a table so that it looks like a spreadsheet when viewed on a web browser.
-
Styling a Form as a Paragraph
CSS 3 allows you to add styles and formatting to web content and user interfaces through HTML. In this video; James Lee demonstrates how to apply the paragraph style to a form using CSS3.
-
Styling a Site Map
Using CSS3; you can style a site map in order to provide easy one-page navigation to all pages within a website and use CSS to modify site map properties; such as the border radius of tabs. In this video; James Lee demonstrates how to style site maps.
-
Styling Forms Fields According to Validity of Input
CSS3 allows you to style form fields according to the validity of input. Common validations include ensuring that data text is entered in a field or that text follows a specified format. In this video; James Lee demonstrates how to style a form based on validating the input.
-
Styling Nested Lists for Navigation
Using CSS3; it’s possible to style nested list items. In this video; James Lee demonstrates how to convert a nested unordered list into a nested navigation system; and to apply separate styling to the outer and inner items in the nested system.
-
Text Decoration including Level 3 Shorthand
The CSS3 text-decoration property is a shorthand for three formatting properties that specify decorations that can be added to text in HTML elements. In this video; James Lee demonstrates how to use the text-decoration property to apply formatting to text on a web page.
-
User Agent Stylesheets and CSS Reset
In CSS3; user stylesheets are present by default in your internet browser. However they can be reset if required. In this video; James Lee uses CSS3 to change a configuration file that resets the current style.
-
Using Attribute Selectors
In CSS3; attribute selectors allow styles to be applied to HTML elements based on their attributes. In this video; James Lee demonstrates how to use CSS attribute selectors to apply a background color to anchor elements with the target attribute.
-
Using Control Directives
In CSS3; there are the if; for; each; and while Sass control directives. In this video; James Lee uses a for directive to illustrate how a counter variable loops from one value to another.
-
Using Rule Sets to Create CSS Styles
In CSS3; an internet browser must interpret elements on a web page. CSS rule sets act as these interpreters. In this video; James Lee demonstrates how to modify your code so that it will display your defined style by using Rule Sets.
-
Using SassScript
In CSS3; the SassScript scripting language uses four types of variables: numbers; colors; strings; and Booleans. In this video; James Lee uses variables to define style settings for the body margin; background and text color.
-
Using the @at-root Directive
Sass allows you to force a definition to be at the root of your CSS3 file. In this video; James Lee uses the @at-root directive to force the definition of two classes to be at the root of a CSS file.
-
Using the @import Rule
In CSS3; you can import styles from a Sass file into another file. In this video; James Lee uses the @import statement to import a file that converts a bulleted list to a navbar.
-
Using the @media Directive in Sass
In CSS3; you can implement the @media directive in your Sass code to respond to different settings. In this video; James Lee uses the @media directive to change the screen’s background color when resizing the browser window.
-
Using the @warn and @debug Directives
In CSS3; it is possible for you to generate warning and debug messages. In this video; James Lee uses Sass to generate the @warn and @debug directives; and redirect these messages to standard error output.
-
Using the Flexible Box Model
The CSS3 flexible box model allows you to create dynamic layouts for your web content that are flexible dependent on the display space available. In this video; James Lee demonstrates how to apply the flexible box model to a HTML div container.
-
Using the Grid Box
CSS3 allows you to easily apply robust layouts; such as the grid box model; to web content. In this video; James Lee demonstrates how to apply the grid box model to HTML web content using CSS3.
-
Word Wrap
The CSS3 word wrap property allows you to change the way long words are displayed. In this video; James Lee demonstrates how to use the word wrap property to change the default display of a long word within its container.
-
Working with Guards in Less
In CSS3; guards provide a mechanism to create conditional statements using Less code. In this video; James Lee uses mixin guards to set conditional statements for styles.
-
Working with Import Directives in Less
In CSS3; you can define styles in one file and then import that file into a Less program. In this video; James Lee uses the @import directive to import the content of one Less file to another.
-
Working with Mixins
In CSS3; you can create nested mixins to define reusable styles. In this video; James Lee uses the @include directive to create a mixin that incorporates another mixin.
-
Working with Mixins in Less
In CSS3; Less mixins allow you to define styles and include properties from other styles. In this video; James Lee uses a mixin with two arguments that set the height and width of a div.
-
Working with Recursive Mixins in Less
In CSS3; a recursive mixin is a mixin that calls itself. In this video; James Lee uses a recursive mixin to recursively call a variable while creating four classes.
-
Working with the Extend pseudo-class in Less
Less provides the ability to extend one definition to another in CSS3. In this video; James Lee uses the extend pseudo-class to extend four classes and view the resulting styles in a browser.
-
Working with Variables in Less
In CSS3; you can use variables in selector names and give value to your properties. In this video; James Lee uses a Less program to declare three variables and assign a background color; foreground color; height; and a width for a class.
-
2D Transformations
In CSS3; there are various two dimensional transformation that you can apply to elements. In this video; Mark Lassoff demonstrates how to apply 2D transformations to a shape in a simple div using the rotate; scale; and skew methods.
-
3D Transformations
In CSS3; there are various three dimensional transformations that you can apply to elements. In this video; Mark Lassoff demonstrates how to apply and customize 3D transformations in a simple div.
-
Animation with CSS3
In CSS3; you can apply animations to any element. In this video; Mark Lassoff demonstrates how to animate elements using frames and timing; and include style changes.
-
Blurred Edges
In CSS3 there is a new effect that allows you to blur elements within your browser window. In this video; Mark Lassoff demonstrates how to use the blur filter to blur an image in different web browsers.
-
Borders
CSS3 allows developers to set borders in various styles around block-level elements; such as divs or paragraphs. In this video; Mark Lassoff demonstrates how to set individual borders for the top; bottom; left; and right sides of an element; and how to set a single border around the entire element.
-
Colors
There are various ways that you can formulate colors using CSS3. In this video; Mark Lassoff demonstrates how to use three different methods for formulating colors: the color rule; the RGB color method; and HTML hex colors.
-
Display and Visibility
In CSS3; display determines whether an element is displayed in the browser; whereas visibility determines whether an element is visible at any given time. In this video; Mark Lassoff demonstrates the differences when using either display or visibility.
-
Element Resizing
In CSS3; you can change the size of elements dynamically when they appear in a browser. In this video; Mark Lassoff demonstrates how to use the resize property to change the size of an element in the FireFox and Chrome browsers.
-
Element Transitions
In CSS3; you can code transitions from one element state to another. In this video; Mark Lassoff demonstrates how to use the transition property to create an element that changes its shape and rotation when you hover the mouse pointer over it.
-
Elliptical Rounding
Using CSS3 code; you can dynamically round the edges of your browser content. In this video; Mark Lassoff demonstrates how to use the border radius rule to create elliptical rounding on an image displayed in a browser.
-
External Styles
In CSS3; an external style sheet allows you to keep your web pages consistent; and lets you conveniently change the look of an entire web site by editing a single file. In this video; Mark Lassoff demonstrates how to create an external style sheet and define styles in it before linking the styles sheet to an HTML document.
-
Floating Elements
In CSS3; floating elements help you create layouts allowing you to include columns and images nested in text. In this video; Mark Lassoff demonstrates how to add floating elements to your layout.
-
Font – Font Face; Style and Size
CSS3 allows developers to adjust the typography of a document by changing the font face; font style; and font size using CSS3 code. In this video; Mark Lassoff demonstrates changing the font face to a category or a specific font; changing the font style to italic; and changing the font size using points; pixels; or ems.
-
Grouping and Nesting Selectors
CSS3 allows developers to apply formatting to more than one style using group and descendant selectors. In this video; Mark Lassoff demonstrates grouping headings and a footer within a div so that they all have the same font in the same color. He also demonstrates how this is done with descendant selectors.
-
ID's and Classes
CSS3 allows developers to identify a piece of content and select it for CSS or JavaScript manipulation. In this video; Mark Lassoff demonstrates the difference between IDs; which can be used once per web page; and classes; which can be used multiple times on a single web page.
-
Internal Styles
In CSS3; internal style sheets are styles that are defined in the head section of an HTML document; affecting only the elements of the document that they are in. In this video; Mark Lassoff demonstrates how to define internal style rules by placing CSS code within a style element in the head of an HTML document.
-
Link Hover Styles
CSS3 allows developers to change the style of a hyperlink when the user's mouse hovers over it. In this video; Mark Lassoff demonstrates how to use a combination of selectors and pseudo-selectors – link; visited; and hover – to style the anchors in an unordered list.
-
Making Images Responsive
In CSS3; you can use specific techniques to make an image fit different screen sizes; such as those of a tablet or mobile phone. In this video; Mark Lassoff demonstrates how to use the responsive design technique to design images that adjust themselves to different screen sizes.
-
Margin and Padding
CSS3 allows developers to insert padding between an element's sides and its content; and white space – a margin – between one element and the next. In this video; Mark Lassoff demonstrates how to insert padding between a div element's sides and the text it contains; and how to insert a margin of white space between two div elements.
-
Positioning – Relative and Fixed
Relative and Fixed Positioning in CSS3 are similar; but it's important to understand the distinction between the two. In this video; Mark Lassoff demonstrates how to use both Relative and Fixed positioning to position elements; borders; padding; and margins.
-
Positioning – Static and Fixed
CSS3 allows developers to specify static or fixed positioning of block-level elements on a web page. In this video; Mark Lassoff demonstrates static positioning (which is the default) and how to specify fixed positioning of two elements so they remain in position irrespective of the size of the browser window.
-
Styling Lists – Custom Images
CSS3 allows developers to style a list with custom bullets using an image file. In this video; Mark Lassoff demonstrates turning off the default bullet in an unordered list so that he can reference an image in the same folder as the HTML document as a replacement for the default bullet.
-
Styling Lists – Markers
CSS3 allows developers to change the markers for both ordered and unordered lists. In this video; Mark Lassoff demonstrates how to select the list using the appropriate CSS selector; specify the list-style-type rule; and then set an option such as decimals with a leading zero for an ordered list; and squares for an unordered list.
-
Text – Color and Alignment
CSS3 allows developers to adjust color and alignment in an HTML document. In this video; Mark Lassoff demonstrates how to use the style element to align a specific tag; and how to change the color of the background and the text within a logical division.
-
Text – Decoration; Transformation and Indentation
CSS3 allows developers to use text decoration; transformation and indentation to format text and style paragraphs in a document. In this video; Mark Lassoff demonstrates how to decorate text by underlining it; how to transform text by capitalization; and how to set a paragraph indent.
-
Text Shadow
You can create perfect text shadows using CSS3 code. In this video; Mark Lassoff demonstrates how to use the text-shadow property to add a shadow to the text on your page.
-
Working with Multiple Screen Sizes
In CSS3; you can easily display content on multiple screen sizes; such as tablets; monitors; and smart phones. In this video; Mark Lassoff demonstrates how to use the responsive design technique to create CSS that adapts itself for different screen sizes.
-
Media Queries
CSS3 media queries allow you to target specific conditions; such as screen size; and apply different sets of CSS rules based on the condition. In this video; James Lee demonstrates how to use the @media at-rule to define different styles specific to the width and orientation of display for multiple device types.
-
Shapes
The CSS3 Shapes feature allows you to wrap content around custom geometric shapes. In this video; James Lee uses the shape-outside property and its functional values to define circular and polygon shapes around which text will wrap in a float area.
-
Styling Links
CSS3 allows developers to style visited and unvisited links in ways other than the default underlined purple and blue. In this video; Mark Lassoff demonstrates the default appearance of visited and unvisited links and how to use CSS to change the colors and underlining.
-
Word Wrap
In CSS3; you can force long words to wrap to the next line keeping the element contained within a defined text box. In this video; Mark Lassoff demonstrates how to use the word-wrap property to break up and wrap a long word so that it remains within the container.
-
Introducing
CSS3 allows for styles to be defined in an external file which can then be applied to an HTML file. In this video; James Lee demonstrates how to style HTML elements using an external file.
