What is Dreamweaver?, video by Adobe – Go to it now!
Anatomy of a website by Adobe – Go to it now!
HTML tutorial by Adobe – Go to it now!
Layout web pages with CSS, tutorial by Adobe – Go to it now!
Style web elements with CSS, tutorial by Adobe – Go to it now!
Style web text with CSS, tutorial by Adobe – Go to it now!
How to make hyperlink, tutorial by Adobe – Go to it now!
Full list of tutorials for Adobe Dreamweaver CC – Go to it now!
Getting started with HTML, CSS
View basic HTML page with no CSS
View HTML page with CSS styling, created with Bootstrap in Adobe Dreamweaver CC
View basic web design, responsive
Getting Started with CSS
The HTML and CSS Connection
Hypertext Markup Language, HTML, and Cascading Style Sheets, CSS, are the building blocks web pages. HTML provides the structure of the page, while CSS the visual layout for devices. Web pages would not exist without HTML and CSS, and is usually goes unseen, except for web designers.
Hypertext Markup Language (HTML), short description
A language for describing web pages consists of plain text.
Cascading Style Sheets (CSS), short description
A language used to describe the design of HTML.
Learn more about CSS at w3schools with their tutorial.
•Allows to separate the visual properties from the content (Text content, what people
see, not mixed up with CSS, or the design or visual elements.
•Can be internal or external from a HTML page (CSS can be located at the top of the
page in the header or on a separate page.)
•An external CSS file can be used on multiple HTML pages (Means more can be
controls on external pages than if just one page. Especially important if you have a
large website with several pages.)
Advantages of External CSS
•Easy to update, changes entire site
•Consistency across pages
•Smaller file size
HTML Defaults and CSS
There are default settings for HTML tags, such as text is black and backgrounds are white. CSS gives you the opportunity to change to look of your webpage.
Basic CSS Elements
Background – Allows you to change the background attributes (such as color) of an element such as a paragraph, link, div, or entire Web page.
Color – Allows you to specify the color of text.
Margin – Allows you to specify the width of top, right, bottom and left margins — for any element such as a paragraph, link, or entire Web page.
Padding – Allows you to specify the width of top, right, bottom and left padding inside an element — for any element such as a paragraph, div, or image.
Border – Allows you to specify the thickness, style and color of a border — for any element such as a paragraph, div, or image.
Font-family – Allows you to specify a hierarchy of font families for any element such as a paragraph, div, or entire Web page. For information about typography and CSS, see the Design Resources page here at Journalists’ Toolkit.
Font-size – Allows you to specify the size of the font for any element such as a paragraph, div, or entire Web page.
See this at the original source by Mindy McAdams.
How to use CSS element selectors, lynda.com tutorial
This web development tutorial shows how to use the CSS element selectors to restyle an element based on its tag.
Google Chrome, Firefox, Internet Explorer (IE), Safari and Opera are some of the most popular web browsers used today. Not only is it important to make sure your website works on different web browsers, it good to know what browser are most popular.
See the latest details on the most popular web browsers at W3C.
CSS box model
The box model is construction of HTML and CSS that allows you to format the default settings of any HTML element.
Learn more about the CSS box model at W3School website.
Adobe has a tutorial about the CSS Box model, learn more.
Styles for Links in CSS
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
- a:link – a normal, unvisited link
- a:visited – a link the user has visited
- a:hover – a link when the user mouses over it
- a:active – a link the moment it is clicked
Learn more about links in CSS at w3school.com.
Text can be bold, italic, superscript and more!
Learn more about text formatting at w3schools.com.
Code Navigator in Adobe Dreamweaver
A Code Navigator in Adobe Dreamweaver is an editing tool that allows you to instantly inspect an HTML element and assess the CSS formatting.
Using the CSS Designer, you can add and manipulate CSS properties in Dreamweaver.
- CSS imposes an imaginary box on each element. The box and its content can be styled with borders, background colors, images, margins, padding and other formatting.
- HTML feature default settings if you don’t style with any CSS, such as text is black and backgrounds are white.
- Block elements create standalone elements and inline elements appear at the insertion point.
- CSS3 is the latest standard for CSS. It’s supported by modern browsers and is currently in use. Some of the most important modules include: Box Model, selectors, background and borders and more.
Learn more about CSS at w3schools.com.
View examples of websites with different CSS stylesheets
HTML examples – Learn to use HTML
CSS tutorial by Mindy McAdams
You must be logged in to post a comment.