1 Getting Started with CSS

2 CSS Cascading Style Sheets XHTML provides structure for our documents (web pages) CSS provides Style or Presentation for our documents Important to learn the language of CSS CSS is better suited than XHTML for specifying style information CSS is much better for handling styles for multiple pages

3 CSS rules, selectors, properties and values CSS contains simple statements called rules Each rule provides the style for a selection of XHTML elements A typical rule consists of a selector along with one or more properties and values The selector specifies which elements the rule applies to

4 The language of CSS CSS has its own language or syntax Each statement in CSS consists of the following: Location, Property, Style

5 CSS Location, Property, Style 1.Location (XHTML element) 2.Property (like background color) 3.Style(like color) CSS format: element { property: style; }

6 p Rule CSS format:element { property: style; } CSS example: p { background-color: red; }

7 CSS Location, Property, Style Relating this concept to an example of a house Location = bedroom Property = carpet Style = red Using CSS syntax it would look something like: bedroom { carpet: red; }

8 CSS declaration known as a Rule 1.Select element you want to style 2.Specify the property you want to style (property of the element) 1.Set the style (or color) for the property element { property: style; }

9 Anatomy of a CSS Rule CSS Rule:element { property: style; } p rule example:p { background-color: red; } Or write like…p { background-color: red; } **(linebreaks and spacing used to improve readability)

10 Adding more style to a Rule Elements have many properties which can be defined You can add as many properties and values as you like into each rule The following has a background color of red to the element and adds a 1 pixel thick solid gray border to that element p { background-color: red; border: 1px solid gray; }

11 Inserting a element into our XHTML Adding a internal CSS using the element to an XHTML page

12 Inserting a element into our XHTML Add opening & closing style tags within the element Can go just before the closing element CSS rules will go between these style elements Adams Document

13 Inserting a element example Adams Document p { color: maroon; } welcome to my webpage

14 Adding style using CSS color property Specifying the font color for paragraphs Applies style to only the element The p selector selects all the paragraphs in our XHTML document and changes font color to maroon The property to change the font color is named color p { color: maroon; }

15 Adding style using CSS color property Adams Document p { color: maroon; } Welcome, the text in all paragraphs will be colored maroon

16 Writing combined rules for more than one element Putting commas between the selectors h1, h2 allows us to combine styling to our and headings Combined rule p { color: maroon; } h1, h2 { font-family: sans-serif; color: gray; }

17 Adding an underline to both h1, h2 headings p { color: maroon; } h1, h2 { font-family: sans-serif; color: gray; border-bottom: 1px solid black; }

18 Adding a second rule for only the h1 headings Additional (more specific) rules can be added to elements p { color: maroon; } h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; }

19 Cascading Styles Can have as many rules as you want for an element Each rule adds to the style information of the rule before it Any style specific to an element you would write another rule CSS allows you to specify all kinds of selectors that determine which elements your styles are applied to

20 Using an external Style Sheet You can use an external Style Sheet (instead of an internal Style Sheet) External Style Sheet is linked to within the xhtml page External CSS is a text document saved with the.css extension Remember a webpage is also a text document saved with the.html extension External CSS enable you to easily update an entire site vs having to update the Style Sheet on each page

21 Creating an external Style Sheet You can copy CSS …simply highlight, copy and paste into a blank plain text document p { color: maroon; } h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; }

22 Creating an external Style Sheet Save Style Sheet in the same directory (folder) as your webpage Save with the.css file extension anyname.css Delete any style elements back in the webpage, int CSS in head

23 Linking an external Style Sheet Add element within the element Can go just before the closing element Links to our external Style Sheet Adams Document

24 link element used to link to external info type refers to the type of info, “text/css” (CSS Style Sheet) rel attribute specifies the relationship between the XHTML file and the file (CSS Style Sheet) we are linking to href links to where file (CSS Style Sheet) is located is an empty element, must end with />

25 href absolute Relative or absolute path can be used within href Absolute path would provide the complete path in order to find file (

26 href relative Relative means relative to where your file is currently located in the directory or folder structure In the relative example below, name.css must reside within the same folder/directory as the webpage the code resides in

27 href=“../name.css” In the example below, name.css must reside in the directory or folder directly above the current folder or directory

28 Serif vs sans serif font style Sans serif have the clean look Sans serif example Serif have “serifs” or tails and are considered more difficult to read, Serif is the default font used if we don’t specify any in our Style Sheet Serif example

29 Changing our element to use a sans-serif font p { font-family: sans-serif; color: maroon; } h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; }

