Beginners css tutorial for web designers

Cascading Style Sheets- CSS “Add style to your web pages” Devendra Shukla Senior web designer Singsys Pte Ltd

Definition of CSS • • • CSS stands for Cascading Style Sheets Styles - define how to display HTML elements Styles are normally stored in Style Sheets Definition: Cascading Style Sheets (CSS) – is a style sheet language used for describing the look and formatting of a document written in a markup language. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border, font etc.

CSS Cascading Style Sheets, or CSS, is a style sheet language used on the Web CSS specifications are maintained by the World Wide Web Consortium (W3C) Three versions of CSS exist: CSS1, CSS2, and CSS3

CSS1 The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for      Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements The W3C no longer maintains the CSS 1 Recommendation.

CSS2 CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of new capabilities like- Positioning ✔Visual Formatting ✔Media Types ✔Interfaces ✔z-index ✔and new font properties such as shadows. ✔

CSS3 Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999 ✔User Interfaces ✔Accessibility ✔Columnar layout ✔Mobile Devices ✔Scalable Vector Graphics

Advantages Separation of content from presentation CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal parameters include explicit user preferences, different web browsers, the type of device being used to view the content (a desktop computer or mobile Internet device), the geographic location of the user and many other variables. Bandwidth A stylesheet, internal or external, specifies the style once for a range of HTML elements selected by class, type or relationship to others. This is much more efficient than repeating style information inline for each occurrence of the element. An external stylesheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, further reducing data transfer over a network.

Advantages Site-wide consistency When CSS is used effectively, in terms of inheritance and "cascading," a global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made by editing rules in the global style sheet. Before CSS, this sort of maintenance was more difficult, expensive and time-consuming. CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Syntax of CSS The CSS syntax is made up of 5 parts: 1) Selector 2) Property/value 3) Declaration 4) Declaration block 5) Curly braces

Selector Selectors are used to declare which part of the markup a style applies to, a kind of match expression. 3 types of selectors 1) Tag selectors (body, p, div, a) 2) ID selectors (#wrapper, #sidebar) 3) Class selectors (.content, .menu) *The selector is normally the HTML element you want to style *Selectors should never start with a number, nor should they have spaces in them

ID Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="wrapper": #wrapper { text-align:center; border:1px solid red; Width: 200px; Height: 100px } For example, to identify a paragraph as “head”, use the code: <div id=“wrapper”>… </div> *Do NOT start an ID name with a number!

Class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: .center {text-align:center;} p.center {text-align:left;} <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> <p class="left">Center-aligned paragraph.</p> *Do NOT start an ID name with a number!

Property & Value The property is the style attribute you want to change. Each property has a value *Properties are separated from their respective values by colons : *Pairs are separated from each other by semicolons ;

Declaration Definition: Each CSS line that includes property and value *Each declaration consists of a property and a value

Declaration Block A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property and a value. If there are multiple declarations in a block.

Curly Braces The curly braces contain the properties of the element you want to manipulate, and the values that you want to change them to. The curly braces plus their content is called a declaration block.

How CSS is Applied to A Web Page There are three ways of inserting a style sheet: 1) Inline style 2) Internal style sheet 3) External style sheet

Inline style ● ● An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph <p style=“text-align: center; fontweight: bold; color: yellow;”>This is a paragraph.</p>

Internal style sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type=“text/css”> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

External style sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Link to a separate css file

Multiple Style Sheets You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element You can also link a single document to several style sheets @import "container.css"; @import "header.css"; @import "content.css"; @import "footer.css";

Multiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3{ color:red; text-align:left; font-size:8pt; }

Multiple Style Sheets And an internal style sheet has these properties for the h3 selector: h3 { text-align:right; font-size:20pt; }

Multiple Style Sheets If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red; text-align:right; font-size:20pt;

Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new “virtual" style sheet by the following rules, where number four has the highest priority: 1) Browser default 2) External style sheet 3) Internal style sheet (in the head section) 4) Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin, Padding, Border and Content Explanation of the different parts:     Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is inherited from the color property of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear

Margin The CSS margin properties define the space around elements. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Possible Values

Margin - Individual sides In CSS, it is possible to specify different margins for different sides: margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; All CSS Margin Properties

Margin - Shorthand property To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin": margin:25px All Four Side margin:25px 75px; Top & bottom - left & right margin:25px 50px 75px; Top – right & left - bottom margin:25px 50px 75px 100px; Top right bottom & left

Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. Possible Values

Padding - Individual sides In CSS, it is possible to specify different margins for different sides: padding-top:100px; padding-bottom:100px; padding-right:50px; padding-left:50px; All CSS Padding Properties

Padding - Shorthand property To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property. The shorthand property for all the padding properties is "padding": padding:25px All Four Side padding:25px 75px; Top & bottom - left & right padding:25px 50px 75px; Top – right & left - bottom padding:25px 50px 75px 100px; Top right bottom & left

Border The CSS border properties allow you to specify the style and color of an element's border. Borders fall between the padding and margin and provide an outline around an element. Every border needs three values, a width, style, and color. Shorthand values fall in the order of width, style and color. Longhand, these three values can be broken up into the border-width, border-style, and bordercolor properties. Most commonly you will see one sized, solid, single colored borders. Borders do however have the capability to come in numerous sizes, shapes, and colors.

Border Style The border-style property specifies what kind of border to display.

Border Width The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. The "border-width" property does not work if it is used alone. Use the "borderstyle" property to set the borders first.

Border Width .one-box { border-style:solid; border-width:5px; } .two-box { border-style:solid; border-width:medium; } .three-box { border-style:solid; border-width:1px; }

Border Color The border-color property is used to set the color of the border. The color can be s name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000" You can also set the border color to "transparent". p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

CSS Box Model This is commonly called the Box Model. In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. Here is a way to visualize it...

Width and Height of an Element When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. The total width of the element in the example below is

Width and Height of an Element div { background: #fff; border: 6px solid #ccc; height: 100px; margin: 20px; padding: 20px; width: 400px; } To break down the total width of an element, including the box model, use the formula: margin-right + border-right + padding-right + width + padding-left + border-left + marginleft In comparison, the total height of an element, including the box model, can be found using the formula: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Width and Height of an Element div { background: #fff; border: 6px solid #ccc; height: 100px; margin: 20px; padding: 20px; width: 400px; } Using the formulas and box context above we can find the total height and width of our example. Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Thank You! Devendra Shukla Senior web designer Singsys Pte Ltd

Beginners css tutorial for web designers

In this document

More Related Content

What's hot

Similar to Beginners css tutorial for web designers

More from Singsys Pte Ltd

Recently uploaded

Beginners css tutorial for web designers