Movatterモバイル変換

CHAPTER 3INTRODUCTION TO CASCADINGSTYLE SHEETS(CSS) -IT 210Web-Based Design1

O B J E C T I V E SBy the end of this chapter, you’ll be able to: Control a website’s appearance with style sheets. Use a style sheet to give all the pages of a website the same look andfeel. Use the class attribute to apply styles. Specify the precise font, size, color and other properties of displayedtext.2

OUTLINES FOR PART 1 Introduction. Inline Styles. Embedded Style Sheets. Linking External Style Sheets.Selectors in CSS3

INTRODUCTIONThe basic structure of every web page, HTML, is very plain onits own. The beautiful websites that you see across theinternet are styled with a variety of tools, including CSS.Cascading Style Sheets 3 (CSS3): is a language that is used incombination with HTML that customizes how HTML elementswill appear. CSS can define styles and change the layout anddesign of a sheetCSS validated iigsaw.w3.org/css-validator/ This tool can help you make sure that your code is correctand will work on CSS3-compliant browsers. 4

INTRODUCTIONCSS: A New Philosophy Separate content from presentation!Content(HTML document)Presentation(CSS Document)TitleLorem ipsum dolor sitamet, consectetueradipiscing elit.Suspendisse at pede utpurus malesuadadictum. Donecviaccumsan. Morbi at• arcu vel elit ultriciesporta. Prointortor purus, luctusnon, aliquam nec,interdum vel, iamolestie. Praesentaugue tortor, convalliseget, euismodnonummy, lacinia ut,risus.BoldItalicsIndentTitleLorem ipsum dolor sit amet, consectetuer adipiscingelit. Suspendisse at pede ut purus malesuadadictum. Donec vitae neque non magna aliquamdictum.• Vestibulum et odio et ipsum• accumsan accumsan. Morbi at• arcu vel elit ultricies porta. ProinThe ResultingPageNice web done by CSS: http://seanhalpin.io/

WRITING CSS CODE IN HTML FILEYou can declare CSS codes in the HTML5, by:1. INLINE STYLES:CSS styles can be directly added to HTML elements by using thestyle attribute in the element’s opening tag. Each style declarationis ended with a semicolon. Styles added in this manner are knownas inline styles.2. EMBEDDED STYLE: CSS code can be written in an HTML file byenclosing the code in <style> tags. Code surrounded by <style>tags will be interpreted as CSS syntax. 6<h2 style="text-align: center;"> Centered text </h2><p style="color: blue; font-size:18px;">Blue,text</p><head> <style> h1 { color : blue ; } </style> </head>

INLINE STYLESIn Example (1) : applies inline styles to p elements to alter their fontsize and color. Each CSS property is followed by a colon (:) and the value of theattribute and Multiple property declarations are separated by a semicolon (;)8<p style = "font-size: 20pt ; color:deepskyblue ;">it’s important to know that inline styles are aquick way of directly styling an HTML element.

Fig. 4.1 | Using inline stylesINLINE STYLES (CONT.)EXAMPLE (1) ON THE BROWSER9inline styles are a fast way ofstyling HTML, but they alsohave limitations. If youwanted to style, forexample, multiple <h1>elements, you would haveto add inline styling to eachelement manually. Inaddition, you would alsohave to maintain the HTMLcode when additional <h1>elements are added.

EMBEDDED (internal) STYLE SHEETS A second technique for using style sheets is embedded stylesheets, which enable you to embed a CSS3 codes in anHTML5 document’s head section.10

EMBEDDED STYLE SHEETSEXAMPLE (2)In this example createan embedded stylesheet containing fourstyles.11

EMBEDDED STYLE SHEETSEXAMPLE (2) CONT..12

Fig. 4.3 | Embedded style sheet.EMBEDDED STYLE SHEETSEXAMPLE (2) OUTPUT13

EMBEDDED STYLE SHEETSEXAMPLE (2): EXPLAINING LINE 11 TO 18Line 11: Styles placed in the head apply to matching elements whereverthey appear in the body. The style element’s type attribute specifies theMIME (Multi purpose Internet Mail Extensions) type that describes thestyle element’s content.lines 12–17: declares the CSS rules for the style sheet.14Default inHTML 5

WRITING CSS CODE IN SEPARATE FILESCSS code can be written in its own files to keep it separate fromthe HTML code. The extension for CSS files is .css. These can belinked to an HTML file using a <link> tag in the <head> section.That called as External Style (highly recommended )CSS rules in separate file .css extension linked via<link rel="stylesheet" href=…> tag15

WRITING CSS CODE IN SEPARATE FILES<LINK> TAGTo link an external style sheet in html documents we use <link> tag.Note: Link tag is void. (No need to close it)o link tag has many elements some of them are:16Element(Attribute)Descriptionrel specify a relationship between twodocumentstype specifies the MIME type of the relateddocumenthref provides the URL for the document

WRITING CSS CODE IN SEPARATE FILES External style sheets are separate documents that containonly CSS rules. Help create a uniform look for a website:oSeparate pages can all use the same styles.oModifying a single style-sheet file makes changes to stylesacross an entire website (or to a portion of one). When changes to the styles are required, you need tomodify only a single CSS file to make style changes acrossall the pages that use those styles. This concept issometimes known as skinning.17

