[Article] A Dive into CSS

**Roxy** · March 18th, 2008, 3:16 PM

In this article, I will talk about the origins of CSS and what it is all about. I will also provide you with a cheat-sheet of sorts for you to have for reference and throw in a free-to-use CSS layout structure for you to practice your skills with (coming soon). =)

What is CSS?
Cascading Style Sheets is a stylesheet language used to represent the styles of markup language. CSS is used to help readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility and provide more flexibility.

CSS can also allow the same markup page to be presented in different styles, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices.

How It Works
There are three ways to integrate CSS into a HTML/markup language file.

1. Inline Styles - Inside the HTML document, style information on a single element, specified using the "style" attribute.

2. Embedded Styles - Blocks of CSS information inside the HTML document itself.

3. External Stylesheets - A separate CSS file linked from the HTML document.

The most commonly used is an external stylesheet as it provides easy access and is saved all in one file.

When writing out CSS styles for certain parts within your HTML files, remember that every HTML tag can have a CSS attribute!

Ex. Scenario: You want to give all h3 tags a blue font with a size of 14px and set the width as bold.

Code:

HTML : <h3>Hello</h3>
CSS : h3 {color: blue; font-size: 14px; font-weight: bold; }

Easy right? That is just for header 3 tags, you are also able to apply styles to certain groups or single items within your HTML. This is where ID's and Classes come in.

With an ID you are able to give a single item within your HTML document a style, while with classes you are able to give a group of things under one tag a set of styles.

Ex. Scenario : You have three paragraphs within body and paragraph tags. You already have styles for both but want one paragraph to have an image background and have bolder text.

Code:

HTML : <body>
             <p>Paragraph text here.</p>
             <p id="paratext">Paragraph text here.</p>
             <p>Paragraph text here.</p>
          </body>

CSS : body { color: red; background-image: url(image.jpg); }
         p {font-size: 1.5em; }
         #paratext { background-image: url(pimage.jpg); font-weight: bold; }

Normal tags : Just write in the name in the CSS.
For ID's : Write a (#) before the name given.
For Classes : Write a (.) before the name given.

When using Inline styles you can easily add a style to any single tag within your HTML.

Code:

example: <p style="font-size: 1.5em; color: #FFFFFF">Text goes here</p>

Now when using Embedded styles, they usually go in the header of your HTML document.

Code:

Example:
<html>
<head>
<title>Page's Title</title>
<style>
body { background-image: url(image.jpg);
          font-family: Arial, Tahoma, Verdana;
          font-size: 1.5em;
          color: #000000;}
p      { font-weight: bold;}
</style>
</head>
<body>
<p>text here</p>
</body>
</html>

CSS Cheat-Sheet
= Backgrounds =

Code:

= For External and Embedded Styles =
background: url(image.jpg) #000000 repeat-x;}
background-image: url(image.jpg);}
background-color: #000000;}

= For Inline Stlyes = 
bgcolor="#000000"
style="background: url(image.jpg) #000000 repeat-x"
style="background: url(image.jpg) #000000 repeat-x"
style="background-color: #000000"

= Font Styles =

Code:

= For External and Embedded Styles =
font-family: arial, tahoma, verdana;}
font-size: 1.5em;}
color: #000000;}

= For Inline Stlyes = 
style="font-size: 1.5em; font-family: arial, tahoma, verdana; color: #000000"

= Layout Styles =

Code:

= For External and Embedded Styles =
width: 0px auto; 900px;}
padding: 1.5em;}
color: #000000;}

= For Inline Stlyes = 
width="100%" padding="5px" height="900px"

More to come soon!

March 18th, 2008, 3:16 PM	#1 (permalink)
Roxy URB4N 5K1LLZ Super #1 Joined in Sep 2005 Lives in Orlando, FL Hosted on SH63 2,660 posts Gave thanks: 81 Thanked 128 times	[Article] A Dive into CSS In this article, I will talk about the origins of CSS and what it is all about. I will also provide you with a cheat-sheet of sorts for you to have for reference and throw in a free-to-use CSS layout structure for you to practice your skills with (coming soon). =) What is CSS? Cascading Style Sheets is a stylesheet language used to represent the styles of markup language. CSS is used to help readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility and provide more flexibility. CSS can also allow the same markup page to be presented in different styles, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. How It Works There are three ways to integrate CSS into a HTML/markup language file. 1. Inline Styles - Inside the HTML document, style information on a single element, specified using the "style" attribute. 2. Embedded Styles - Blocks of CSS information inside the HTML document itself. 3. External Stylesheets - A separate CSS file linked from the HTML document. The most commonly used is an external stylesheet as it provides easy access and is saved all in one file. When writing out CSS styles for certain parts within your HTML files, remember that every HTML tag can have a CSS attribute! Ex. Scenario: You want to give all h3 tags a blue font with a size of 14px and set the width as bold. Code: HTML : <h3>Hello</h3> CSS : h3 {color: blue; font-size: 14px; font-weight: bold; } Easy right? That is just for header 3 tags, you are also able to apply styles to certain groups or single items within your HTML. This is where ID's and Classes come in. With an ID you are able to give a single item within your HTML document a style, while with classes you are able to give a group of things under one tag a set of styles. Ex. Scenario : You have three paragraphs within body and paragraph tags. You already have styles for both but want one paragraph to have an image background and have bolder text. Code: HTML : <body> <p>Paragraph text here.</p> <p id="paratext">Paragraph text here.</p> <p>Paragraph text here.</p> </body> CSS : body { color: red; background-image: url(image.jpg); } p {font-size: 1.5em; } #paratext { background-image: url(pimage.jpg); font-weight: bold; } Normal tags : Just write in the name in the CSS. For ID's : Write a (#) before the name given. For Classes : Write a (.) before the name given. When using Inline styles you can easily add a style to any single tag within your HTML. Code: example: <p style="font-size: 1.5em; color: #FFFFFF">Text goes here</p> Now when using Embedded styles, they usually go in the header of your HTML document. Code: Example: <html> <head> <title>Page's Title</title> <style> body { background-image: url(image.jpg); font-family: Arial, Tahoma, Verdana; font-size: 1.5em; color: #000000;} p { font-weight: bold;} </style> </head> <body> <p>text here</p> </body> </html> CSS Cheat-Sheet = Backgrounds = Code: = For External and Embedded Styles = background: url(image.jpg) #000000 repeat-x;} background-image: url(image.jpg);} background-color: #000000;} = For Inline Stlyes = bgcolor="#000000" style="background: url(image.jpg) #000000 repeat-x" style="background: url(image.jpg) #000000 repeat-x" style="background-color: #000000" = Font Styles = Code: = For External and Embedded Styles = font-family: arial, tahoma, verdana;} font-size: 1.5em;} color: #000000;} = For Inline Stlyes = style="font-size: 1.5em; font-family: arial, tahoma, verdana; color: #000000" = Layout Styles = Code: = For External and Embedded Styles = width: 0px auto; 900px;} padding: 1.5em;} color: #000000;} = For Inline Stlyes = width="100%" padding="5px" height="900px" More to come soon! __________________ Roxanne Urban Roxy -Personal Blog SH63 - the best darn shared server!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)