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

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

1,793

This is a complete tutorial on styles in web design using Microsoft Expression Web 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.

------------------------
Expression Web
-----------------------
19:22 checking files, start Expression Web and set up the interface
23:03 Configure your page editor options

-----------------------
External Stylesheet
-----------------------
23:48 Creating an External Stylesheet
24:16 Adding selectors: body, h1, h2, custom font names
29:01 Add selectors table and td using efficient programming technique. Add unique properties for table selector.
32:00 Table selector so that table is aligned to center of page
33:33 Attach your external stylesheet and preview your webpage in the browser.
35:05 Adding the P selector to the stylesheet
37:05 Identifying the code that links the stylesheet to the HTML document in the head tag.
38:23 Creating a class and demonstrating how to add the class to a tag. Seeing how Class has priority.
43:16 Modify the styles in the Stylesheet
43:53 Seeing what border collapse = separate looks like and changing to collapsed.

-----------------------
Internal Styles
-----------------------
45:10 Understand that internal styles MUST be placed after the link to any external stylesheets
46:25 Creating internal styles
47:52 Modifying the list tag li in the internal style.
49:03 adding a class in the internal styles
49:46 Add the created internal styles to the HTML document (Placement id IMPORTANT)
51:01 Demonstrating precedence of internal styles over external stylesheets.
52:36 Add a class from the internal styles to a HTML tags

-----------------------
Inline Styles
-----------------------
54:23 Understanding that inline styles are entered in the HTML tags
55:45 Adding an inline style to the P tag.
57:03 modifying an inline style
57:49 Old inline style type and the new CSS style of inline tags.
59:15 Adding inline styles to modify the image size.

01:00:00 Wrap up

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...