Adding CSS Style to HTML
Using CSS to Style your Site
If you have watched my HTML Tutorials your probably asking yourself, “When is he going to talk about CSS?” Well, today is the day. Cascading Style Sheets (CSS) are used to completely control the look and feel of your website.
When HTML was merged with xml to become xHTML, CSS took off because now we were able to create our own tags and the possibilities became endless. You define how you want to add style to your pages in one of two ways. You embed the CSS styling rules directly into the xHTML file or you link to an outside CSS file. It’s better to link to an outside file so through out this course that is what we’ll do. Here are examples of both though:
Embedding CSS Directly
You want to define your CSS, right after the title closing tag as I show here:
… <head>…<title>…</title>
<style>
h1 {
font-family: arial, sans-serif;
color: purple;
}
</style>
To start the CSS code create a <style> tag. Here we are going to change the default style of every <h1> tag in the entire xHTML file. Every h1 styled text will now show up in arial or sans serif and have the color purple. Then you close your styling area with a } and a closing style tag </style>.
Linking to a CSS File
Why do I want you to always link to a style sheet instead of embedding the CSS code? We’ll let’s say you style 300 pages with the above h1 code and then the client calls and says he wants all the h1 tags changed to red. You would have to go through every page and change them one by one.
If you linked to an outside CSS page, you would only have to change one file and it would filter out to every page on the site. This is how you link to an outside CSS page.
… <head>…<title>…</title>
<link type=”text/css” rel=”stylesheet” href=”styles.css” />
Now all of your styles will be pulled from one source “styles.css”, site wide. Here is a description on what this code means:
<link> : Links in external information
type=”text/css” : Tells the browser, that the information being linked is CSS code
rel=”stylesheet” : Explains further that the file is a stylesheet
href=”styles.css : Shows the browser where the file is located. This file can have any name, but must end with the extension .css.
How Do Changes to One Tag Effect the Others
You can change any tag that you want, but understand if you change a tag’s styling it will effect other tags. For example, if you changed the styling of the <body> tag, you would effect every tag on the page. So if you made the font color of <body> purple, every other font related tag would now be purple. This is where the cascading part comes in. Here is an example:
Font Color of <body> changed
Font Color of <p> changed, because paragraphs contain text
Font Color of <h1> changed, because it contains text
Font Color of <img> wouldn’t change, because it doesn’t contain text
What if you want the color of the text to be purple, but not the links?
p {
font-family: times new roman, georgia, serif;
font-size: 14px;
color: purple;
}
h1, h2, a, em, b {
color: black;
}
a {
font-family: verdana, arial, sans-serif;
}
Now every font will be purple except for h1, h2, a, em, b, which will be black; Yes you can style multiple tags at once or one at a time. Because of the last definition all of those tags defined will be serif fonts, except for the anchor text <a>. This is what is meant by cascading. The rules you define to the biggest tag, cascade down to all the smaller tags.
There is only one exclusion to this rule. Block element definitions effect all inline elements, but not the block elements that reside in them. Example:
body {
color: black;
}
p {
color: purple;
}
h1, h2, em, b {
font-family: times new roman, georgia, serif;
}
Let me go step by step through what happens in the above example:
- By defining text color to black, for the body tag, all text will now be black across the whole website.
- Then the paragraph tag defines that all inline elements within it will be the color purple.
- Then the final styling makes all those tags defined, a serif font.
- The <h1> tag has the font properties defined that all text should be black and of the type serif. The <p> tag changes don’t effect it because it is a block element.
- The same applies to the <h2> tag, because it’s also a block element.
- However, em and b are the color purple, because they are inline statements.
List of All xHTML Block Elements
- <blockquote> : Block Quote
- <div> : A block container that we’ll talk about soon
- <dl> : Definition list
- <form> : Form
- <h1>, <h2>, … <h6> : Header Tags
- <hr> : Horizontal Rule
- <ol> : Ordered List
- <p> : Paragraph
- <table> : Table
- <ul> : Unordered List
Changing Tag Styling with Classes
Here I’ll describe how to make multiple versions of one tag. Let us say a customer wants a <h1> tag to be different colors depending on what title they are being used on. Is that possible? Yes, you just assign multiple classes to each header. Example:
h1 {
font-family: times new roman, georgia, serif;
font-size: 14px;
/* This is a comment by the way */
}
h1.purple {
color: purple;
}
h1.green {
color: green;
}
Above I defined rules that will be applied to every <h1> tag. Then I created custom or two different classes of special tags, that I can use in my HTML. I would access these custom <h1> tags in my HTML, by typing < h1 class=”purple”> instead of <h1>.
You can also create a generic class that isn’t tied to any specific tag. It would be created like so:
.purpleserif {
font-family: times new roman, georgia, serif;
color: purple;
}
Now you can make any tag purple with a serif font, by just tacking on “purpleserif”. That would be done in your html like this: < h1 class=”purpleserif” >.
Now you know all of the complicated information behind Cascading Style Sheets, except for positioning, but we’ll get to that very soon. Now it’s time to have some fun by seeing all of the styling features available.
All of the CSS Properties
Font Properties
Font
This is the shorthand way to define a font in one line.
font:
font-style,font-variant,font-weight,font-size,line-heightandfont-family;Example: <h4 style=”font: italic bold 1.5em/2 arial, Helvetica, sans-serif “>h4 Tag Styled with the font Property</h3>
Font-Family
With this style you can define the default font family.
Here are all of the Fonts Available to Use on All Computers
- Andale Mono
- Arial
- Arial Black
- Comic Sans
- Courier
- Courier New
- Georgia
- Impact
- Sans Serif
- Serif
- Trebuchet MS
- Verdana
Font-Size
With this style you can define the size of the text.
Here are all the options for font-size
- Styled at 150%
- smaller
- x-small
- medium default
- x-large
- xx-large
Font-Weight
With this style you can define the Weight of a Font.
Tag Styled with the 500 font-weight Property
Here are all of the Weights Available
- Normal
- Bold
- Bolder
- Lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Font-Style
With this style you can define if a font is italic or not.
Tag Styled with the 500 font-weight Property
Here are all of the Styles Available
- Normal
- Italic
Font-Variant
With this style you can define if uppercase letters are displayed in Small Uppercase.
font-style: small-caps;
Here are all of the Variants Available
- Normal
- Small-Caps
Line-Height
With this style you can define the height of a line of text. It is defined as a number percentage or length.
Here are Some Examples
- 20 Percent
- 50 Percent
- 100 Percent
- 140 Percent
- 180 Percent
- 220 Percent
Letter-Spacing
With this style you can define the spacing of a line of text.
letter-spacing: 1.5em;
Here are Some Examples
- 1 em
- 1.1 em
- 1.2 em
- 1.3 em
- 1.4 em
- 1.5 em
Word-Spacing
With this style you can define the distance between words.
word-spacing: 2em;
Here are Some Examples
- 1 em
- 1.1 em
- 1.2 em
- 1.3 em
- 1.4 em
- 1.5 em
Text-Align
With this style you can define the alignment of words.
word-spacing: center;
Here are Some Examples
- left
- center
- right
- justify
Text-Decoration
With this style you can define text in many ways.
text-decoration: underline;
Here are Some Examples
- underline
- overline
- line-through
- blink
Text-Indent
With this style you can define how far to indent text.
text-indent: 1.5em;
Here are Some Examples
- Indent 1em
- Indent 1.2em
- Indent 1.5em
- Indent 2em
Text-Transform
With this style you can define the case of text.
text-transform: capitalized;
Here are Some Examples
- capitalize
- uppercase
- lowercase
Vertical-Align
With this style you can define the vertical alignment of text.
vertical-align: sub;
Here are Some Examples
- Text aligned to baseline
- Text aligned to sub
- Text aligned to super
- Text aligned to top
- Text aligned to text-top
- Text aligned to bottom
- Text aligned to text-bottom
- Text aligned to middle
Color and Background Styling
Color
With this style you can define the color of text.
color: red;
color: #FF0000; <—-You can also use the hexadecimal code that you can find in the tables below.
Here are Some Examples
- Text Colored Aqua
- Text Colored Black
- Text Colored Blue
- Text Colored Fuchia
- Text Colored Gray
- Text Colored Green
- Text Colored Lime
- Text Colored Maroon
- Text Colored Navy
- Text Colored Olive
- Text Colored Purple
- Text Colored Red
- Text Colored Silver
- Text Colored Teal
- Text Colored White
- Text Colored Yellow
There is a great table of web colors on Wikipedia
Background-Color
With this style you can define the background color of words.
background-color: yellow;
Here are Some Examples
- Background Text Colored Aqua
- Background Text Colored Black
- Background Text Colored Blue
- Background Text Colored Fuchia
- Background Text Colored Gray
- Background Text Colored Green
- Background Text Colored Lime
- Background Text Colored Maroon
- Background Text Colored Navy
- Background Text Colored Olive
- Background Text Colored Purple
- Background Text Colored Red
- Background Text Colored Silver
- Background Text Colored Teal
- Background Text Colored White
- Background Text Colored Yellow
Background
Combines background-color, background-image, background-repeat, background-attachment and background-position in to one style.
The following code would color the backgound red, place background-image.gif in the upper left hand corner and doesn’t repeat.
background: red url(images/background-image.gif) no-repeat top left;
The properties included in this styling code are the following:
- background-color: The background color of the web page
- background-image: An image file that you want displayed in the background.
- background-repeat: Repeats an image horizontally and vertically on the page or not.
- background-repeat-x: Repeats an image horizontally across the page or not.
- background-repeat-y: Repeats an image vertically down the page or not.
- background-attachment:Makes the image scroll with the page or stays fixed.
- background-position: Positions the background image on the page.
Background-Image
With this style you can define the background image.
background-image: url(background-image.jpg);
Background-Repeat
With this style you can define whether a background image repeats and in what direction. This property example will repeat the image both horizontally and vertically.
background-repeat: repeat;
Here are the Possible Values
- repeat: Repeats background image horizontally and vertically
- no-repeat: Doesn’t repeat the image
- repeat-x: Repeats background image horizontally.
- repeat-y: Repeats background image vertically
Background-Position
With this style you can define where the background image is positioned. This example code would place the image in the upper left hand corner.
background-position: left;
Here are the Possible Values
- left
- right
- center
- bottom
- top
- percentage
- length
Background-Attachment
Normally a background image will scroll with the rest of the page, but if this property is set to fixed then the image will stay in the same position as the user scrolls. The following example would force the image to remain fixed while scrolling. If the option scroll is chosen, the image will move with the scrolling (default).
background-attachment: fixed;
Background-ColorSpecifies the style of a list item bullet used, combining list-style-type, list-style-position and list-style-image.
list-style: square inside;
Here are List Style Types
- disc Style type
- circle Style type
- square Style type
- decimal Style type
- decimal-leading-zero Style type
- lower-roman Style type
- upper-roman Style type
- lower-greek Style type
- lower-latin Style type
- upper-latin Style type
- armenian Style type
- georgian Style type
List Style Image Property
This property allows you to set an image file as your bullet. Here is an example of how to use it:
list-style-image: url(images/mybullet.jpg);
Table Properties
Border Collapse Property
Tells the browser which border model should be used in a table.
border-collapse: collapse; // This collapses the border down into one.
border-collapse: separate; // (Default) Each cell has its own border.Border Spacing Property
The border-spacing property can have one value to specify spacing on all sides or two values to specify the horizontal (first value) and vertical (second value) spacing. This example
Caption Side Property
Specifies on which side of the table a table-caption box will be placed. This example would position the table caption on the right side of the table.
caption-side: right;
Other Values for caption-side Property
- Top
- Right
- Left
- Bottom
Cursor Properties
With this style you can define appearance of the cursor when it passes over a box. The following example code will turn the cursor into a question mark.
cursor: help;
Here are Some Examples
- Cursor Crosshair
- Cursor Default
- Cursor Help
- Cursor Move
- Cursor N-Resize
- Cursor NE-Resize
- Cursor E-Resize
- Cursor SE-Resize
- Cursor S-Resize
- Cursor SW-Resize
- Cursor W-Resize
- Cursor NW-Resize
- Cursor Text
- Cursor Pointer
- Cursor Progress
- Cursor Wait
That’s It
That is every single property you can change with Cascading Style Sheets, except for the layout and positioning properties. I’ll cover all of those in the next two articles. I know that is a lot to digest, but it’s ok to use this page as a cheat sheet.
I hope you enjoyed this and if you have any questions comment below.
Till next time…
3 Responses to “Adding CSS Style to HTML”
Trackbacks/Pingbacks
- Sandeep Nath: Primary Online Business - [...] how to css, background css, css learn, css style html, css | new think tank [...]
- Adding CSS Style to HTML: The Box Element | new think tank - [...] Sales « Adding CSS Style to HTML [...]
- Javascript Scripting Tutorial, Javascript Free Tutorial | new think tank - [...] provide a tutorial on How to Use CSS Here and you can Learn How to Write HTML W3C [...]
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). `:
Catch ya later
<http://www.caramoan.co
Hi Derek thanks alot for your great videos, i am new to java programming and needs lots of infos.
Please can you kindly tell me how i can get the codes to your java video tutorials.
Thanks
John.
Hi John, Thank you 🙂 I’m glad you are enjoying them. I have all the Java tutorials on this page Java Video Tutorial. Links to all of the code is also provided on that one page. I hope it helps