The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.
The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.
The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.
The document discusses CSS concepts including iterative design process, CSS introduction, colors, borders, box model, and selectors. It provides details on each concept such as how iterative design improves a design through testing and feedback, the different ways to insert CSS stylesheets, how to specify colors in CSS using names, hexadecimal, RGB and more, properties to style borders, the different parts of the box model, and using selectors to target specific elements.
Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
You are on page 1/ 25
Design Foundations and styling
pages with CSS
Research topics • Foundational design principles and tools • How to create design mockups Iterative design process • Iterative design is the process of continual improvement, of a concept, prototype, design or product.
• It is a cyclic approach to the development of a
product, whereby a design is improved by frequent testing, client feedback, focus groups, materials testing, prototype testing, design development and evaluation, until a final refined / developed design is reached. Iterative design process • It differs from the linear approach to design, where by the designer goes through a number of predefined stages, one at a time, until a conclusive design is reached.
• Start by writing a design problem, after
consultation with potential clients / customers and stakeholders AND write a design brief. Iterative design process • Design tools are individual components of the Iterative Design Cycle. They are used to help in the design and development of a product.
• Sketching, model making, feedback, acting on
feedback, design improvements, model making, questionnaires / surveys, are examples of “design tools”. Introduction to CSS • CSS stands for Cascading Style Sheets.
• CSS is a language that describes the style of an
HTML document.
• CSS describes how HTML elements should be
displayed. Introduction to CSS • When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
There are three ways of inserting a style sheet:
• Internal style sheet • Inline style • External style sheet Internal style • 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:
style for a single element. • To use inline styles, add the style attribute to the relevant element.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1> 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:
Example <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> CSS Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Predefined Color Names:
- In HTML, a color can be specified by using a color name.
Examples include • Tomato • Orange • DodgerBlue • MediumSeaGreen • Gray • SlateBlue • Violet • LightGray CSS Colours Background Color • You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> CSS Colours Text Color • You can set the color of text: Example <h1 style="color:Tomato;">Hello World</h1>
Border Color • You can set the color of borders: Example • <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1> CSS Colours Color Values • In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
RGB Value • In HTML, a color can be specified as an RGB value, using this formula: • rgb(red, green, blue) CSS Colours HEX Value • In HTML, a color can be specified using a hexadecimal value in the form: • #rrggbb
RGBA Value • RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. • An RGBA color value is specified with: • rgba(red, green, blue, alpha) CSS Borders • The CSS border properties allow you to specify the style, width, and color of an element's border. • The border-style property specifies what kind of border to display.
Border Width • The border-width property specifies the width of the four borders. • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre- defined values: thin, medium, or thick. CSS Borders Border Width • The border-width property specifies the width of the four borders. • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
Border Color • The border-color property is used to set the color of the four borders.
The color can be set by:
• name - specify a color name, like "red" • Hex - specify a hex value, like "#ff0000" • RGB - specify a RGB value, like "rgb(255,0,0)" • transparent • The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). • If border-color is not set, it inherits the color of the element. CSS Borders The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
If border-color is not set, it inherits the color of the element.
p.three { border-style: solid; border-color: red green blue yellow; } CSS Borders Border - Shorthand Property • There are many properties to consider when dealing with borders and to shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual
Example p { border: 5px solid red; } CSS Border Rounded Borders • The border-radius property is used to add rounded borders to an element:
Example p { border: 2px solid red; border-radius: 5px; } 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 every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: CSS Box Model • Explanation of the different parts: • Content - The content of the box, where text and images appear • Padding - Clears an area around the content. The padding is transparent • Border - A border that goes around the padding and content • Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Example • div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } Selectors • A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
• Selectors may include a combination of different
qualifiers to select unique elements, all depending on how specific we wish to be.
For example, we may want to select every
paragraph on a page, or we may want to select only one specific paragraph on a page.
