Web Design [CSS - Advanced HTML]

Topic outline

• Select topic General

  General

  Go to section General
• Select topic Module 3: CSS I

  Module 3: CSS I

  Go to section Module 3: CSS I

  Introduction to CSS. Inserting and Applying CSS

  • Introduction to CSS
  •  Inserting CSS
  •  Applying CSS

  What is CSS? The language of style is CSS which stands for Cascading Style Sheets. In general, the visual output of the web page is the combination of HTML (structure) and the CSS (style-appearance). In this submodule and we will learn the basic syntax rule, "Selector {Property: Value;}

  Inserting CSS. In this submodule, we'll discuss the different ways to insert CSS: inline CSS, internal CSS, and external CSS. We will also understand and apply the priority rule, "the closest to the element the highest priority it has". Finally, we will learn how to style text and fonts.

  Applying CSS. In this submodule, we will see how the "Box model" works and how we can format a web page using colors, Google fonts and font - Awesome icons.

  Activities: 4
• Select topic Module 4: CSS II

  Module 4: CSS II

  Go to section Module 4: CSS II

  Selectors. Pseudo-classes. Display properties. Navigation bar

  • Selectors
  •  Pseudo-classes
  •  Display properties 
  • Navigation bar

  Selectors. In this submodule, we will learn how to use CSS selectors to "find" and select HTML elements based on their name, id and class. We also learn to apply CSS rules to multiple classes and to specific content in a list.

  Pseudo-classes. Pseudo-classes are classes with some kind of “intelligence”. They change the appearance of the elements based on the different mouse events (onmouse over). In this submodule and we will learn how to use Pseudo-classes to apply different style at active, visited and unvisited states of links.

  Display properties. The display property is used to define how elements would appear on the page. The most common values for display are inline and block. In this submodule and we will learn how the display properties can be used to style a navigation bar.

  Navigation bar. We have already created a Navigation bar and we have applied icons to it. In this submodule, we will transform this HTML menu into a good-looking navigation bar.

  Activities: 4
• Select topic Module 5: Tables, more elements

  Module 5: Tables, more elements

  Go to section Module 5: Tables, more elements

  Table-HTML. Table-CSS. Div - Span elements

  • Table-HTML
  •  Table-CSS
  •  Div - Span elements

  Table-HTML. Tables are used very often. We use them to display visually data organized in rows and columns. In this submodule and we will learn how to use HTML markup to construct a table.

  Table-CSS. In this submodule, we will learn how to use CSS rules, and classes to apply different style to various elements of a table.

  Div - Span elements. In this submodule, we will learn how to use the block element DIV and the inline element Span. Also, we will learn how to align elements next to each other using the properties float and clear.

  Activities: 4