Cascading Style Sheets
The use of Style Sheets can save a lot of time in the process of building HTML pages.
The old inline method of assigning fonts to paragraphs and other page structures is Deprecated, added a considerable amount of extra code to a page and should no longer be used.
Extra HTML code means larger pages. Larger usually means slower performance.
You should probably spend more time learning to use CSS than HTML.
The simplest HTML5 code can be turned into a masterpiece using CSS.
The possibilities are endless with the latest releases of CSS.
Methods
There are 3 methods of using style sheets in HTML documents. They are, linked , embedded and inline.
Linked style sheets are placed in a separate text file and accessed by the visiting browser each time a web page is viewed.
Embedded style sheets are placed in the head section of the HTML web page and can over ride linked settings.
Inline style sheets are placed in the actual lines of code and can over ride both linked and embedded style sheet settings.
Style Sheet Construction
No matter what method is used, the basic structure of an individual style sheet setting is the same.
Each line of a style sheet is made up of 2 parts: selector and declaration
selector { declaration }
Selectors are placed to the left of the curly brackets and refer to the HTML tag which is to be defined by the declaration. All declarations are enclosed in curly brackets.
Selectors take the form of the html tag without its enclosing brackets.
Examples:
- Tag: <p> CSS: p { declaration }
- Tag: <h2> CSS: h2 { declaration }
- Tag: <a href> CSS: a { declaration }
The declaration also contains 2 parts separated by a colon which acts as an equal sign.
attribute: value
Simply put it reads attribute equals value. You can assign more than one declaration per selector. Each individual declaration is separated by a semi-colon.
selector { attribute: value; attribute: value; attribute: value }
- Examples:
- body { background: #000000 }
- p { font-family: arial }
- h1 { font-size: 28px}
- Multiple settings are separated by semi colons:
- body { max-width: 1200px; margin: 0 auto; background: #000000 }
- When creating linked or embedded style sheets use:
- body {
- max-width: 1200px;
- margin: 0 auto;
- background: #000000
- }
Just makes it easier to read.
some Attributes and Values
A few attributes with values which can be set using Style Sheets are:
- font-family
- arial
- arial black
- courier
- times
- tahoma
- verdana
- Always include a generic - example: serif
- font-size
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- % - example: 100% (16px = 1em = 100%)
- pixels - example: 12px (most accurate)
- em - example: 0.875em (.875X16px - same as percentage method)
- font-style
- normal
- oblique
- italic
- font-weight
- normal
- bold
- bolder
- lighter
- weight in numbers 100 - 900
- text-align (for aligning text)
- left
- right
- center
- justify
- color
- name - example: red
- hexidecimal code - example: #ff0000 - Recommended
- rgb - example: #f00
- background-color
- name - example: red
- hexidecimal code - example: #ff0000 - Recommended
- rgb - example: #f00
- background
- Same as background-color for color but accepts transparent
- url(images/imagename.gif) for adding background images
- text-indent (for indenting paragraphs)
- set value in pixels, ems or %
- padding: # # # # (start top then clockwise - right, bottom, left)
- set value in pixels, ems or %
- shorter version: padding: 2px 2px ; ( top-bottom left-right)
- margin: # # # # (start top then clockwise - right, bottom, left)
- set value in pixels, ems or %
- An example of each setting is shown in the style sheet shown below. Notice that each individual declaration is separated or followed by a semi-colon.
- p {
- font-family: arial, tahoma, sans-serif;
- font-style : normal ;
- font-size : .875em;
- font-weight : normal;
- color :#000000;
- background: transparent;
- text-indent : 1em;
- padding: 2px 0 2px 2px
- }
NOTE: Color can be specified by name (blue), hexidecimal code (#0000ff) or RGB code (#00f).
Fonts
- When declaring font families, specify a minimum of 2. The last should always be a generic family.
- Use EMs, pixels or percentages to size your text
Generic Font Families
- serif
- sans-serif
- fantasy
- cursive
- monospace
The browser defaults to the generic choice when a declared font is not available on a surfer's machine.
Font-size and W3C Validation
All of the methods for font-size shown above are acceptable
- These examples show how each method is calculated:
- body {
- font-size: 100%/16px/1em
- }
- p {
- font-size: 87.5%/14px/0.875em
- }
- h1 {
- font-size: 150%/1.5em/24px
- }
- h2 {
- font-size: 125%/1.25em/20px
- }
You can of course adjust the %/em/px values for your own size preferences.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.