Getting Started with CSS

☕ Tutorials
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!

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

CSS BENEFITS

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

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

boxmodelw3schools

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.

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

CSS Designer
Using the CSS Designer, you can add and manipulate CSS properties in Dreamweaver.

CSS Summary

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

 

Links

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