Learning CSS
4.1 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
65 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning CSS to your Wishlist.

Add to Wishlist

Learning CSS

Take your first steps into the world of modern web design using CSS
4.1 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
65 students enrolled
Last updated 1/2016
Current price: $10 Original price: $75 Discount: 87% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Learn how to work with CSS rules effectively to build efficient and modern websites
Manipulate specific elements on an HTML page with the power of CSS Selectors
Explore the basics of color theory to take advantage of all the capabilities that come with adding color to your site
Leverage the power of absolute, relative, static, and fixed positioning techniques to enhance the look and feel of your websites
Control the element size, position, as well as their interactions with other elements to create content that is adaptable and dynamic
Empower yourself to work with a variety of fonts to give your website that extra edge
Enhance user experience using dynamic content manipulation to create layouts that work on all digital devices
View Curriculum
  • This course is meant for web design beginners who know the basics of HTML, and want to step into the future by learning how to use CSS.

As a modern day web designer, it is very critical for you to prepare for the CSS3 world we live in. A major challenge that designers face in their day-to-day life is making their designs stand out from the rest and ensuring they work on all devices and platforms. The birth of CSS3 brings with it many updates that make designing in HTML easier and more appealing. CSS adds excitement to HTML elements, and allows designers to add color; manipulate layouts, size, and position; enhance the visuals of element objects; and much more.

Learning CSS gives you the introduction you need to start creating web pages that are visual marvels with CSS. Dealing with the absolute fundamentals of CSS, this video course gives you everything you need to know to enhance and embellish HTML web pages.

Before we plunge into the world of CSS, we are going to start off by playing around with CSS scripts, learning about styles, rules, and inspecting HTML elements. We'll then investigate HTML selection using classes, IDs, and elements. Then, we will make our website visually stimulating using colors. We will be introduced to CSS selectors, implementing colors, and manipulating the size and position of objects and layouts on the page and in relation to each other.

We'll get better and better by making the elements of our website interact with each other and tweaking the layout so our web page works on all digital devices, thereby enhancing its appeal. Finally, we'll get to grips with techniques for text and content manipulation to enhance the look and feel of our site.

Learning CSS will give you a flying start at creating stunning websites, arming you with all the know-how you'll need to incorporate CSS into your workflow

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.

Who is the target audience?
  • This video course follows a pragmatic approach that builds on the viewer knowledge section after section to efficiently design sleek web pages using CSS.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 40 Lectures Collapse All 40 Lectures 03:55:32
Defining Our First CSS Rules
7 Lectures 26:26

This video will provide an overview of the course.

The Course Overview

Before we get a head start on the concepts, it is important to know what we are about to cover.

Getting to Know Our Project

Let's start our journey into the world of CSS with our first live example in HTML using CSS. We will add our first CSS rule that will give a background to our HTML page.

Setting Our First Style

In this video we will continue and discuss how to add style to HTML documents.

Adding Multiple Rules to an Element

In this video, we will turn our code into a rule in order to use it later in our document. We will experience creating our first CSS rule.

Converting Our Style into a Rule

In the last few videos, we created a rule that was used in our HTML document but couldn’t be used on our website. In this video, we will discuss how to tackle this situation.

Moving Our CSS Logic into a Separate File

We will wrap up this section as we take a look at how to peak at other sites’ code. One of the most common things HTML/CSS developers do is peak at wonderful samples they like online and learn from them. At the end of this video, you will know how to tweak CSS rules of your own or even peak and grab ideas from other sites.

Inspecting Any CSS on the Fly
Playing with CSS Selectors
6 Lectures 24:33

In the last few videos, we focused on positioning our code and learning how we can reuse it in the document. In this video, we will take a deeper look into the process of defining CSS rules.

Preview 04:59

Until now, each CSS rule we created was directly connected to an element or group of elements on stage. CSS classes enable you to define groups of elements of your own. CSS classes are not restricted to an element type and as such enable you to define one class for many different types of elements. Let’s work on classes and know them better.

Introducing CSS Classes

Let’s turn our attention to talking directly with unique items.

Talking to HTML Items with IDs

In videos so far, we were introduced to global flat and simple rules. Let’s stride further and discuss how to travel through a document.

Traveling Through a Document with CSS Rules

Many times you will find yourself creating the same rules for more than one item. You might ask yourself, is there a way to combine the rules for more than one item? The answer is yes, and we will see how to get it done in this video.

Defining a Few Items at the Same Time

As your CSS grows, so does the effort of the HTML browsers to render your code. We will spend some time talking about how you can build your code more effectively to make it easier for the browser to process your pages.

Best Practices When It Comes to CSS Rules
Bumping It Up With Colors
4 Lectures 36:37

