CSS (Cascading Style Sheets) / CSS Tutorial
What is CSS (Cascading Style Sheets)?
- Styles define how to display HTML elements (advanced topic: realize HTML DOM to learn Javascript well!)
- External Style Sheets stored in CSS files (.css files) are powerful to reuse presentation-style modules in HTML documents.
 |
| HTML DOM structures (http://upload.wikimedia.org/wikipedia/commons/e/e4/JKDOM.SVG) |
 |
| Apply to HTML files, all text within <h1> tag is blue color . |
- element selector selects elements based on the element name. E.g. body {background-color: black;}
- id selector uses the id attribute of an HTML tag (e.g. <h1 id="font_em"> to find the specific element. E.g. #font_em {font-size: 2em;}
- class selector finds elements with the specific class (e.g. <h1 class="font_red">). E.g. .font_red {color: red;}
- External style sheet: e.g. <head><link rel="stylesheet" type="text/css" href="my.css"></head>
- Internal style sheet: e.g. <head><style>body {background-image:url("images/background.gif");}</style></head>
- Inline style: e.g. <p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
HTML (Hyper Text Markup Language) is a language for describing web pages with HTML tags and plain text. Start (e.g. <p>, <h1>, <b>) and end HTML tags (e.g. </p>, </h1>, </b>) are also called opening tags and closing tags. Some empty-content tags, not for containing text, start/end tags can be written in the same place, e.g. <p />, <b /> . All tags should be written in lowercases. HTML elements (tags) can have attributes to provide additional information about the element, e.g. <a href="http://www.w3schools.com">This is a link</a>. Some attributes (id, style, class, title) can be used on any HTML element.
- Attributes are always specified in the start tag.
- Attributes come in name/value pairs like: name="value".
- Attributes should be named with lowercase characters.
Go to w3schools Tips</a>).
Tips (like a specialist)
- Often <strong> renders as <b>, and <em> renders as <i>. However, <strong> or <em> means the text to be rendered in a way that the user understands as "important". Although, the rendering results look the same in all major browsers; keep the correct design concept. If a browser one day wants to make a text highlighted with the strong feature, you'll know you do a nice job.
- href="http://www.w3schools.com/html" vs. href="http://www.w3schools.com/html/": first URL will send two http requests, the first URL and redirect to the second URL.
- use <div> with CSS to design blocks: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles
- Common use of the <div> element is for page layout. It replaces the "old way" of defining layout using <table> elements. The correct use of <table> and related tags is to display tabular data. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
- HTML <span> element is an inline element that can be used as a container for text.
- Learn how to get your desire color code: http://www.w3schools.com/html/html_colors.asp
- Realize HTML Entities (reserved character and symbols), HTML Encoding (Character Sets), and URL Encode.
- The <head> element is a container for all the head elements including: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. The more information you filled in these inside-<head> tags, the more you look like a specialist.
- Widely used attributes of <meta> tags:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Web tutorials on HTML and CSS">
<meta name="author" content="ilearnblogger">
<meta http-equiv="refresh" content="5">
No comments :
Post a Comment