Brief dip back into CSS

As I run through the W3C, I came upon the CSS section, which is good for some basics. When it comes to CSS you use inline and internal stylesheets, but typically most websites use external stylesheets, which make it a lot easier for styling the whole site. Still, this will be a good refresher until we dive back into the full CSS tutorial after I finish HTML.

inline – is when you enter CSS directly into an html element, as an attribute
internal – is when you make a CSS stylesheet in the header section of the HTML, using a <style> element
external – is when you link your HTML document to an external CSS file, using the <link> header element

The inline option should be avoided, and only used if a unique style is to be added for one unique instance of an element. The style attribute is placed in the opening tag, like any other attribute. Like most CSS, you do it in this format > what you’re styling:the value; However, unlike internal or external stylesheets, you don’t need to specific the element it’s affecting, because it’s already listed as an attribute in that element.

Some basic CSS properties worth noting:
color > the color of the font
background-color > the color of the background
font-family > what font you want. You can list a few here in case the browser doesn’t have your first choice.
text-align > affects whether the text is to the left, right or centered in the middle.

Here’s an example of a inline styled element, with what it looks like on the page.
<p style=”color:red;background-color:blue;font-family:proxima nova;text-align:center;”>This is a paragraph I added just for styling purposes </p>

style example

 

Now, the way you should be styling your site is with and External style sheet. This is a separate page, just for your CSS that your HTML document links to and uses. To link them, you use the <link> header element in the HTML, which will look something like this:

<link rel=”stylesheet” type=”text/css” href=”mycssfile.css”>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s