Color is probably the thing you think most of when creating pages in CSS. In this section as a whole, we will spend a lot of time adding color to our HTML page.

Preview 12:51

In this video, you will learn about properties that contain multiple directions at the same time.

Working with the Background Property

Let's turn our attention to colors and how they work in CSS.

Understanding How Colors Work in CSS

Let’s dive even deeper into the colors and how they work in CSS.

Working with Advanced Color Systems
Controlling Elements
4 Lectures 20:42

We are now ready to take a look at controlling the opacity of elements.

Preview 06:41

Over the last few videos, we played with colors of elements and focused on their content. In this video, we will move out of our shapes and discuss how to control their outlines.

Adding Outlines to Shapes

Many developers get confused when it comes to the difference between outline and borders in CSS. They do look alike and do almost the same thing. In the last video, we discussed how to work with outlines; so, why there are separate rules for outlines and borders? Let’s find out.

Sticking to Our Borders

In the last video, we discovered how to manipulate the way borders look. However, how about manipulating them? This video will lead you to the answer.

Talking to One Line at a Time
Manipulating Sizes
4 Lectures 25:58

The first task in this section is to define the width and height of elements. We will discuss explicit and relative sizes and even how to control the range of sizes that an element can be of as the HTML page scales.

Preview 08:29

Elements relate to other things on screen and to themselves as well. Let’s talk about margins of elements and how they relate to each other.

Defining Margins of HTML Elements

CSS enables us to scale elements in many ways. Some ways are relative to the system we are in, while others are not. In this video, we will consider the differences between them and know how to pick the right measurement system for our needs

Sizing Things in Different Ways

A few videos ago, we discovered how to control the relation between elements with padding. Now, we will explore this subject further. In this video, we will consider how to define the space between the boundaries of a box and its content.

Working with Padding
Element Layout Interaction
4 Lectures 23:01

Now that our items talk with items that that surround them, let’s take a look at how to define the elements’ layout. We will discuss using clear and float commands in this video.

Preview 03:31

Over the last few sections, our focus was directly associated with items as we assumed that each item has prebuilt characteristics. Let’s talk about the different layout options we have.

Displaying Elements as Block or Inline Elements

Horizontal scrolls can get really annoying, and we really don’t want to keep needing them in our sites. Let’s tackle this problem.

Avoiding Scrolls

Over the last few sections, our focus was directly associated with items, while we had no control over how they relate and react to other elements on the HTML page. We covered all the core rules of laying things out relatively in CSS, and we are ready to move on to a now topic: absolute positioning.

Types of Position Layout
Texting the CSS Way
7 Lectures 49:51

Up until now, the copy that was added to our HTML object was treated as it is; however, in reality, we want to give it a style and make it our own. The following section describes ways we can manipulate text in CSS. We will start our exploration with bidirectional text. By the end of this video, you will know how to spot a copy that isn't well rendered, even if it’s not in your native language and how to fix it.

Preview 10:43

The first thing we need to do when working with text is define its language format layout and overall direction and alignment. Let’s take a look at this in action.

Aligning and Text Direction

In the last video, we stepped into the world of text as we defined the overall flow of our text. In this video, we will go a step closer into the character level and be introduced to the basics of working with fonts in CSS.

Defining Fonts

To work with fonts, we need to understand the font families they belong to for best results. We’ll take a look at just this in this video.

Types of Fonts

In the last video, our focus was on the characters and how they look. In this video, we will move our attention one step higher as we explore decorating text.

Decorating and Indenting Text

Throughout this section, we will explore the ways text can be manipulated in HTML by leveraging CSS rules. In this last video of the section, we will go a step higher and deal with paragraph elements.

Paragraph Level Formatting

The orphans and windows properties help control the way HTML pages are printed out. While windows define the minimum number of lines a paragraph must have at the top of the printed page, an orphan defines the minimum number of lines at the bottom of the page. By the end of the video, you will see them come to life.

Working with Windows and Orphans
Content Manipulation
4 Lectures 28:24

Sometimes we want to hide things for a minute or forever; CSS hands us this capability. Let’s take a look at this in action.

Preview 06:02

Sometimes, you will have a batch of copies you want to put into HTML pages. It would be a horrible waste of time to copy and paste this content over and over. However, CSS enables us to dynamically define repetitive content as a part of the CSS rules.

Adding Content Before and after Elements Dynamically

In the last video, we discovered how to add content dynamically in HTML using CSS. In this video, we will continue exploring this subject as we expand on to it by adding a counter.

Dynamically Counting

In the last video, we discovered how to add content dynamically in HTML using CSS. In this video, we will continue exploring this subject as we expand on to it by adding a counter.

Changing How the Cursor Looks Like
About the Instructor
Packt Publishing
3.9 Average rating
4,028 Reviews
32,382 Students
318 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.