CSS Basics


HomeWeb Basics → CSS Basics


As already mentioned in the former course, CSS is used to control the design and layout of a website efficiently.

css-html2

The basics of CSS are very easy. CSS rules contain selectors and declaration blocks. A declaration block itself consists of one or more declarations in braces {}. Each declaration itself is defined by a property and, separated with a colon (:), a value, and decalarations are separated by by a semicolon.

selector {
   property: value
}

Sample: One selector with property/value

H1 {
   color: red;
}

Sample: A selector containing more than one property

H1 {
   color: red;
   font-size: 32px;
   font-weight: bold;
   text-transform:uppercase;
}

Sample: several selectors sharing the same propertie(s):

H1, H2, H3, H4, H5, H6 {
   font-family: Helvetica, Arial, sans-serif;
   color: #ff0000;
}

Inheritance:
If a property is not specified, it will be inherited from a parent element. For instance, if the “body” selector has a value for a specific font-family, this font-family will be applied over the entire website except in id’s or classes which have another font-family specified.

If a property has not been defined at all, browser default values will be applied.

More about CSS theory here at Wikipedia and W3schools/CSS.

Selectors:

There are three kind of different selectors:

Tags – Standardized tagnames, written without any prefix like dot or hashtag. Tags are HTML basic elements and their names are given. Browser’s have standard values for each tag. Of course, tags can be specified with a custom design. Typical tags are H1-H6 (Headings), a (links), p (paragraphs) and many more. List.

IDs – custom elements with custom names, than ce be applied to some, but not all, tags. In CSS, written with hash # as prefix. An ID is for unique usage on one HTML document. Hierarchically T above classes. ypically used for basic layout elements.

Classes – custom elements, with custom names, too, are appliable  to all other selectors (tags, id’s), multiple usage per page possible. Hierachically below id’s.

The difference between id and class:
If you create an id named #block with the property “background: yellow” and you also create a class named .bgr with the property “background:red”, and then you add the class to this id, like:

…the background will be – guess what color? –  yellow, of course – because id properties do overrule the class properties.


HomeWeb Basics → CSS Basics

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