Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreCSS
Rating: 4.6 out of 54.6(13 ratings)
94 students
CSS
Cascading Style Sheets (CSS) is a great way to further your web site building skills.
Created byLearnit Anytime
Last updated 6/2013
English
What you'll learn
- Advanced Formatting and Style with CSS
Explore related topics
Course content
3 sections • 31 lectures • 1h 23m total length
- How CSS Works4:04
Learn how cascading style sheets redefine tags and apply classes to set defaults for elements like the body and headings, enabling consistent typography and layout.
- CSS Set Up3:28
Learn to set up css by declaring the doctype, adding a head style section with type text/css, and using comments to hide css from old browsers.
- Redefine Body5:17
Learn to redefine the body tag in CSS: set font family, size, color, and style; adjust background; modify tables and images by removing borders with curly braces and colons.
- Redefine h1 & h24:01
Learn how to redefine h1 and h2 tags in CSS, apply text-transform to uppercase or lowercase, and use negative bottom margins to tighten spacing.
- Redefine td & img3:19
Learn to lay out tables with CSS by redefining td to vertical-align: top and removing borders from linked images, while redefining body, h1, h2, td, and img selectors.
- Creating Classes3:41
name a css class with a dot, define properties like background color and font size, apply it to elements via the class attribute, and reuse it across cells.
- Setting Padding2:04
Learn how to apply padding in CSS by targeting individual sides or using the clockwise shorthand, adjusting top, right, bottom, and left values to create space inside elements.
- Background Images2:28
Learn to apply background images in CSS, control tiling with no-repeat, and combine background color with an image for smoother loading, by applying styles to a cell, body, or both.
- No-Repeat Bkg0:58
Set a non-repeating background in CSS with background-repeat: no-repeat, then move the image to the bottom using background-position to align with a pattern and curved edge.
- External Styles3:02
Learn how to create an external stylesheet, link it to your page, and apply shared styles across pages for faster downloads and easier maintenance.
- Inline Style1:28
Apply inline styles by adding a style attribute directly to an element to set CSS properties, such as font-size: 24px, useful for single-use styling or emails without a head.
- Using Span1:22
Discover how the span tag enables inline styling by applying a style attribute to a specific word, such as setting font size to 10px and color to red.
- Course Check List1:01
Navigate the CSS course checklist to structure your learning and track progress through the CSS course.
- Design with CSS0:08
Explore designing with CSS and learn a layout method that replaces tables, enabling flexible, modern page structures.
- Float3:28
Learn how to float an image in CSS to wrap text, create a left-float class and apply it to the image, and fine-tune with margins and padding for alignment.
- DIV Intro2:19
Explore how divs replace tables for CSS layout, using a class to style a div, set width and height, and wrap content to control layout with an external style sheet.
- Border and Padding3:33
Explore how margins, padding, and borders affect element size in the box model, and learn to set border style, width, color, and the four sides in clockwise order.
- DIV Trick3:17
- Overflow Scroll2:43
Set a 300-pixel tall box, enable overflow-y: scroll to create a vertical scroll area, and learn when to use overflow hidden to hide overflowing content.
- Centering DIVs1:11
Center a div by setting the top and bottom margins to zero and the left and right margins to auto, which auto-fills the remaining space to center it horizontally.
- Floating DIVs2:16
Learn how to place divs side by side using float left in css, setting width, height, and background color so adjacent blocks appear next to each other instead of stacking.
- DIV Layout Method3:24
Learn how CSS layout centers a wrapper, floats inner divs to create a three-column design, and uses overflow hidden to avoid browser bugs.
- Create a DIV Layout6:42
Build a centered 980px wrapper, hide overflow, and create a three-column layout with a header and content by floating columns (150px, 500px, 330px); observe how borders and padding affect width.
- ID's2:07
Explore how CSS uses classes and IDs for layout, with IDs providing a unique target using the # selector for precise styling and future JavaScript interactions like fading elements.
- Vertical Expanding DIVs2:20
Apply a background image to the wrapper in css and use overflow hidden to stretch a vertical column of content, solving floating left, middle, and right divs expanding unevenly.
- Course Check List1:01
Use the CSS course check list to guide your progress through the CSS course, focusing on completing the check list to finish the course.
- Compound Styles2:28
Learn how to use compound styles in CSS by applying multiple conditions to target specific sections, such as left and right divs, with IDs or classes.
- CSS Links2:38
Master styling links in CSS by defining normal, visited, and hover states, removing underlines, and understanding cascade rules that determine the final color.
- Links with Bullets3:06
Learn to build clean vertical navigation lists by removing bullets, margins, and padding. This CSS uses selectors for the nav div and ul to set list-style none.
- Compound Links3:12
Define compound links in the nav div by removing underlines and converting links to block elements so the entire area lights up on hover, with padding and borders.
- Course Check List1:01
Explore a course check list for css, outlining essential steps to organize learning, review core styling techniques, and practice best practices for building web styles.
Requirements
- HTML
Description
Once you're familiar with HTML, Cascading Style Sheets (CSS) is a great way to further your web site building skills. CSS is used to extend the formatting and stylistic capabilities of your HTML documents, allowing greater flexibility and control in page layout and design. In this course, you will find worksheets and sample files to play with. This 2 hour course will allow your designer fingerprint on any website.
Who this course is for:
- Advanced Web Developers