HEYGB.COM

Writing CSS in a Right Way

Today we are going to learn so many things in CSS. Lets start with how to write CSS in a write way. First of all define the element the CSS is written for. Then use

{ and after putting in the styles, close it with }

This might look like this:

1

  body { styles go in here }

In this case, the ‘body’ is known as the selector. This can get more complicated, and can included many different selectors.

For several elements to use the same style, you can separate them with commas:

1

  p, div, span { styles go in here }

The syntax for the styles follows this pattern:

1

  name_of_style_attribute: value;

You can include as many styles as you want inside the { and } curly braces. Occasionally, there may be more than one value for a single style, for example with the border attribute:

1

  border: 3px double red;

To define styles that should only target elements with a certain class, put a full stop then the name of the class, after the element. This might look like:

1

  p.nameofclass { styles go in here }

This would also need the class to be written inside the HTML ‘p’ element tags to which it refers:

1

  <p class="nameofclass">

If we use the syntax without specifying an element name, then every element of class ‘nameofclass’, not just p tags, will use this style:

1

  .nameofclass { styles go in here }

There are also some pseudo-classes such as :hover. This particular one will only work in some browsers (most notably, Internet Explorer 6-) with ‘a’ elements. It will be applied when the mouse hovers over the element.

1

  a:hover { color: red; }

The pseudo-classes can be used along with classes, like this:

1

  a.nameofclass:hover { color: red; }

Soon we will do more practical example of CSS pseudo-classes.

If an element has been defined with an ID then it can be given its own style by using the ID selector. Try to restrict this to cases where it is actually needed:

1

#id { color: red; font-weight: bold; }

You can also target the specific element type, combined with the ID selector:

1

element_type#id { color: red; font-weight: bold; }

Now for some clever stuff. It is possible to target an element based on what its parent elements are, by writing the name of the parent, followed by a space, followed by the name of the element you want to target.

Note: The parent does not have to be a direct parent. It could be anywhere in the chain of ancestors. For example, if you want to assign a style to li elements where one of their parents is a ul whose parents include a td whose parents include a tr whose parents include a table whose parents include the body, you can write this:

1

body table tr td ul li { styles go in here }

If you also want to assign that style to p elements, you can combine this with the comma, as shown earlier:

1

body table tr td ul li, p { styles go in here }

Or mix that up however you like. You can also combine it with class selectors. For example, this will match all li elements whose parents include a td of class fish:

1

td.fish li { styles go in here }

If at any time you define two or more conflicting styles, the more specific one should be used by the browser. If you use an inline style, that should override other styles. There are exceptions to these rules, but I will not go into those here.

All styles will have a default value, and that may be different for different elements (for example, the border style has a default value of ‘none’, but most browsers use something like ‘2px groove black’ as the default border for a fieldset).

If you have styled an element with a generic style, and you want to reset it to its default style for that specific element, you will need to manually set it back to its default value. For example, you could set all paragraphs to have a 1 pixel border, then set paragraphs not to have a border if they are inside a div:

1
2

p { border: 1px solid black; }
div p { border: none; }