CSS Cascading Style Sheet What is CSS CSS

CSS (Cascading Style Sheet)

What is CSS ? • CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. • CSS describes how elements must be rendered on screen, on paper, or in other media.

What is CSS ? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed on screen, paper, or in other media • CSS saves a lot of work. It can control the layout of multiple web pages all at once. • Describes how information is to be displayed, not what is being displayed • External stylesheets are stored in CSS files

why are they “cascading”? You can have many style sheets in different places. Style sheets come in the form of rules: “at this place, do that”. Where there are many rules, there is potential for conflict. CSS comes with a set of rules that regulate such conflicts. This set of rules is known as the cascade.

Why Use CSS? • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. • CSS Saves a Lot of Work! The style definitions are normally saved in external. css files. With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS Solved a Big Problem • HTML was NEVER intended to contain tags formatting a web page! • HTML was created to describe the content of a web page, like: <h 1>This is a heading</h 1> <p>This is a paragraph. </p> • When tags like <font>, and color attributes were added to the HTML, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. • To solve this problem, the World Wide Web Consortium (W 3 C) created CSS. • CSS removed the style formatting from the HTML page!

CSS Specifications W 3 C defines three CSS levels: • CSS Level 1 (December 1996): CSS 1 laid the ground work and introduced the selectors and most of the properties. • CSS Level 2 (May 1998) and CSS Level 2. 1 (Last revised on June 2011): CSS 2 added new features such as targeting devices and printers, and absolute positioning. • CSS Level 3: CSS 3 is not a single piece of specification. As CSS grows, W 3 C decided to break it into modules, such as the Selectors module, the Values and Units Modules, the Box Alignment module, and so on. Each module is then developed independently.

CSS Specifications • It is important to take note that: – CSS is humongous!!! Most of the browsers today have yet to fully support CSS 2/CSS 2. 1. – CSS is a language with its own syntax, which is different from HTML and Java. Script.

CSS Syntax A CSS rule-set consists of a selector and a declaration block: • The selector points to the HTML element you want to style. • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon. • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Basic CSS rule syntax selector { property: value; . . . property: value; } CSS p { font-family: sans-serif; color: red; } CSS • A CSS file consists of one or more rules • Each rule starts with a selector • A selector specifies an HTML element(s) and then applies style properties to them – a selector of * selects all elements 10

CSS Syntax In the following example all <p> elements will be center-aligned, with a red text color:

CSS Syntax • The id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

CSS Syntax • The style rule below will be applied to the HTML element with id="para 1":

CSS Syntax • The class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (. ) character, followed by the name of the class.

CSS Syntax • In the example below, all HTML elements with class="center" will be red and center-aligned:

CSS Syntax • You can also specify that only specific HTML elements should be affected by a class.

Difference between css id & class • ids are unique – Each element can have only one id – Each page can have only one element with that id • classes are NOT unique – You can use the same class on multiple elements. – You can use multiple classes on the same element.

CSS Syntax • Grouping Selectors If you have elements with the same style definitions, like this:

CSS Insertion • There are three ways of inserting a style sheet: – External style sheet – Inline style

External Style Sheet • With an external style sheet, you can change the look of an entire website by changing just one file! • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: – An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a. css extension.

External Style Sheet

External Style Sheet • Linking to External CSS @import Directive Style Sheet using – Besides the HTML <link> element, you can also use CSS's @import directive to link to an external style sheet, as follows: – @import is part of the CSS language. It can also be used in one CSS file to include rules from another CSS file.

Internal Style Sheet • Internal Style Sheet – An internal style sheet may be used if one single page has a unique style. – Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Inline Styles • An inline style may be used to apply a unique style for a single element. • To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Inline Styles • The example below shows how to change the color and the left margin of a <h 1> element:

Attaching a CSS file <link> <head>. . . <link href="filename" type="text/css" rel="stylesheet" />. . . </head> HTML <link href="style. css" type="text/css" rel="stylesheet" /> <link href="http: //www. google. com/uds/css/gsearch. css" rel="stylesheet" type="text/css" /> HTML • A page can link to multiple style sheet files – In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used CS 380 26

Embedding style sheets: <style> <head> <style type="text/css"> p { font-family: sans-serif; color: red; } h 2 { background-color: yellow; } </style> </head> HTML • CSS code can be embedded within the head of an HTML page • Bad style and should be avoided when possible (why? ) CS 380 27

Inline styles: the style attribute <p style="font-family: sans-serif; color: red; "> This is a paragraph</p> HTML This is a paragraph output • Higher precedence than embedded or linked styles • Used for one-time overrides and styling a particular element • Bad style and should be avoided when possible (why? ) CS 380 28

CSS Colors • Colors are displayed combining RED, GREEN, and BLUE light. • Colors in CSS are most often specified by: – a valid color name - like "red" – an RGB value - like "rgb(255, 0, 0)" – a HEX value - like "#ff 0000"

CSS Colors

CSS Borders • The CSS border properties allow you to specify the style, width, and color of an element's border. Border Style The border-style property specifies what kind of border to display. The following values are allowed: § § § § § dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3 D grooved border. The effect depends on the border-color value ridge - Defines a 3 D ridged border. The effect depends on the border-color value inset - Defines a 3 D inset border. The effect depends on the border-color value outset - Defines a 3 D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border

CSS Borders

CSS Margins • The CSS margin properties set the size of the white space OUTSIDE the border. • With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left) • Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: – margin-top – margin-right – margin-bottom – margin-left

CSS Margins

Margin - Shorthand Property • To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: – margin-top – margin-right – margin-bottom – margin-left

CSS Padding • The CSS padding properties are used to generate space around content. • The padding properties set the size of the white space between the element content and the element border. • The padding clears an area around the content (inside the border) of an element. • CSS has properties for specifying the padding for each side of an element: – padding-top – padding-right – padding-bottom – padding-left

CSS Padding

All CSS Dimension Properties

<div> in html • The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

CSS Backgrounds The CSS background properties are used to define the background effects for elements. CSS background properties: – background-color – background-image – background-repeat – background-attachment – background-position

Background Image - Fixed position

CSS Lists In HTML, there are two main types of lists: – unordered lists (<ul>) - the list items are marked with bullets – ordered lists (<ol>) - the list items are marked with numbers or letters The CSS list properties allow you to: – Set different list item markers for ordered lists – Set different list item markers for unordered lists – Set an image as the list item marker

CSS Lists

CSS Lists

The list-style-type property ol { list-style-type: lower-roman; } CSS • Possible values: i. none : No marker ii. disc (default), circle, square iii. Decimal: 1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, iii, iv, v, etc. vi. upper-roman: I, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana… CS 380 45

Design The Page

Make the following web page using HTML and CSS