Orlando Web Design: HTML5 for Beginners Lesson 3

orlando web design html5 css

Orlando Web Design & Development


1. What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles are normally saved in external in a CSS document with the extension .css

2. CSS Benefits

  • Separate content from presentation
  • Reduce file size
  • Cleaner Code
  • External Style Sheets save time
  • A webpage can have different styles for different devices like screen, mobile, and print
  • Accessibility

3. Cascading Order

Style precedence from higher to lower priority:

  1. User defined
  2. Inline style (inside an HTML element)
  3. Embedded style sheet (in the head section)
  4. External style sheet
  5. Browser default

An inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser.

If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Within the external sheet or the embedded styles the last style declared is the strongest and it can override a previous declaration.


4. Normalize CSS

Normalize CSS is needed to ensure a more or less “identical cross-browser” presentation of your web-sites. By default different browsers use different values for margin, padding or line-height.

CSS Normalize help most browsers to render sites more similar.

Normalize.css:

  • preserves retains many useful default browser styles.
  • fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements & correcting font-size for preformatted text, SVG overflow in IE9.
  • doesn’t clutter your debugging tools
  • is modular, broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles.

Learn more about Normalize CSS


5. Document Tree

css docuemnt tree

<h1>, <p> & <strong>:

  • Are siblings to each other because they share the <body> element as their common parent
  • Are descendants of the <html> element, which is their ancestor.

6. Style Inheritance

Some values can be inherited by the children of an element.

If one of these values is left unspecified the HTML element will inherit the style setting from its parent.

Example:

If you specify that your <body> tag has a font size of 14px. The paragraphs will inherit the size unless you specify a size for paragraphs.


7. CSS Syntax

CSS_Syntax


8. Kinds of CSS Styles

a. Inline Styles

  • Style specified inside an HTML element tag
  • Affect only that HTML tag.

Example:

<p style="color:red">This is a paragraph.</p>

b. Embedded Styles

  • Use to style only one page
  • Style specified in the head section of the HTML page

Example:

<head>
 <style type="text/css">
 p {color:red;}
 </style>
 </head>

c. External Styles

  • An external style sheet is ideal when the style is applied to many pages.

Step1: Create a link to the CSS file

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />
 </head>

Step 2: Create the styles in the CSS document

 p {color:red;}

d. Adding a style with a <span> tag

<span class="green">Text goes here</span>

9. ID’s Vs. Classes:

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.

a. The ID Selector:

  • The id selectors are the most powerful type of selector in terms of CSS specificity.
  • The id selector is used to specify a style for a single, unique element.
  • The id selector uses the id attribute of the HTML element, and is defined with a “#”.

Example:

Step1: Assign the ID

<p id="products">text</p>

Step 2: Create the styles in the CSS document

#products {color:red;}

b. The Class Selector:

  • The class selector is used to specify a style for a group of elements.
  • The class selector uses the HTML class attribute, and is defined with a “.”

Example:

Step1: Assign the class

<p class="products">text</p>

Step 2: Create the styles in the CSS document

.products {text-align:center;}

10. CSS Properties

a. Comments

Comments are a great way to:

  • Keep styles organized
  • Troubleshoot when styles conflict

Example:

/*This is a comment*/

b. Measurement Values

UnitDescription

%

percentage

in

inch

cm

centimeter

mm

millimeter

em

The size can be calculated from pixels to em using this formula: pixels/16=em

pt

point (1 pt is the same as 1/72 inch)

pc

pica (1 pc is the same as 12 points)

px

pixels (a dot on the computer screen)

c. Color Values:

HTML identifies color either by color name or color value (RGB & Hexadecimal).

147 color names are defined for HTML and CSS

ValueDescription
color_nameA color name (e.g. red)
rgb(x,x,x)An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbbA HEX number (e.g. #ff0000)

d. Text Properties

http://www.w3schools.com/css/css_reference_atoz.asp

PropertyPossible ValuesExamples
font-familyArial, Verdana, sans-serif, “Times New Roman”, Times, serif, etc.p { font-family: Arial; }
font-sizeValue in px, em or %p { font-size:14px;}
font-styleNormal, italic, or obliquep { font-style: italic; }
font-weightNormal, bold, bolder, or lighter.p {font-weight: bold; }
fontin order : font-style font-variant font-weight font-size/line-height font-familyp {font: italic small-caps bold 12px arial,sans-serif}
colorValid color names, RGB values, hexidecimal notation.p { color: green; }
p { color: rgb(0,255,0); }
p{ color: #00FF00; }
line-heightNumbers, percentages, lengths, and the predefined value of normal.p{ line-height:140%; }
letter-spacingNormal, length (px, em or %), or inheritp {letter-spacing: 2px}
text-alignLeft, right, center, or justifyp { text-align: center; }
text-decorationNone, underline, overline, line-through, or blinkp { text-decoration: none; }
text-transformNone, capitalize, uppercase, or lowercasep { text-transform: capitalize; }

e. Border Properties:

PropertyPossible ValuesExamples
border-style(sets styles for all borders)none, dotted, dashed, double, groovediv { border-style: dotted}
border-top-stylediv { border-top-style: dotted}
border-right-stylediv { border-rigt-style: dashed}
border-bottom-stylediv { border-bottom-style: double}
border-left-stylediv { border-left-style: groove}
border-width
(sets widths for all borders)
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.div { border-width: 5px}
border-top-widthdiv {border-top-width: thin }
border-right-widthdiv {border-right-width: medium }
border-bottom-widthdiv {border-bottom-width: 2px }
border-left-widthdiv {border-left-width: thick }
border-color
(sets color for all borders)
The color can be set by name, RGB or Hexadecimal valuediv { border-color: red}
border-top-colordiv { border-top-color: #000}
border-right-colordiv { border-right-color: blue}
border-bottom-colordiv { border-bottom-color: #333}
border-left-colordiv { border-left-color: red}
borderShorthand: declare all the borders properties at once.border: width style colordiv { border: 1px solid red}
border-topdiv { border-top: 1px solid red}
border-rightdiv { border-right: 4px dashed blue}
border-bottomdiv { border-bottom: 2px dotted red}
border-leftdiv { border-left: 5px dashed pink}

f. Background Properties

PropertyPossible ValuesExamples
background-attachmentfixed or scrollbody { background-attachment:fixed; }
background-colorValid color names, RGB & Hex values,body { background-color:green; }
background-imageURL values.body { background-image: url(img.jpg); }
background-positiontop left / top center / top right
center left / center center / center right
bottom left / bottom center / bottom right
body { background-position:10px 50px; }body { background-position:top center; }
background-repeatRepeat , repeat-x , repeat-y or no-repeatbody { background-repeat:repeat-x; }body { background-repeat:no-repeat; }
backgroundIn order:background-color
background-image
background-repeat
background-attachment
background-position
body { background:green url(image.jpg) no-repeat fixed center center; }

g. Styling <hr/>

Some properties supported are:

  • background-color
  • height
  • width
  • border

More Examples on how to style the <hr/> tag


11. CSS3

CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Useful resources for CSS 3

Category: Orlando Web Design No Comments