MrBool
×

Click here to login

If you don't have a registration, click here to register

Mrbool Courses

Online course

Cascading Style Sheets (CSS/CSS3)

In this course, we will learn the details of CSS (Cascading Style Sheets). CSS is a style sheet language that describes the presentation of a document written in a markup language like HTML. Using CSS, the designer can manipulate elements such as layout, colors, and fonts. With CSS, the document content is separated from the presentation, which provides a lot of flexibility in future changes and enables multiple pages to share formatting. A style sheet is made of rules, and each rule is made of one or more selectors and a declaration block. CSS is supported in all major browsers. Some of the latest features might not be, but we will point those out as we are covering them. As we progress through the course, we will also experiment with the new features added in CSS3.



Rating
554
  • Styling Elements

    • 5

      List StylingList Styling

      Mark as viewed

      In this video, we will discuss how to style a list. We will create an unordered list and apply the different styles on it. Along the way, we will learn about the difference between display and visibility.

      Watch this video
    • 6

      BackgroundBackground

      Mark as viewed

      In this video, we will discuss how to work with background. We briefly experimented with backgrounds before. But today we will discuss that in detail. We will start by setting the background color for the page and other elements.

      Watch this video
    • 7

      Working with textWorking with text

      Mark as viewed

      In this video, we will discuss how to use CSS to style text. There are different properties that give us the control that we need. As we have set the background color, we can also set the color of the text.

      Watch this video
    • 8

      Links and Fonts Links and Fonts

      Mark as viewed

      In this video, we will continue our discussion of links and fonts. We will have a brief discussion of fonts, specifically variant, weight, and size. Then we will explain a bit more about links.

      Watch this video
    • 12

      FloatingFloating

      Mark as viewed

      In this video, we will see how to float the element to the left or right of the page using the float attribute, add some margin and border to highlight the image and keep it a bit away from the text. And finally, we will see how to display a gallery of images using the float attribute.

      Watch this video
    • 13

      Creating MenuCreating Menu

      Mark as viewed

      In this video, we will learn how to create a menu from what we have learned so far. We will start by creating an unordered list of items that mimic some of the browser menu elements.

      Watch this video
    • 15

      Pseudo-ElementsPseudo-Elements

      Mark as viewed

      In this video, we will start our discussion by talking about pseudo elements. We will create couple of paragraphs, and see how using pseudo elements we can change the style for the first letter in the paragraph, and the first line as well and so on.

      Watch this video
    • 18

      TransformTransform

      Mark as viewed

      In this video, we proceed with the CSS3 discussion by talking about transforms. We will take the Mr Bool image displayed on the page and try to apply the different transforms to it.

      Watch this video
    • 19

      AnimationAnimation

      Mark as viewed

      In this video, we will talk about another CSS3 feature, which is animation. Today, we will switch to Notepad++ to align our videos with the user’s feedback.

      Watch this video
    • 20

      TransitionTransition

      Mark as viewed

      In this video, we will discuss transitions. Transitions are effects that let an element gradually change from one style to another. We start by indicating the property we want to add the effect to, and then the duration of the effect.

      Watch this video
    • 21

      TooltipTooltip

      Mark as viewed

      In this video, we will talk about how we can create a tooltip using CSS. As you know you can use some JavaScript to handle some tooltip features (like adding a delay before showing the tooltip).

      Watch this video
    • 22

      CSS Tools Part 1CSS Tools Part 1

      Mark as viewed

      In this video, I will discuss some of the tools that we can use when creating CSS. So far in this course we have covered the different features we can use in CSS and CSS3.

      Watch this video
    • 23

      CSS Tools Part 2CSS Tools Part 2

      Mark as viewed

      In this video, I will continue the discussion of some of the tools that we can use when working with CSS. As I indicated in the previous video, these tools help us create CSS elements faster.

      Watch this video
    • 25

      Combinators Combinators

      Mark as viewed

      In this video, we will talk about combinators. So the idea is that if I need to change the style of some elements, how can I have access to descendants, direct children and siblings?

      Watch this video
    • 26

      Tables Tables

      Mark as viewed

      In this video, we will talk about applying CSS to tables. As you know tables still play an important role in html pages. In many cases you need to style those tables in a way to bring attention to the user.

      Watch this video
    • 27

      ::before and ::after pseudo-elements::before and ::after pseudo-elements

      Mark as viewed

      In this video, we will talk about generated content. Specifically, we are discussing the ::before and ::after pseudo-elements to add content to the page. We will start with a simple page that contains some articles and an image.

      Watch this video
    • 32

      Columns and GradientsColumns and Gradients

      Mark as viewed

      In this video, we will continue the column discussion and talk more about gradients. In the previous video, we discussed the columns and how we can specify the count, fill, color, style, and gap.

      Watch this video