Download as PPT, PDF, TXT or read online from Scribd
Download as ppt, pdf, or txt
You are on page 1/ 19
INTRODUCTION TO CSS IN
HTML
Cascading Style Sheets
(CSS) What is CSS? • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents. • Styles provide powerful control over the presentation of web pages. • Its not a programming Language but rather a stylesheet or styling language. Used for website layouts & design. And used along side HTML. • It can also be used with other markup languages like XHtml, XML, HTML. Etc but most commonly used with HTML. • Can be extended with Sass/Less to be more functional and not just presentational, to include capabilities of variables, conditionals etc. What is required to get started
• Web browser(Google chrome, mozilla
firefox, safari, edge, internet explorer(not that good though), opera etc. • Text Editor - (sublime Text) - Atom.io - visual studio code -Brackets - Notepad++ (windows) - TextMate (Mac) CSS Syntax Rules
• A style sheet consists of a set of
rules. • Each rule consists of one or more selectors and a declaration block. • A declaration block consists of a list of declarations in curly braces ({}). • Each declaration consists of a property, a colon (:), a value, then a semi-colon (;). Css selectors
CSS Syntax selector {property: value;} Three methods/Scopes for adding css • Local / inline – confined to a single element (tag). Inserted directly into the HTML element (NO!!) • Internal – affect elements in an entire page (using the <style> tag in the head section to affect a single document). • External – can affect multiple pages. By linking to an external .css file • Precedence – Local > Internal > External Local /inline Style Sheet • Example – <h1 style="color:white; background:orange; font- weight: bold;">Internal Style Sheet Applied to Header 1</h1> Full example: <html><head><title>css style sheet</title></head> <body> <h1 style=“color:white; background:orange;font- weight:bold;”> internal style sheet for H1</h1> </body></html> • Practice 1. add “text-align” property to make it centered 2. add “border” property to let it have black, 1px thick, solid border at left, right, top, and bottom Internal Style Sheet
• How to create? – Put <style> </style> tag between <head> and </head> tags of your HTML page – Use type attribute to indicate the style sheet type, usually type=“text/css” – Specify a default style sheet language for the whole document by <meta http-equiv="Content-Style- Type" content="text/css" /> – Put your set of style sheet rules in between <style> and </style> tags Internal Style Sheet • Example • <!Doctype html> • <html> • <head><title>css internal stylesheet</title> • <style type=“text/css”> • body{ background-color: #f4f4f4; color:#555555; font- size:16px; • Font-famiy:Arial, helvetica, sans-serif; font-weight:normal; line-height:1.6em;} • /*below on body is the short form of above code*/ • body{font: normal 16px Arial, Helvetica, sans-serif;} h1{color:blue; font-family:courier new; font-weight:bold; } </style></head> • <body> • <h1>Hello world!! Welcome to css!!</h1> • </body></html> External Style Sheet • An external style sheet is simply a text-only file that contains only CSS rules. • How to link to external style sheet? – <link href=“URL of CSS File" rel="stylesheet" type="text/css" /> • Practice – Create a file called “mystyle.css” and do the example in local style sheet, but as external style sheet External style sheet • Mystyle.css file body{ background-color:#f4f4f4; color:blue; line- height:1.6em; font-family:arial, helvetica, sans- serif; } h1{ color:red; text-align:center; text-transform: uppercase; } Html document to be affected by the above style sheet <html><head><title>calling an external style sheet </title> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”> </head><body> <h1>welcome to web Design with simple css</h1> </body> </html> Example 2
• Style.css file • Body { background-color:#f4f4f4; color:blue; line- height:1.6em; font-family:arial, helvetica, sans-serif; font-size:17px; font-weight:400; margin:0;} .container { width:960px; /*80% more responsive and better8*/ margin: auto; .box-1{ background-color:#333; color:#fff; border-right: 5px; red; solid; or border: 5px; red; solid; this affects all the sides Border-width:3px; border-bottom-width:5px; padding:20px; font-style: italic;} .box-1 h1{ font-family:tahoma; font-weight:800; text- decoration: underline; letter-spacing:0.2em; word- spacing:1em;} Color assignment modes
body { •Color names
color:red; •HTML color background:coral; names } •Hexadecimal h1{ colors color:#00ff00; } •RGB p{ color: rgb(0,0,255); Margin and Padding HTML Styles
The style attribute is a new HTML attribute. It
introduces CSS to HTML. The HTML Style Attribute The purpose of the style attribute is: To provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly by in separate style sheets (CSS files). In our HTML tutorial we use the style attribute to introduce you to HTML styles. The HTML style attribute has the following syntax: style="property:value" The property is a CSS property. The value is a CSS value. HTML Style Examples
• style="background-color:yellow" • style="font-size:10px" • style="font-family:Times" • style=“text-align:center” • Background Color • <body style="background- color:yellow"> • The style attribute defines a style for the <body> element. • The new style attribute makes the "old" bgcolor attribute obsolete. HTML Style Examples cont… Font Family, Color and Size • <p style="font-family:courier new; color:red; font-size:20px"> • The style attribute defines a style for the <p> element. • The new style attribute makes the old <font> tag obsolete. • Text Alignment • <h1 style="text-align:center"> • The style attribute defines a style for the <h1> element. • The new style attribute makes the old "align" attribute obsolete
