How CSS and HTML Tags Are Linked

How are CSS and HTML Tags Linked?

So you’ve learned what CSS is, and have set up your Stylesheet via the LINK Tag. Let’s now look at learning some actual CSS!

CSS Definitions and HTML Tags are Linked!

Before getting into some actual code there’s a simple point you need to realise: CSS can re-define how many HTML Tag behaves. That means if you want to make the <strong> tag to no longer be bold but to appear in italics you can! It means if you want to redefine HTML Tables, so that the cells behave more like fluid <div>s, then you can do that.

That’s because CSS and HTML Tags are inextricably linked.

How to Redefine a HTML Tag

Although CSS3 is not a programming language, some of its code looks like programming. And with the way that HTML5, CSS3 and JavaScript now work together, you can create awesome web-based software using these platforms.

But, in the same way that HTML simply tag content, CSS changes how the HTML tags behaves. So, fire up your code editor, ensure your <link> tag is in your .html file. And then open up your .css file.

How a CSS Declaration Works

Here is an example of a CSS declaration:

tag{
 /*
  Appearance and function changes go here.
 */
 name:value;
}

To redefine a HTML tag, you type the tag name (in place of tag in this example). Where some HTML Tags have opening and closing tags, in CSS each tag has an opening and closing curly brackets{ }.

You will then place all the rules that affect that tag between your curly brackets.

How CSS Values Are Set

In CSS you create each setting using a name:value; pair. So this is a pattern you will see frequently through these tutorials.

Remember Your Semi Colons

As we progress, you must remember to end each ‘rule’ with a semi-colon. Technically the last rule in a block can get away without a semi-colon but it is better to have the habit of always placing them there. You will save yourself future headaches, trust me!

Adding Comments into Your CSS

You have an option to add “non processed” text into your code. If you need to add notes for yourself for future reference then you can do this through CSS Comments. This is done with a strange pair of characters:

/*
Your Comments and Notes Go here
*/

So Let’s Get to Work

Let’s look at some real CSS in action then:

body{
 background-color:#eeeeee;
 color:#333333;
 font-family:'Open Sans','Trebuchet MS','Arial',sans-serif;
 font-size:14px;
}
p{
 margin:10px;
}
img{
 max-width:100%;
 height:auto;
}

In this example we are redefining the <body>, <p> and <img> tags. See how each has two curly brackets?

CSS and the BODY Tag

There is a lot which can go in the body{ } declaration but this is a starter for 10. I will cover various aspects in more detail in dedicated tutorials. For now, think of anything inside your body{ } declaration as rules which govern your site as a whole. So you can set your default colour scheme, your fonts etc.

  • background-color: In CSS, most multi-word declarations are separated with hyphens. This options sets the background colour of your whole site before you put anything else on top of it. I will go into more depth about backgrounds later.
  • color: this sets your default font colour – and that applies anywhere else you set color. Just remember that this is not font-color for now.
  • font-family: this is the group of fonts you want the page to try and render in. The browser will move from left to right in your list until it finds one it can load. Remember if you’re using custom fonts to write the name correctly else it may not work! You should always provide at least one fall back font.
  • font-size: this sets your ‘default’ font size. As in our CSS Fonts Tutorial, this can be set in various ways. An interesting behaviour though is that td and th tags can often ignore this, meaning you’ll need to set a td{ } and/or th{ } declaration for consistent font-sizing.

So go ahead and play around with your body{ } declaration.

The P Tag

The next thing we have changed here is the Paragraph Tag (<p>). All we have done is amend the margin which gives a paragraph some breathing space between it and other items on the page.

The IMG Tag

The choice of attribute here is purposeful as it will pave the way for responsive web design later. As we have set an img{ } declaration, this will apply to all images that are linked to this stylesheet. In this instance we have set the max-width and height attributes.

max-width is short for maximum width and tells your page that all images should not exceed the value specified. This can be in pixels, centimeters or percentages, for example. By setting this to 100% we are telling all images that they cannot exceed the width of the thing they are inside. So they cannot overflow or force the page to be wider than you want.

By setting height:auto; we are telling our page to keep the aspect ratio of the image the same. So if the browser size, or screen size shrinks, the width will not overflow but the image also shrinks in depth, rather than warping and twisting it. This is particularly vital for mobile design, but is useful to have in place on any website.

Modify Some Other Tags

Go ahead now and modify a few other tags with some of these attributes. You can change the font in paragraph tags and H1’s for example. You can make the background colour of the paragraphs different to the body{ }. Have a play arond. After all, learning should be fun!



Other Recent CSS Posts

Spread the Word

Share This On Facebook Share This On Twitter Share This On Linkedin Share This On Google Plus Share This On Pinterest Share This On Mail

Leave a Reply

Your email address will not be published. Required fields are marked *