How to integrate HTML and CSS with Dart
In this answer, we’ll discuss some basics of HTML and CSS and then talk about integrating these with Dart.
HTML
HTML is a language used to describe web pages. The initial page structure, elements, and any scripts for interactive features are all set up using tags in HTML. HTML creates the initial document tree and specifies element types, classes, and IDs that enable HTML, CSS, and Dart programs to refer to the same elements.
To describe the document, HTML employs tags. Here is a list of some HTML tags.
Tags | Description |
| This represent the head section of an HTML document. |
| This represent the body section of an HTML. It contains contents displayed in the browser such as headings, paragraphs, photos, tables, links, videos, etc. |
| This represents a page title. |
| This represents level-one header. |
| This represents a paragraph. |
| This represents a list item. |
| This represents a break line. |
CSS
Cascading Style Sheets (CSS) is used to describe how elements within a document appear. HTML uses CSS to define styles that determine how page elements look.
Integration with Dart
Dart provides a library called dart:html used to manipulate elements in an HTML page. We must import the dart:html library to embed an HTML in the Dart file.
The dart:html library offers the top-level function called querySelector() function. The querySelector() function is a string containing a string selector that uniquely identifies the object. The string selectors can be classes, identifiers, or attributes.
The querySelector() function helps access and manipulate the elements inside an HTML page from the Dart file. Here is the syntax for the querySelector() function:
Element querySelector(String selectors);
Code
The following example shows how to integrate HTML and CSS with Dart:
name: dart_example description: A sample command-line application. version: 1.0.0 # repository: https://github.com/my_org/my_repo environment: sdk: '>=2.18.5 <3.0.0' # dependencies: # path: ^1.8.0 dev_dependencies: build_runner: lints: ^2.0.0 test: ^1.21.0
Code explanation
We create three files: styles.css, index.html, and /bin/dart_example.dart.
In styles.css, we define the style for the body and the h1 text.
In index.html, we connect to the style.css file using the <link> tag. Next, in the <body> tag, we use the h1 tag and give it a unique ID called educative.
In the /bin/dart_example.dart file:
- Line 4: We use the
querySelector()function to access the element. Next, we use the dot operator (.) to assign a value to it.
We also have another way to assign value to the querySelector() function:
-
Line 6: First, we use the
querySelector()function to access the element and assign it to a variable calledmyText. -
Line 7: Finally, we assign a value to the variable using the dot operator (
.).
Note: Under the hood, Dart code is converted into JavaScript before launching the web app.
Free Resources
