Scribd
Upload
76 views

Basics of CSS and Some Common Mistakes

CSS is a language used to define formatting for web pages, including colors, fonts, layout, etc. CSS can be included inline with HTML elements, embedded in the <style> tags in the head of a document, or linked via an external .css file. CSS selectors like type, class, ID and descendant selectors allow styles to be applied to specific elements. Common CSS mistakes include misusing ID and class selectors, adding unnecessary units to zero values, and not grouping identical styles.

Uploaded by

Einjhel Borres
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
76 views

Basics of CSS and Some Common Mistakes

CSS is a language used to define formatting for web pages, including colors, fonts, layout, etc. CSS can be included inline with HTML elements, embedded in the <style> tags in the head of a document, or linked via an external .css file. CSS selectors like type, class, ID and descendant selectors allow styles to be applied to specific elements. Common CSS mistakes include misusing ID and class selectors, adding unnecessary units to zero values, and not grouping identical styles.

Uploaded by

Einjhel Borres
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 51

Using the

Prepared by: Sanjay Raval | http://www.usableweb.in/

CSS

What is CSS?
CSS is a language thats used to define the formatting applied to a Website, including colors, background images, typefaces (fonts), margins, and indentation. Lets look at a basic example to see how this is done. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>A Simple Page</title> <style type="text/css"> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>First Title</h1><p></p> <h2>Second Title</h2><p></p> <h2>Third Title</h2><p></p> </body> </html>

Using CSS in HTML


lnline Styles
The simplest method of adding CSS styles to your web pages is to use inline styles. An inline style is applied via the style attribute, like this: <p style="font-family: sans-serif; color: #3366CC;"> Amazingly few discotheques provide jukeboxes. </p>

Inline styles have two major disadvantages:


1) 2) They cant be reused. For example, if we wanted to apply the style above to another p element, we would have to type it out again in that elements style attribute. Additionally, inline styles are located alongside the pages markup, making the code difficult to read and maintain.

Using CSS in HTML


Embedded Styles
In this approach, you can declare any number of CSS styles by placing them between the opening and closing <style> tags, as follows: <style type="text/css"> CSS Styles here </style>

While its nice and simple, the <style>tag has one major disadvantage: if you want to use a particular set of styles throughout your site, youll have to repeat those style definitions within the style element at the top of every one of your sites pages.

Using CSS in HTML


External Style Sheets
An external style sheet is a file (usually given a .css filename) that contains a web sites CSS styles, keeping them separate from any one web page. Multiple pages can link to the same .css file, and any changes you make to the style definitions in that file will affect all the pages that link to it. To link a document to an external style sheet (say, styles.css), we simply place a link element in the documents header: <link rel="stylesheet" type="text/css" href="styles.css" />

CSS Selectors
Every CSS style definition has two components: A list of one or more selectors, separated by commas, define the element or elements to which the style will be applied.

The declaration block specifies what the style actually does.

