REFERENCE LIBRARY
LEARNING CENTER

The CSS and HTML Secrets of DataFlex WebApps

To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe

DataFlex courses

Information

The CSS and HTML Secrets of DataFlex WebApps
Introduction (0m 33s)
Cascading Style Sheets (18m 07s)
Next lesson:
CSS Sizing and Positioning
Cancel

The CSS and HTML Secrets of DataFlex WebApps

Lesson 2 - Cascading Style Sheets

A summary of the video course

In this lesson, we'll unravel the world of Cascading Style Sheets, or CSS, which plays a pivotal role in determining the visual appearance of your HTML page. CSS allows you to apply styles to different elements on your web page, shaping their look and feel.

Inserting CSS 

To incorporate CSS into your web page, there are three primary methods:

  • External CSS: This is the most common approach. You create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link rel="stylesheet" href="styles.css"> element in the HTML's head section.
  • Internal CSS: Alternatively, you can embed CSS directly within your HTML using the <style> element. Simply place your CSS rules inside this element within the HTML file.
  • Inline CSS: For specific elements, you can apply CSS styles directly by using the style attribute. This method is useful for overriding styles on individual elements.

CSS Syntax

CSS follows a consistent syntax:

  • Selectors: These define which HTML elements the CSS rules should apply to. For example, h1 selects all <h1> elements.
  • Properties: Within curly braces {}, you specify the properties you want to change, like color, font-size, and background-color.
  • Property Values: Each property is assigned a value, such as red, 16px, or #FFFFFF.
  • Semicolons: Separate multiple properties with semicolons to ensure proper syntax.

Here's an example:

This is the basic page from the previous lesson with the CSS applied:

Cascading in CSS

CSS stands for "Cascading Style Sheets" because it operates with a cascading structure. This means that styles can cascade down from parent elements to their children. For instance, if you set a text color on the body element, child elements like <h1> within the body will inherit that color by default.

CSS Selectors

Selectors define which HTML elements your CSS rules apply to. Common selectors include:

  • Element Name: Selects all elements of a specific type (e.g., p for paragraphs).
  • Class Names: You can assign class names to HTML elements and use them as selectors (e.g., .highlight).
  • IDs: Similar to class names but unique within the page (e.g., #header).
  • Combining Selectors: You can combine selectors to target specific elements (e.g., div > p selects paragraphs directly within a div).


This example shows the .highlight class with the inspector tool:

Specificity in CSS

Specificity is crucial when multiple CSS rules target the same element. In such cases, the rule with the highest specificity takes precedence. The hierarchy generally follows: IDs > Class Names > Tagnames.

Pseudo Selectors and Pseudo Elements

CSS offers pseudo-selectors like :hover (for hover states) and pseudo-elements like ::before and ::after for inserting content before or after an element.

Further Learning

CSS is a vast topic with many nuances. To deepen your understanding, consider exploring resources like W3Schools' CSS training course and interactive tools like Fluke Out, a CSS selector learning game.

In the next lesson, we'll delve into the intricacies of sizing and positioning in CSS. Stay tuned for more web styling insights!

©2024 Data Access Worldwide, all rights reserved
Privacy policy Cookies About dataaccess.com Online Documentation