30 Inheritance, parent and child elements Adding the font-family property to the “p” selector will affect any elements inside this element Additional elements that are located within elements will inherit their style For example, if a element has a font-family property, than any elements inside the element will inherit the same style Parent and child elements, child inherits style from parent

31 Styling a element affects whole document Add a body selector (see below) Modify the p,h1,h2 selectors, remove font-family from p and h1,h2, no longer needed body { font-family: sans-serif; } p { color: maroon; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; }

32 Overriding an inheritance Add a new rule for element, rule overrides its parent rule body { font-family: sans-serif; } p { color: maroon; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } em { font-family: serif; }

33 Inheritance You can override an inherited value by adding a new rule around the desired (child) element New rule is considered a specific rule for that element only (and any of its child elements) The most specific rule will always override an inherited value

34 Inheritance Determining which properties are inherited and which are not can best be determined by using a CSS reference

35 Inheritance Styles that affect the way the text looks, such as font color (the color property), the font-family, and other font related properties such as font size, font-weight (for bold text), and font-style (for italics) are inherited

36 Inheritance Properties such as border are not inherited You can always override a property that is being inherited Use a specific selector to override a property from a parent

37 Adding comments can help explain CSS logic Add comments to your CSS file using /* addcomments */ Comments can span multiple lines, for example /* this rule selects all paragraphs and colors them gray/*

38 Adding classes Can define a class of elements and then apply styles to any element that belongs to that class A class is simply a grouping or belonging to a group Sort of like belonging to a club, there are members who are part of the club Using a class would allow you to create a class for each element individually

39 class=“name_of_class” Mocha Welcome to my paragraph about my mocha type drinks Espresso Welcome to my paragraph about my expresso type drinks Vanilla Welcome to my paragraph about my expresso type drinks

40 Creating a selector for the class To specify a particular class you would write out the selector in the following format p.mocha { color: olive; } This selector only selects paragraphs belonging to the mocha class p represents the selector mocha represents the class name olive represents the style/value

41 Creating a p selector for the mocha class Enables the selecting of elements that belong to only the mocha class Add the class attribute to any element which you want the desired rule/style applied to Adding the p.mocha class selector to the.css body { font-family: sans-serif; } p { color: maroon; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } em { font-family: serif; } p.mocha { color: olive; }

42 Taking classes further If you wanted to apply the same styling to blockquotes You could add a second rule to the mocha class blockqoute.mocha, p.mocha { color: olive; }

43 Adding a class to an element Within the XHTML you would add the following to the desired blockquote Text goes here

44 Specifying several elements to class Modify the p.mocha class selector in the.css body { font-family: sans-serif; } p { color: maroon; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } em { font-family: serif; } blockqoute.mocha, p.mocha { color: olive; }

45 Adding class to multiple elements If you wanted to add class to multiple elements you could instead write as a class and apply to all desired elements.mocha { color: olive; } Rule will apply to all members assigned to this class Text goes here

46 Adding a class Leaving out all the element names and instead writing out by starting with a period followed by class name will apply rule to all elements with that class body { font-family: sans-serif; } h1 { border-bottom: 1px solid black; } em { font-family: serif; }.mocha { color: olive; }

47 Adams Document Mocha Mocha is the most popular customer item. Mocha is part of the chocolate family

48 Elements can be in more than one class If you want to specify a element in three classes you would write out the three classes with space in-between and no comma Use multiple classes when you want an element to have styles you’ve defined in different classes Not recommended, but possible

49 Elements can be in more than one class If an element belongs to multiple classes and all of which define the same property like the element, then the style which gets applied is ?…..since there is a conflict, the most specific rule will win or if all the same than the rule listed last in CSS file would rule

50 Determining how styles are applied Do any selectors select your element …if so then that’s your value If there are no selectors then you rely on inheritance …look at the elements parents until you find the property defined, if you do then that’s the value If there is no selectors and no inheritance …then the default value defined by the browser will be used

51 Determining how styles are applied Again, if multiple selectors select an element..then there is a conflict, the most specific rule will win or if all the same than the rule listed last in CSS file would rule

52 Always validate your CSS Style Sheet Always make sure to validate your CSS Style Sheet to check for conformance There will be no obvious message that it validated, instead it will notify you of obvious errors or make suggestions It does list out the valid CSS information

53 Review of the benefits to always validating Web pages will work and appear as intended by designer Will be better supported on new devices being used to view web pages Easy to make errors when writing code within a text editor, important to verify syntax -end