body { background-color:#E6E6FA;color: #000000;}h2 { color: #003366; }LINKING EXTERNAL STYLE SHEETSMultiple web pages can associate with the same externalstyle sheet file.18site.css index.htmlclients.htmlabout.htmlEtc…

LINKING EXTERNAL STYLE SHEETSEXAMPLE (3) HTML19

LINKING EXTERNAL STYLE SHEETSEXAMPLE (3) CSS20

WHAT IS THE PREFERRED WAY OF INCLUDING CSS WITHIN APROJECT? HOW DO I KNOW WHEN TO USE INLINE STYLES, THETAGS, OR A .CSS FILE?As a web developer, you will eventually come across HTML documentswhich include CSS either inline with style attributes or within the <style>tags at the head of the document. Hence, it is important to be aware ofall the various ways to include CSS in a project.That having been said, mashing HTML and CSS together is not a greathabit to get into. As developers we want to “separate our concerns”because this usually creates codebases that are more flexible, readable,and maintainable. As such, keeping our CSS contained within a separate.css file is the preferred way of including CSS within most projects.21

STYLE SHEETS SYNTAX A style sheet consists of a set of rules. Each rule consists of one or more selectors and a declaration block. Selectors are separated by commas Declarations are separated by semicolons Properties and values are separated by colons22h1,h2,h3 { color: green; font-weight: bold; }

SELECTORS IN CSS1. CSS Type Selectors used to match all elements of a given type or tag name For example, in HTML, the tag for a paragraph elementis <p>. The CSS syntax for selecting <p> elements is:p {…..}23

SELECTORS IN CSS2. CSS class selectors it matches elements based on the contents of their classattribute. a . needs to be prepended.24For example, consider the following HTML:<p class="brand">Sole Shoe Company</p>The paragraph element in the example above has a classattribute within the <p> tag.The class attribute is set to "brand". To select this elementusing CSS, we could use the following CSS selector:.brand {}

SELECTORS IN CSS3. CSS ID selectors It matches elements based on the contents of their id attribute. Thevalues of id attribute should be unique.25Explain:If an HTML element needs to be styled uniquely (no matter whatclasses are applied to the element), we can add an ID to theelement to the tag:<h1 id="large-title"> ... </h1>Then, CSS can select HTML elements by their id attribute. To selectan id element, CSS prepends the id name with a hashtag (#). Forinstance, if we wanted to select the HTML element in the exampleabove, it would look like this:#large-title {

SELECTORS IN CSS4. Groups of CSS Selectors Match multiple selectors to the same CSS rule, using acomma-separated list. In this example, the text for both h1and h2 is set to red.Example:h1, h2 {color: red;}26

SELECTORS IN CSS5. Chaining Selectors that rule sets apply only to elements that match all criteria.Example:27/* Select h3 elements with the section-heading class */h3.section-heading {color: blue; }/* Select elements with the section-heading and button class*/.section-heading .button {cursor: pointer; }

MULTIPLE CLASSESFor instance, perhaps there’s a heading element that needs to be green andbold. You could write two CSS rules like so:.green { color: green; }.bold { font-weight: bold; }Then, you could include both of these classes on one HTML element like this:<h1 class="green bold"> ... </h1>We can add multiple classes to an HTML element’s class attribute by separatingthem with a space. This enables us to mix and match CSS classes to createmany unique styles without writing a custom class for every style combinationneeded. 28

CLASS VS IDclasses are meant to be used many timesID is meant to style only one element.IDs override the styles of tags and classes.ID attribute should be unique29

SELECTOR SPECIFICITYThe most specific selector type is the ID selector, followed byclass selectors, followed by type selectors.In this example, only color: blue will be implemented as it hasan ID selector whereas color: red has a type selectorSpecificity is a ranking system that is used when there aremultiple conflicting property values that point to the sameelement. When determining which rule to apply, the selectorwith the highest specificity wins out.30h1#header { color: blue; } /*implemented*/h1 { color: red; } /*not implemented*/

Review CSS Selectors•CSS can change the look of HTML elements. In order to do this, CSS mustselect HTML elements.•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.•Multiple unrelated selectors can receive the same styles by separating theselector names with commas.31

SOME OF CSS FONT PROPERTYfont-family Propertyfont-family property specifies the name of the font to use.32Fig. 4.5 | Generic font families.

SOME OF CSS FONT PROPERTYfont-size Property font-size property: specifies the size used to render the font. You can specify a point size such(12pt) or a relative value such as (xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large). Relative font-size values are preferred over points, because an authordoes not know the specific measurements of each client’s display. Relative values permit more flexible viewing of web pages. For example, users can change font sizes the browser displays forreadability.33

SOME OF CSS FONT PROPERTYfont-weight property font-weight property : specifies the “boldness” oftext. Possible values are:o boldo normal (the default)o bolder (bolder than bold text)o lighter (lighter than normal text)34

SOME OF CSS FONT PROPERTYtext-align property The text-align property places text in the left, right,or center of its parent container.color property : defines the color of the text.35

VALUES IN THE CSS RULES Colors are set in RGB format (decimal or hex):o Example: #a0a6aa = rgb(160, 166, 170)o Predefined color aliases exist: black, blue, etc. Numeric values are specified in:o Pixels, ems, e.g. 12px , 1emo Points, inches, centimeters, millimeters• E.g. 10pt , 1in, 1cm, 1mmo Percentages, e.g. 50%o Zero can be used with no unit: border: 0; 36

https://colorhunt.co/ is a web site to help Designers and Artists to choose abeautiful Color PalettesVALUES IN THE CSS RULESColor names and hexadecimal codes may be used as the color property value.37

CSS COMMENTSCSS comments may be placed in any typeof CSS code (i.e., inline styles, embeddedstyle sheets and external style sheets) andalways start with /* and end with */.38

Movatterモバイル変換

Change Language

Lecture 3CSS part 1.pptx

Embed presentation

Recommended

More Related Content

Similar to Lecture 3CSS part 1.pptx

More from GmachImen

Recently uploaded

Lecture 3CSS part 1.pptx