HTML Styles Complete Guide (External, Internal, Inline, Classes) [Dreamweaver] ICT IGCSE 0417

Опубликовано: 13 Октябрь 2024
на канале: Nicos Paphitis

813

This is a complete tutorial on styles in web design using Dreamweaver and is primarily focused on the requirements for the Cambridge 0417 ICT IGCSE syllabus, but is a great tutorial for anybody that wants to learn about External stylesheets, Internal Styles, Inline Styles and Classes.
Use the timestamps below to see what is contained in this tutorial and to jump to points of interest. All the files I used for this tutorial can be downloaded from the link at the bottom of this description.

0:00 Intro

------------------------
Understanding Styles
------------------------
01:01 The 3 layers of web design
03:12 Understanding what styles do using External Stylesheets
05:47 Looking at the declaration of an external stylesheet in HTML code.
07:09 Looking at the declaration of an Internal style in HTML code.
08:29 Understanding precedence in of Internal and External styles.
10:30 Looking at the declaration of in-line styles in HTML code.
11:35 Understanding precedence in of Internal, External and in-line styles.
12:52 Understanding classes
17:37 Seeing an example of the same webpage with External, Internal and In-line styles applied.

-------------------------------------------------
Dreamweaver layout and analyze the HTML document
-------------------------------------------------
19:21 Opening our HTML document in Dreamweaver and looking at the layout.
21:13 Analyze the HTML document to see what we are going to be adding styles to.

------------------------
External Stylesheets
-----------------------

22:55 Crating and external stylesheet
Adding selectors to the external stylesheet
23:43 Adding the selectors: Body, H1, H2, P, Li,
27:14 Efficient programming technique with the selectors Table and Td
28:15 Selector for table to align table to the center of page
30:00 Attach the stylesheet to a HTML document and view the modified HTML document
31:34 Creating a Class in the external stylesheet
33:20 Applying a class in the HTML document.
35:46 Viewing our HTML document with the external stylesheet attached in the browser.

------------------------
Internal Styles
-----------------------
36:26 Creating Internal styles and classes. We use external stylesheet to make it easier
38:28 Copy the styles into the HTML document in the style tag. Making sure it is after the link to the external stylesheet as internal styles have priority.
40:40 Adding the internal class to a heading.

------------------------
InLine Styles
-----------------------
42:14 What is classified as an inline style. Example of old HTML code style and more modern CSS format inline style with examples.
44:26 adding an inline style which and seeing how it has priority with examples
48:17 Adding inline styles directly to text.
49:22 Adding inline style to tags that are not modified by other styles (external or internal)
50:05 Adding Internal style to a list, both to all items in the list or single item.

-------------------------------
Examples of Priority of Styles
-------------------------------
52:00 Modifying properties in the CSS style directly or from the CSS properties window
53:54 Changing the order of entries in the stylesheet to see the cascading priority of styles.

Useful Links:
Working with tags (CSS): • Working with Stylesheets - Cambridge ...
Play list on Dreamweaver: • Web Design (Dreamweaver) IGCSE 0417 ICT

Link to download the files (web page and images) used in this tutorial:
https://www.dropbox.com/scl/fo/v3yw3i...