CSC 123: Fundamentals of Web Design PDF

CSC 123: Fundamentals of Web Design CSS (Cascading Style Sheets) Introduction  The HTML Style Attribute ▪ Setting the style of an HTML element, can be done with the style attribute. ▪ The HTML style attribute has the following syntax: style="proper...

CSC 123: Fundamentals of Web Design CSS (Cascading Style Sheets) Introduction  The HTML Style Attribute ▪ Setting the style of an HTML element, can be done with the style attribute. ▪ The HTML style attribute has the following syntax: style="property:value;" ▪ The property is a CSS property. The value is a CSS value. CSC 123 2  HTML Background Color ▪ The background-color property defines the background color for an HTML element: ▪ This example sets the background for a page to lightgrey: CSC 123 3  HTML Text Color ▪ The color property defines the text color for an HTML element: CSC 123 4  HTML Fonts ▪ The font-family property defines the font to be used for an HTML element: CSC 123 5  HTML Text Size ▪ The font-size property defines the text size for an HTML element: o % or px CSC 123 6  HTML Text Alignment ▪ The text-align property defines the horizontal text alignment for an HTML element: CSC 123 7  The Element ▪ The element is a block-level element that is often used as a container for other HTML elements. ▪ The element has no required attributes, but style and class are common. CSC 123 8  The Element ▪ The element is an inline element that is often used as a container for some text. ▪ The element has no required attributes, but style and class are common. CSC 123 9  Styling HTML with CSS ▪ CSS stands for Cascading Style Sheets ▪ Styling can be added to HTML elements in 3 ways: o Inline - using a style attribute in HTML elements o Internal - using a element in the HTML section o External - using one or more external CSS files ▪ The most common way to add styling, is to keep the styles in separate CSS files. CSC 123 10  Inline Styling (Inline CSS) ▪ Inline styling is used to apply a unique style to a single HTML element: ▪ Inline styling uses the style attribute. ▪ This example changes the text color of the element to blue: CSC 123 11  Internal Styling (Internal CSS) ▪ Internal styling is used to define a style for one HTML page. ▪ Internal styling is defined in the section of an HTML page, within a element: CSC 123 12  External Styling (External CSS) ▪ An external style sheet is used to define the style for many pages. ▪ With an external style sheet, you can change the look of an entire web site by changing one file! ▪ To use an external style sheet, add a link to it in the section of the HTML page. ▪ 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. CSC 123 13  Example HTML file CSS file CSC 123 14  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 ▪ External stylesheets are stored in CSS files CSC 123 15  CSS Solved a Big Problem ▪ HTML was NEVER intended to contain tags for formatting a web page! ▪ HTML was created to describe the content of a web page, like: o This is a heading o This is a paragraph. ▪ When tags like , and color attributes were added to the HTML 3.2 specification, 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 (W3C) created CSS. ▪ CSS removed the style formatting from the HTML page! CSC 123 16  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! CSC 123 17  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. CSC 123 18  Example ▪ In the following example all elements will be center- aligned, with a red text color: CSC 123 19  HTML The class Attribute ▪ The class attribute specifies one or more class names for an HTML element. ▪ The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. ▪ In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class: CSC 123 20  Example CSC 123 21  HTML The id Attribute ▪ The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). ▪ The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value. ▪ In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element: CSC 123 22  Example CSC 123 23  Difference Between Class and ID https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_class CSC 123 24  Classing Block Elements ▪ The HTML class attribute makes it possible to define equal styles for "equal" < div> elements: CSC 123 25 CSC 123 26  Classing Inline Elements ▪ The HTML class attribute also makes it possible to define equal styles for "equal" elements: CSC 123 27  CSS Selectors ▪ CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more. CSC 123 28  The element Selector ▪ The element selector selects elements based on the element name. ▪ You can select all elements on a page like this (in this case, all elements will be center-aligned, with a red text color): CSC 123 29  Example p { text-align: center; color: red; } Every paragraph will be affected by the style. Me too! And me! CSC 123 30  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. ▪ The style rule below will be applied to the HTML element with id="para1": CSC 123 31  Example #para1 { text-align: center; color: red; } Hello World! This paragraph is not affected by the style. CSC 123 32  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. ▪ In the example below, all HTML elements with class="center" will be red and center-aligned: CSC 123 33  Example.center { text-align: center; color: red; } Red and center-aligned heading Red and center-aligned paragraph. CSC 123 34  Referring to more than one class ▪ HTML elements can also refer to more than one class. ▪ In the following example, the element will be styled according to class="center" and to class="large": CSC 123 35  Example p.center { text-align: center; color: red; } p.large { font-size: 300%; } This heading will not be affected This paragraph will be red and center-aligned. This paragraph will be red, center-aligned, and in a large font-size. CSC 123 36  Grouping Selectors ▪ If you have elements with the same style definitions, it will be better to group the selectors, to minimize the code. ▪ To group selectors, separate each selector with a comma. CSC 123 37  Universal Selector ▪ There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. ▪ For example, if you type * { border: 2px solid black; } You'll create a two-pixel wide solid black border around every element on the HTML page. CSC 123 38  !important ▪ It will override anystyle no matter how specific it is. CSC 123 39  Review CSS Selectors ▪ CSS can change the look of HTML elements. In order to do this, CSS must select HTML elements, then apply styles to them. ▪ CSS can select HTML elements by tag, class, or ID. ▪ Multiple CSS classes can be applied to one HTML element. ▪ Classes can be reusable, while IDs can only be used once. ▪ IDs are more specific than classes, and classes are more specific than tags. That means IDs will override any styles from a class, and classes will override any styles from a tag selector. ▪ Multiple selectors can be chained together to select an element. This raises the specificity, but can be necessary. CSC 123 40  Review CSS Selectors (Cont’d) ▪ Nested elements can be selected by separating selectors with a space. ▪ The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override. ▪ Multiple unrelated selectors can receive the same styles by separating the selector names with commas. CSC 123 41  CSS Comments ▪ Comments are used to explain the code, and may help when you edit the source code at a later date. ▪ Comments are ignored by browsers. ▪ A CSS comment starts with. Comments can also span multiple lines: CSC 123 42  Three Ways to Insert CSS ▪ External style sheet ▪ Internal style sheet ▪ Inline style CSC 123 43  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 element. The element goes inside the section: CSC 123 44  External Style Sheet ▪ 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. ▪ Here is how the "myStyle.css" looks: CSC 123 45  Internal Style Sheet ▪ An internal style sheet may be used if one single page has a unique style. ▪ Internal styles are defined within the element, inside the section of an HTML page: CSC 123 46  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. ▪ The example below shows how to change the color and the left margin of a element: CSC 123 47  Multiple Style Sheets ▪ If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. CSC 123 48  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 one has the highest priority: 1. Inline style (inside an HTML element) 2. External and internal style sheets (in the head section) 3. Browser default ▪ So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value. CSC 123 49  Main CSS properties ▪ Color ▪ Background ▪ Font ▪ The box model o Border o Margin o Padding ▪ Link ▪ List CSC 123 50  CSS Colors ▪ Colors in CSS are most often specified by: o a valid color name - like "red" o an RGB value - like "rgb(255, 0, 0)" o a HEX value - like "#ff0000" ▪ Opacity o It is the measure of how transparent an element is. It's measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. CSC 123 51  CSS Backgrounds ▪ The CSS background properties are used to define the background effects for elements. ▪ CSS background properties: o background-color o background-image o background-repeat o background-attachment o background-position CSC 123 52  Example CSC 123 53  CSS Fonts ▪ Some properties: o font-family (backup fonts) o font-style o font-size CSC 123 54  The Box Model CSC 123 55  CSS Borders ▪ The CSS border properties allow you to specify the style, width, and color of an element's border. o border-style o border-width o border-color ▪ Examples: border: 1px dashed black; CSC 123 56  CSS Margins ▪ The CSS margin properties are used to generate space around elements. ▪ The margin properties set the size of the white space OUTSIDE the border. ▪ CSS has properties for specifying the margin for each side of an element: o margin-top o margin-right o margin-bottom o margin-left margin: 1px 2px 3px 4px; CSC 123 57  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. o The padding clears an area around the content (inside the border) of an element. o Example: CSC 123 58  CSS Links ▪ The four links states are: o a:link - a normal, unvisited link o a:visited - a link the user has visited o a:hover - a link when the user mouses over it o a:active - a link the moment it is clicked ▪ Example: CSC 123 59  CSS Lists ▪ In HTML, there are two main types of lists: o unordered lists () - the list items are marked with bullets o ordered lists () - the list items are marked with numbers or letters ▪ The CSS list properties allow you to: o Set different list item markers for ordered lists o Set different list item markers for unordered lists o Set an image as the list item marker o Add background colors to lists and list items CSC 123 60  Example CSC 123 61  CSS Navigation Bars ▪ https://www.w3schools.com/Css/css_navbar.asp CSC 123 62  CSS Website Outline ▪ https://www.w3schools.com/Css/css_website_layout.asp CSC 123 63