CSS Selectors
Type Selectors
By naming a particular HTML element, you can apply a style rule to every occurrence of that element in the document. For example, the following style rule might be used to set the default font for a web site: p, td, th, div, dl, ul, ol { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 1em; color: #000000; }

CSS Selectors
Class Selectors
CSS classes comes in when you want to assign different styles to identical elements that occur in different places within your document. Consider the following style, which turns all the paragraph text on a page blue:

p { color: #0000FF; }

Great! But what would happen if you had a sidebar on your page with a blue background? You wouldnt want the text in the sidebar to display in blue as wellthen it would be invisible. What you need to do is define a class for your sidebar text, then assign a CSS style to that class. To create a paragraph of the sidebarclass, first add a classattribute to the opening tag: <p class="sidebar"> This text will be white, as specified by the CSS style definition below. </p>

CSS Selectors
Class Selectors
Now we can write the style for this class: p { color: #0000FF; } .sidebar { color: #FFFFFF; }

This second rule uses a class selector to indicate that the style should be applied to any element of the sidebar class. The period indicates that were naming a classnot an HTML element.

CSS Selectors
ID Selectors
In contrast with class selectors, ID selectors are used to select one particular element, rather than a group of elements. To use an ID selector, first add an id attribute to the element you wish

to style. Its important that the ID is unique within the document:


<p id="tagline">This paragraph is uniquely identified by the ID "tagline".</p>

To reference this element by its ID selector, we precede the id with a hash (#). For example, the following rule will make the above paragraph white: #tagline { color: #FFFFFF; } ID selectors can be used in combination with the other selector types. #tagline .new { font-weight: bold; color: #FFFFFF; }

CSS Selectors
Descendant Selectors
A descendant selector will select all the descendants of an element. p { color: #0000FF; } .sidebar p { color: #FFFFFF; }

<div class="sidebar"> <p>This paragraph will be displayed in white.</p> <p>So will this one.</p> </div>

In this case, because our page contains a div element that has a class of sidebar, the descendant selector .sidebar p refers to all p elements inside that div.

CSS Selectors
Child Selectors
A descendant selector will select all the descendants of an element, a child selector only targets the elements immediate descendants, or children.

Consider the following markup:


<div class="sidebar"> <p>This paragraph will be displayed in white.</p> <p>So will this one.</p> <div class="tagline"> <p>If we use a descendant selector, this will be white too. But if we use a child selector, it will be blue.</p> </div> </div>

CSS Selectors
Child Selectors
In this example, the descendant selector we saw in the previous section would match the paragraphs that are nested directly within div.sidebar as well as those inside div.tagline. If you didnt want this behavior, and you only wanted to style those paragraphs that were direct descendants of div.sidebar, youd use a child selector. A child selector uses the > character to specify a direct descendant. Heres the new CSS, which turns only those paragraphs directly inside .sidebar (but not those within .tagline) white: p { color: #0000FF; } .sidebar>p { color: #FFFFFF; }

Note: Unfortunately, Internet Explorer 6 doesnt support the child selector.

Most Common

CSS Mistakes

ID vs. Class What


An ID refers to a unique instance in a document, or something that will only appear once on a page. For example, common uses of IDs are containing elements such as page wrappers, headers, and footers. On the other hand, a CLASS may be used multiple times within a document, on multiple elements. A good use of classes would be the style definitions for links, or other types of text that might be repeated in different areas on a page. In a style sheet, an ID is preceded by a hash mark (#), and might look like the following: #header { height:50px; } #footer { height:50px; } #sidebar { width:200px; float:left; } #contents { width:600px; }

ID vs. Class What


Classes are preceded by a dot (.). An example is given below. .error { font-weight:bold; color:#C00; } .btn{ background:#98A520; font-weight:bold; font-size:90%; height:24px; color:#fff; }

Redundant Units for Zero Values


The following code doesn't need the unit specified if the value is zero. padding:0px 0px 5px 0px; It can be written instead like this: padding:0 0 5px 0; Don't waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only reason to do so is when you want to change the value quickly later on. Otherwise declaring the unit is meaningless. Zero pixels is the same as zero points.

Avoid Repetition
We should avoid using several lines when just one line will do. For example, when setting borders, some people set each side separately: border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #00f;

But why? When each border is the same! Instead it can be like: border:1px solid #00f;

Excess Whitespace
Usually we have tendency to include whitespace in the code to make it readable. It'll only make the stylesheet bigger, meaning the bandwidth usage will be higher. Of course it's wise to leave some space in to keep it readable.

Grouping Identical Styles together


So when we want a same style to a couple of elements. It is good to group them together and define the style instead of defining the style for each element separately. h1, p, #footer, .intro { font-family:Arial,Helvetica,sans-serif; }

It will also make updating the style much easier.

Margin vs. Padding


As margins and paddings are generally be used interchangeably, it is important to know the difference. It will give you greater control over your layouts. Margin refers to the space around the element, outside of the border. Padding refers to the space inside of the element, within the border. Example: No Padding, 10px Margin p { border: 1px solid #0066cc; margin:10px; padding:0; }

Result:

Margin vs. Padding


Example: No Margin, 10px Padding p { border: 1px solid #0066cc; padding:10px; margin:0; }

Result:

PSEUDO-ELEMENTS
CSS pseudo-elements are used to add special effects to some selectors.
selector:pseudo-element {property: value}

There are following most commonly used pseudo-elements:

The :first-line pseudo-element

The :first-letter pseudo-element

The :before pseudo-element

The :after pseudo-element

CSS Background, Image and Color Styles

A typical <body> tag looks something like this: <body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000">

To convert that into CSS, it looks like this: body { background-image: url(graphic.jpg); color: #FFFFFF; background-color: #000000; }

background-repeat property repeat, repeat-x(horizontally), repeat-y(vertically), or no-repeat.

<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000" style="background-repeat: norepeat;">

CSS Lists, < ul > and < li >

Use an image for each point of an unordered list ul { list-style-image: url(smallimage.gif); }

Sub-list, that is, a UL within a UL. ul ul { list-style-image: url(smallimage2.gif); }

CSS gives you a way to auto-format your ordered lists to meet nearly any style. list-style-image list-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

So, if you want the OL to have I, then A, then 1. then, a, then finally i., you could do this style sheet:

OL { list-style-type: upper-roman; } OL OL { list-style-type: upper-alpha; } OL OL OL { list-style-type: decimal; } OL OL OL OL { list-style-type: lower-alpha; } OL OL OL OL OL { list-style-type: lower-roman; }

CSS MARGIN / MARGINS

A margin is the space around something. CSS aims to give you total control over margins, but not only for the body, but also for any block elements: lists, images, paragraphs, div's, span's, etc.

Margin values can be fixed amounts, such as px (pixels), or % (a percentage), or set to auto.

If you want a page to have no margin, you could use: body { margin: 0px 0px 0px 0px; }

If you want a page to have a 15 pixels on top, 10 on the left, and the right and bottom automatically set, you could use:

body { margin: 15px auto auto 10px; } If you wanted a 10% margin at the top and no margin on the other sides, you could use: body { margin: 10% 0px 0px 0px; } You can also set each of the four margin values individually, with the properties margintop,margin-right, margin-bottom, and margin-left, respectively.

body { margin-top: 10%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }

margin can have: one value such as 10px to specify an equal margin on every side two values, such as 10px 5px, to specify the top/bottom (first value) and right/left (second value) margin three values, such as 10px 5px 2px, to specify the top (first value), right/left (second value) and bottom (third value) margin four values, such as 10px 5px 2px 1px to specify the top, right, bottom and left margins respectively

Example

CSS PADDING

The Box Model Margins, padding and borders are all part of what's known as the Box Model. The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

padding: is just like a margin, except it's the white space between the margin (and border) and the actual content.

paragraph having 5px (pixels) of padding all around it, p { padding: 5px 5px 5px 5px; }

padding can have: one value, such as 10px, to specify equal padding on every side two values, such as 10px 5px, to specify top/bottom (first value) and right/left (second value) padding three values, such as 10px 5px 2px, to specify top (first value), right/left (second value) and bottom (third value) padding four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding respectively

CSS BORDERS AND BORDER STYLES

A border can be a visual separator between the margin on the outside, and the padding on the inside. You can set the width, color, and style of the entire border, or you can set each of these properties individually for each side.

The border-width property allows you to set all four widths at the same time, in format A B C and D as pictured above.

The value can be thin, medium, thick, or a numeric value and unit, such as 5px or 0.2em.

If you want to a medium border around every paragraph, you could use: p { border-width: medium; } /* This sets all to medium */ p { border-width: medium medium; } /* This sets top/bottom medium then right/left medium */ p { border-width: medium medium medium medium; } /* Set each A B C and D */

The default border is no border at all


The values for border-style are: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

medium border that is dotted:


p { border-width: medium; border-style: dotted; }

If we want the border BLUE we can use the border-color property as such: p { border-width: medium; border-style: dotted; border-color: blue; }

combination propertyits just border:, and it expects width, style, then color p { border: medium dotted blue; }

four borders individually set with the following properties: border-top, border-right, border-bottom, and border-left. p { border-left: dotted red; border-right: dashed purple; }

So:

Can be summed up as:

border-width, border-color and border-style can also be summed up as, for example:

By stating just two values (such as margin: 1em 10em;), the first value will be the top and bottom and the second value will be the right and left.

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

PSEUDO CLASSES

PAGE LAYOUT

The position property is used to define whether an element is absolute, relative, static or fixed.

POSITIONING

You might also like