Writing CSS is like directing a film.

Size: px

Start display at page:

Download "Writing CSS is like directing a film."

Erick Harrison
5 years ago
Views:

1 INTRO TO CSS3. #3

2 3.1 What is CSS? 2

3 3 Writing CSS is like directing a film. The actors and spoken words are the HTML content. The set, costume and style are controlled by CSS. You can tell the content where to go and what it should look like. Like a director you can say specify different people or groups to do different things "I want all extras over here" or "We need the lead wearing black here". It's written completely differently to HTML. There are no similarities in their syntax.

4 4 CSS separates content from design. Before CSS styling was done inline with the HTML and tables were used to lay out the page. There are many problems with this approach, the biggest is that your style rules needed to be replicated across multiple pages. With CSS you can set a style rule in a.css file, then reuse that throughout your website. If you change that one rule, it will update each page loading that CSS.

5 5 Not all browsers support all CSS rules. Like HTML, CSS has different versions. The newest supported version is CSS3. Older browsers won't support new features of CSS3. New features include: - Drop and Text Shadow - Rounded Corners - Transitions and Animations - Gradients - Webfonts - Screen size dependent rules (Responsive websites) As CSS relates to style, a site will generally still be readable in older browsers that don't support all features. This is called degrading gracefully.

6 6 You can write CSS in 3 locations. The best place to write CSS is in a separate.css file. You then link that file to your HTML file in the head of your document: <link rel="stylesheet" href="css/screen.css"> You can also write CSS in the <head> of each HTML page. <style> p{ color:red; </style> Or the last option is to write CSS inline within a HTML element. To do that you add an attribute to the opening tag: <p style="color:red;">this will be red</p> You can use all 3 variations simultaneously if you wish. You can also load mulitple external CSS files.

7 7 CSS files use the extension.css You should save the CSS files in their own subfolder. Like html files, the filename should use only lower case characters and avoid spaces. To link the CSS file you need to add a <link> element in the head of each HTML page that will use that CSS. In this case the CSS file is called screen.css and is in the css subfolder. <link rel="stylesheet" href="css/screen.css">

8 3.2 Writing CSS

9 9 There are 3 parts to a CSS rule. selector, property and value. The selector is the HTML element you want to style. The property is the feature of that element you want to style. These are predefined, you can see the list at w3schools.com/cssref/ The value is the specification of that style you want. The actor's suit color should be navy. selector property value! CSS uses US english spelling for color and center!

10 10 selector p { property value color: red; The punctuation is very important. - Each selector is followed by a set of curly brackets. - Each property is followed by a colon - and the value is followed by a semi-colon.

11 11 Each pair of property and value is called a declaration. You can write infinite declarations inside a selector. p { color:red; declaration #1 background:black; declaration #2

12 3.3 Selectors

13 13 There are 3 ways to select a HTML element. 1. The general element name: add style rules to all HTML elements of that type. e.g. p{ color:red; styles all paragraphs red. 2. An id selector: used to set style rules for one specific element. You cannot use the same id twice on one HTML page. 3. A class selector: can be applied to multiple elements. There is a hierarchy to how these rules are weighted and applied, in CSS it's called specificity.

14 14 The general selector simply uses the HTML element name. p{ color:red; h1{ color:blue; h2{ color:green; ul{ color:orange;

15 15 CSS: To style using an id selector, use a hash symbol followed by the id name (you define this). #intro{ font-size:20px; HTML: In your HTML, set the id attribute in the opening tag. <p id="intro"> this is the intro and will be bigger</p>

16 16 CSS: For a class selector, use a full stop symbol, then the class name (you define this)..bigger{ font-size:20px; HTML: Set a class attribute in the opening tag. <p class="bigger"> this is the intro and will be bigger</p> <p>this is not the intro</p>

17 3.4 CSS properties

18 18 color will change the text color. To write a color value you can use pre-defined color names or use a hexidecimal RGB color code like #ff9900. p { color:orange; h1 color:#ff9900;

19 19 background will change the background. Again you can use pre-defined color names or use a hexidecimal color code. p { background:black; h1 background:#000000;

20 20 background allows you to use an image as a background. The default behaviour is to tile the image over and over if it is smaller than the element. body { background:url("../images/back.jpg");

21 21 You can turn off repeating, position the image and change it's size as well. You can group them into one declaration or use separate properties background-repeat, background-position and background-size. body { background:url("../images/back.jpg") no-repeat center; background-size:cover;

22 22 text-align allows you to align text. p { text-align:center;

23 23 text-decoration allows you to decorate text. Options include overline, underline, line-through. p { text-decoration:underline;

24 24 text-transform allows you to change the case. The options are lowercase, uppercase and capitalize. h1{ text-transform:uppercase;

25 25 font-size allows you to set the font size. You can set the font-size using px units (for pixels) or em. 1em is equal to the current font size. The default text size in browsers is 16px. h1{ font-size:32px; p { font-size:1em;

26 26 line-height sets the space between lines of text. You can set the line-height using px units or a number which will be multiplied that elements font-size. h1{ line-height:32px; p { line-height:1.5;

27 27 font-style allows you to italicise text. h1{ font-style:italic;

28 28 font-weight sets the weight of the text. You can define this with the words: normal, bold, bolder and lighter or the figures 100, 200, 300, 400, 500, 600, 700, 800, 900 where 400 is normal. h1{ font-weight:700; Not all fonts will have all weights.

29 29 font-family sets the font family of the text You can specify multiple families simultaneously. The browser will attempt to load the left most one first, then the next. You can use serif or sans-serif as a last catch-all option. h1{ font-family:gotham, Helvetica, sans-serif; Traditionally the font needed to be on the users machine. Defining more than one allowed you to use fall backs for different scenarios.

30 30 border allows you to set a border around an element. It's value is split into 3, the thickness of the line, the style of the line and the color of the line. The styles you can use include solid, dotted, dashed, double, groove, ridge and outset. h1{ border:10px solid #ff9900;

31 31 border-top, border-left, border-right and border-bottom allow you to define one side's border at a time. h1{ border-left:20px solid #ff9900;

32 32 opacity defines an element's transparency. The range is from 0 to 1 0 is completely transparent (invisible) and 1 is completely opaque. h1{ opacity:.5;

33 3.5 Selectors and specificity

34 34 You can select more than one HTML element You can group more than one selector together to style multiple items simultaneously. Just separate them with commas. p, h1, h2{ font-family:"comic Sans";

35 35 Pseudo classes target different states There are many pseudo classes, the most common is to used to target a link when it is hovered. To write a pseudo class, write your selector as before, then use a colon, :, then the pseudo class, in this case hover a:hover{ color:#000000;

36 36 You can target children elements. Write the parent selector first, leave a space then write the child element. footer p{ font-size:11px; This rule will only affect paragraphs in the footer. You can combine this behaviour with classes and ids. footer p.intro{ font-size:11px

37 37 There is a hierarchy to how CSS rules are applied. It's a bit like a game of poker, the way a certain rule is written can over rule another way. #1 Inline styles This is where the style is written in the opening tag of the element. #2 ID selectors This where you use an ID selector. #3 Class selectors This where you use a Class selector. #4 General element selectors This where you use a general selector like p{ If the rules have the same weight or level, the last written one will be applied.

38 38 The rules of specificity can be confusing and frustrating. You may be writing CSS rules that aren't being applied to your HTML elements as there are other rules with a higher rank. You can use your browser to see what rules are being used or ignored. In Chrome, right click on the element and choose 'Inspect element'.

39 3.6 CSS3 properties

40 40 Useful new CSS3 properties. text-shadow: 2px 2px 2px #ff0000; horizontal vertical blur color box-shadow: 2px 2px 2px #ff0000; horizontal vertical blur color border-radius: 20px; transition: all.5s; properties duratio

41 41 CSS3 supports gradients. They are quite complicated to write but there are online generators: background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);

42 For next week. Create an HTML page using the following content. Use a header, footer and aritcle element to structure the page and include a mockup of a navigaion. Using an external stylesheet, style the page to be to use a dark background with light text in a contemporary style. In your CSS file use at least: - a parent child selector - a grouping of selectors - try a CSS3 property - use a background image Duplicate the HTML page and create a link to it from the first page and vice-versa.

43 For next week. <h1>interaction design</h1> <h2> In design, human computer interaction, and software development, interaction design, often abbreviated IxD, is defined as "the practice of designing interactive digital products, environments, systems, and services." Like many other design fields interaction design also has an interest in form but its main focus is on behavior.[1]:1 What clearly marks interaction design as a design field as opposed to a science or engineering field is that it is synthesis and imagining things as they might be, more so than focusing on how things are.</h2> <h3>history</h3> <p>the term interaction design was first coined by Bill Moggridge and Bill Verplank in the mid-1980s. It would be another 10 years before other designers rediscovered the term and started using it. To Verplank, it was an adaptation of the computer science term user interface design to the industrial design profession. To Moggridge, it was an improvement over soft-face, which he had coined in 1984 to refer to the application of industrial design to products containing software.</p> <p>the first academic program officially named as Interaction Design was established at Carnegie Mellon University in 1994 as Master of Design in Interaction Design. When the program started it focused mostly on screen interfaces, but today more on the big picture aspects of interaction people, organizations, culture, service, and system.</p> <p>in 1990, Gillian Crampton Smith founded the Computer-related Design MA at the Royal College of Art (RCA) in London, which changed to Design Interactions in 2005, headed by Professor Anthony Dunne. In 2001, Crampton Smith helped found the Interaction Design Institute Ivrea, a small institute in Northern Italy dedicated solely to interaction design; the institute moved to Milan in October 2005 and merged courses with Domus Academy. In 2007, some of the people originally involved with IDII set up the Copenhagen Institute of Interaction Design (CIID). In 1998, the Swedish Foundation for Strategic Research founded The Interactive Institute - a Swedish research institute in the field of interaction design.</p>

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors