SlideShare a Scribd company logo

CSS Basics

•Download as PPT, PDF•
•
WordPress Memphis
WordPress Memphis

Presentation to WordPress Memphis meetup group on December 2, 2010, CSS Basics. By designer Irina McGuire. http://www.irinamcguire.com

Related slideshows

CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html list
Html listHtml list
Html list
 
1 of 40
The Basics of Cascading Style Sheets (CSS) Irina McGuire Graphic Designer | Front-End Web Developer www.irinamcguire.com December 3, 2010
Introduction What do you know about CSS? What do you hope to do with CSS? How familiar are you with HTML? Examples of beautiful CSS Web sites: www.csszengarden.com One content, many layouts .
Presentation Summary What is CSS? CSS & HTML The Box Model Style Sheet Implementation CSS Rule Structure HTML & DIVs Common CSS properties CSS Cascade and Inheritance Resources
What is CSS? CSS stands for Cascading Style Sheet . Typical CSS file is a text file with an extention .css and contains a series of commands or rules. These rules tell the HTML how to display. *To create a style sheet, create a file using Notepad (PC) or Text Edit (Mac), save it as a .css document and start writing the CSS code (see right). /* Styles for sitename.com*/ body { font-family:Arial; background: #000; } #container { text-align:left; width:1020px; } #header { height:232px; } #footer { width: 100%; padding: 0 10px; margin-bottom: 10px; } And so on…. Style.css

Recommended for you

Html ppt
Html pptHtml ppt
Html ppt

Hypertext Markup Language (HTML) is a markup language that is used to structure and present content on the World Wide Web. It was created by Tim Berners-Lee in 1980. The document defines various HTML tags such as headings, paragraphs, bold, italics, lists, images, and links. It provides examples of how to use each tag, including the opening and closing syntax. Common tags discussed include <h1> for main headings, <p> for paragraphs, <b> for bold text, <i> for italics, <ol> for ordered lists, <ul> for unordered lists, and <a> for creating links between pages.

 
•by santosh lamba
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics

This document provides an overview of HTML and CSS topics including: - A brief history of HTML and CSS standards from 1990 to present. - Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists. - Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals. - Details on CSS topics like the box model, centering content, semantic HTML, and flexbox. The document serves as a course outline or reference for learning HTML and CSS fundamentals.

 
•by Eliran Eliassy
html5htmlcss
css.ppt
css.pptcss.ppt
css.ppt

This document provides an introduction to Cascading Style Sheets (CSS) including its syntax, types, selectors and an example program. CSS allows styling web pages by separating design from content. CSS rules consist of selectors and declaration blocks with properties and values. There are three types of CSS styles: internal, inline, and external. Common selectors include element, ID, class, and grouping selectors. An example program demonstrates using CSS to style an HTML table with borders, padding, and rounded corners.

 
•by bhasula
css.types of css
CSS Benefits Separates structure from presentation Provides advanced control of presentation Easy maintenance of multiple pages Faster page loading Better accessibility for disabled users Easy to learn
HTML Without CSS ��� HTML without CSS is like a piece of candy without a pretty wrapper.” Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default. With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.
HTML & CSS HTML and CSS work together to produce beautiful and functional Web sites HTML = structure CSS = style
The Box Model CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float. Header Navigation Content Footer

Recommended for you

Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting

The document discusses various HTML text formatting tags such as headings (<h1>-<h6>), paragraphs (<p>), centering content (<center>), line breaks (<br>), and horizontal rules (<hr>). It also covers presentational tags for bold (<b>), italics (<i>), underline (<u>), strikethrough (<strike>), monospaced (<tt>), superscript (<sup>), and subscript (<sub>) text. The document provides examples and attributes for many of these tags.

 
•by eShikshak
htmlcenterparagraph
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS

The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.

 
•by Mario Hernandez
layoutcsshtml5
Css selectors
Css selectorsCss selectors
Css selectors

There are 6 types of CSS selectors: simple, class, generic, ID, universal, and pseudo-class selectors. Simple selectors apply styles to single elements. Class selectors allow assigning different styles to the same element on different occurrences. ID selectors define special styles for specific elements. Generic selectors define styles that can be applied to any tag. Universal selectors apply styles to all elements on a page. Pseudo-class selectors give special effects like focus and hover.

 
•by Parth Trivedi
#html #css #selectors
Attaching a Style Sheet Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;css/styles.css&quot; /> 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red” >Some Text</p>
CSS Rule Structure A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value. selector { property: value; } declaration
Selectors body { property : value ; } h1 { property : value ; } em { property : value ; } p { property : value ; } A selector, here in green , is often an element of HTML.
Properties and Values body { background: purple; } h1 { color: green; } h2 { font-size: large; } p { color: #ff0000;} /*hexadecimal for red*/ body { background: purple; color: green; } Properties and values tell an HTML element how to display. *CSS code can be written in a linear format (above) or in a block format (below).

Recommended for you

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html

This document provides an introduction to HTML (Hypertext Markup Language) and describes some basic HTML tags and elements. It discusses how to structure an HTML document using tags like <html>, <head>, <title>, and <body>. It also covers text formatting tags, headings, paragraphs, hyperlinks, images, and more. The document contains examples of HTML code and the rendered output to demonstrate how various tags are used.

 
•by vikasgaur31
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html

This document provides an introduction to HTML (Hypertext Markup Language) and basic HTML tags for formatting text and adding images to web pages. It discusses how HTML uses markup tags to structure and present content in a web browser. It describes common text formatting tags, font tags, image tags, and other basic tags for headings, paragraphs, line breaks, hyperlinks and more. The document contains examples of HTML code using these tags and the resulting web page output.

 
•by vikasgaur31
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation

JavaScript can dynamically manipulate the content, structure, and styling of an HTML document through the Document Object Model (DOM). The DOM represents an HTML document as nodes that can be accessed and modified with JavaScript. Common tasks include dynamically creating and adding elements, handling user events like clicks, and updating content by accessing DOM elements by their id or other attributes.

 
•by Mohammed Arif
manipulationdomjavascript
Grouping Selectors h1 {color: black;} h1 {font-weight: bold;} h1 {background: white;} h1 { color: black; font-weight: bold; background: white; } Group the same selector with different declarations together on one line. Example of grouping selectors (both are correct):
Grouping Selectors Group different selectors with the same declaration on one line. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h1, h2, h3 { color: yellow; } Example of grouping selectors (both are correct):
Comments in CSS Explain the purpose of the coding Help others read and understand the code Serve as a reminder to you for what it all means Starts with /*and ends with*/ p { color: #ff0000;} /*Company Branding*/
Typical Web Page (Browser) header footer main menu Container

Recommended for you

HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics

This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.

 
•by Mai Moustafa
htmlcsslearn
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner

HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website. If you have any doubt contact me for more details. WhatsApp:8008877940

 
•by Jayapal Reddy Nimmakayala
htmlhtml basicsbasics of html
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript

Introduction to JavaScript course. The course was updated in 2014-15. Will allow you to understand what is JavaScript, what's it history and how you can use it. The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.

 
•by Andres Baravalle
javascriptweb development
Typical Web Page (HTML) <div id=“ container ”> <div id=“ header ”>Insert Title</div> <div id=“ main &quot;>content <div id=“ menu ”>content</div> </div> <div id=“ footer ”>content</div> </div> Typical HTML Web page is made up of containers (boxes) or DIVs. Each DIV is assigned an ID or a Class.
Typical Web Page (CSS) # container {property: value;} # menu {property: value;} # main {property: value;} # footer {property: value;} The CSS file uses the same DIV/ID/Class names as the HTML and uses them to style the elements.
IDs and Classes IDs (#) are unique and can only be used once on the page Classes (.) can be used as many times as needed HTML Code: <h1 id=“ mainHeading ”>Names</h1> <p class=“ name ”>Joe</p> CSS Code: # mainHeading {color: green} . name {color: red}
CSS Box Properties Background-color Width Padding Margin Border-width Border-color Border-style

Recommended for you

An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script

HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. CSS is used to style and lay out HTML elements, using selectors, declarations, and properties to change things like colors and positioning. JavaScript can be added to HTML pages with <script> tags and is used to add interactive elements and dynamic behavior by manipulating HTML and responding to user input. It has data types like strings and numbers and control structures like if/else statements.

 
•by Fahim Abdullah
html learninghtmlcss learning
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, links, images, and more. When an HTML file is opened in a web browser, the browser displays the page using the tags to interpret the page's content and structure. Common HTML elements include headings, paragraphs, links, images, lists, tables, forms, and iframes. CSS can also be used to further define styles and visual presentation of HTML elements.

 
•by McSoftsis
web marketingweb design and developmentweb design
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5

HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors

 
•by www.netgains.org
htmlhtml5web development
HTML CSS div id=“header” div id=“footer” div id=“content” # content { background-color: #ccc; margin-bottom: 10px; border: 1px dashed blue; color: #fff; width: auto; }
Common CSS Layout Properties Width Height Float Clear Border Padding Margin width height padding margin border
Width & Height div id=“box” #box {width=“50px”} #box {width=“50em”} #box {width=“100%”} #box {width=“auto”} Width and height define the width and height of an element. #box {height=“auto”} *Width and height can be specified in pixels, ems, percentages or set to auto
Float: (left, right) Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping. div id=“box” Here is some text which wraps around the box floated to the left. #box {float:left; margin-right: 10px;}

Recommended for you

Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript

This document provides an introduction to JavaScript and its uses for web programming. It explains that JavaScript is a client-side scripting language that allows web pages to become interactive. Some key points covered include: - JavaScript can change HTML content, styles, validate data, and make calculations. - Functions are blocks of code that perform tasks when invoked by events or called in code. - Events like clicks or keyboard presses trigger JavaScript code. - The DOM (Document Object Model) represents an HTML document that JavaScript can access and modify. - Forms and user input can be accessed and processed using the DOM. - Programming flow can be controlled with conditional and loop statements. -

 
•by Walid Ashraf
javascriptintroduction
Java script
Java scriptJava script
Java script

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.

 
•by Abhishek Kesharwani
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial

The document provides an overview of basic CSS concepts including what CSS is, why it's used, CSS syntax, selectors like element, class, ID and pseudo selectors, and common CSS properties for styling like color, background, fonts, text, lists, and borders. CSS is used to control the presentation and layout of HTML documents and allows separation of HTML semantic content from visual design.

 
•by mohamed ashraf
Clear: (left, right, both) #box3 { background-color: white; border: 1px solid #000; clear: both;} When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line. div id=“box1” div id=“box2” div id=“box3”
Border (top, right, bottom, left) #box { border-color: red; border-style: dotted; border-width: 2px; div id=“box” #box { border: red dotted 1px; #box { border-top: red dotted 1px; border-bottom: red dotted 1px; border-left: red dotted 1px; border-right: red dotted 1px; } You can define the entire border or only the top, bottom, left, or right. You can also define the border using one declaration. The code could be any of the following:
Padding (top, right, bottom, left) Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately. The code could be any of the following: padding: 10px; Padding: 10px 10px; padding: 10px 10px 10px 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px; div id=“box” padding
Margin (top, right, bottom, left) Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately. The code could be any of the following: margin: 10px; or margin: 10px 10px; or margin: 10px 10px 10px 10px; or margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; margin div id=“box”

Recommended for you

CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners

Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.

 
•by Amit Kumar Singh
Cookie and session
Cookie and sessionCookie and session
Cookie and session

This document discusses cookies and sessions in PHP. Cookies are used to store small pieces of data on the user's browser and move across pages, avoiding relogging in. Sessions store data on the server and are more secure. PHP uses the setcookie() function to set cookies and $_COOKIE to retrieve them. Sessions are started with session_start() and use $_SESSION to set and retrieve session variables. Cookies can be used to remember the session ID so sessions persist across browser closes.

 
•by Aashish Ghale
phpsessioncookie
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works

CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.

 
•by Amit Tyagi
htmlcsscascading style sheets
Text Properties .mainHeading { color: red; letter-spacing: 5px; text-transform: uppercase; word-spacing: 15px; text-align: left; font-family: Times; text-decoration: underline; font-size: 12px; font-style: italic; font-weight: bold; } MAIN HEADING Gravida lacinia velit. Vivamus tortor enim, tincidunt at, pellentesque ut, iaculis eu, quam. To style the main heading in the paragraph above, we assigned a class the HTML tag. <h3 class=“mainHeading”>Main Heading</h3>
CSS Colors White Black Blue Fuchsia Gray Green Lime Aqua #ffffff #fff #cccf0f3 Standard Hexadecimal
Styling Links a:link {color: red; text-decoration: none;border-bottom: 1px dashed red; background: white;} a:visited {color: yellow;} a:active {color: green;} a:hover {color: orange;} The links property defines how inactive, hovered, active, and visited link states appear to the user.
Including Images Properties for working with images include: Background-image Background-repeat Background-position Background-attachment

Recommended for you

CSS ppt
CSS pptCSS ppt
CSS ppt

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML and XML documents. CSS separates document content from document presentation, enabling control over elements like layout, colors, and fonts. This separation improves accessibility, flexibility, and maintenance of web pages. CSS can format pages for different rendering methods like on-screen, in print, and for speech-based browsers.

 
•by Sanmuga Nathan
Cookies!
Cookies!Cookies!
Cookies!

Cookies are easy to prepare and store well, making them popular for the food service industry. Key factors that make a good cookie are flavor from high quality ingredients measured exactly, texture which depends on fat and moisture content, and appearance from uniform shaping and correct baking temperature. There are two mixing methods - one stage simply combines all ingredients while creaming mixes butter and sugar first. Cookies are formed by dropping, rolling, pressing, spreading in sheets, forming dough logs then slicing, or portioning dough into bars.

 
•by kellimccabe
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2

This document discusses CSS positioning properties. It explains static positioning as the default normal flow layout. It describes float as removing an element from the flow and allowing other content to wrap around it. Relative positioning is defined as positioning an element relative to its static position, while fixed takes an element out of flow and positions it relative to the browser window. Absolute positioning positions an element relative to its first positioned ancestor, removing it from the flow. Examples are given for float, relative, fixed, and absolute. Class exercises provide opportunities to practice these positioning techniques.

 
•by Shawn Calvert
csshigher educationweb design and development
Layering Background colors and images are layered like sheets of paper one on top of the other. #bg { background:url(leaves.jpg) no-repeat top left} #main {background-color: red} #box {background-color: yellow} div id=“bg” div id=“main” div id=“box”
Background-Image li { background-image:url(flower.jpg); padding-left: 10px; } Background images and colors are layered. If not transparent, the last one listed in the CSS file is visible. The background-image property sets an image in the background of an element.
Background-Repeat li { background-image:url(flower.jpg); background-repeat:no-repeat; } Possible Values > The background-repeat property sets an image in the background of an element and tiles, or repeats, it. Tiling is the default. repeat repeat-x (horizontal) repeat-y (vertical) no-repeat
Image Positioning The background-position property positions the image using either combined keywords (top, bottom, left, right, and center); length values; or percentage values. The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll . background-position: right top; /*can also use number values*/ background-attachment: fixed; /*can also use ‘scroll’*/ left top center top left bottom center bottom right bottom

Recommended for you

Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net

This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more

 
•by Programmer Blog
csscss3html5
CSS
CSSCSS
CSS

This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it works, the different sources of styles, CSS selectors, properties, positioning, and inheritance. CSS allows separation of document content from page layout and styles, making web page design and maintenance easier. Styles defined in CSS rules cascade from broad to specific and can come from author styles, user stylesheets, or browser defaults.

 
•by Md. Sirajus Salayhin
css
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0

Completo tutorial de CSS 2.0, con las normas del W3C que dicta los estándares para elaboración de sitios web.

 
•by Vladimir Valencia
css 2.0cssstandars
The Power of Cascade When multiple styles or style sheets are used, they start to cascade and sometimes compete with one another due to CSS’s inheritance feature. Any tag on the page could potentially be affected by any of the tags surrounded by it. So, which one wins? Nearest Ancestor Wins. Inline style or directly applied style The last style sheet declared in the <header> section
Saving Time with Inheritance In a nutshell, inheritance (not the money you get from your grandma) is the process by which CSS properties applied to one tag are passed on to nested tags. For example, the paragraph tag will inherit the same styling as the body tag because <p> is always located inside <body>. <body style=“font-family: Arial”> <p>This text will be Arial as well</p> </body> So, instead of styling each paragraph separately, you can define the font color in the <body>, and everything inside will have that color.
Resources http://www.w3schools.com/css/css_reference.asp (list of all CSS properties) http://www.w3schools.com/css/ http://www.glish.com/css/ http://www.html.net/tutorials/css/ http://blog.html.it/layoutgala/ Great Book “ CSS: The Missing Manual” - by David Sawyer McFarland CSS Galleries http://www.cssbeauty.com/gallery/ www.cssdrive.com http://www.css-website.com
Thank You I hope you enjoyed this presentation and learned some basic CSS. Good luck with creating beautiful and functional Web sites.

Recommended for you

Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css

The basic of css for all. Separates structure from presentation Provides advanced control of presentation Easy maintenance of multiple pages Faster Page loading Better accessibility for disabled users Easy to learn

 
•by shabab shihan
web designwordpresscss
Css introduction
Css introductionCss introduction
Css introduction

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS can be defined internally, inline, or externally in CSS files. CSS rules have selectors and declarations, where properties and values are used to style elements. Common CSS properties control color, text formatting, background images and colors. Styles can be applied to HTML elements, classes, or IDs. When multiple conflicting styles are defined, styles are cascaded according to precedence rules with inline styles having the highest priority.

 
•by vishnu murthy
css introduction
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS

This document provides an introduction to cascading style sheets (CSS) and covers several key concepts: CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.

 
•by Folasade Adedeji
csshtmlweb

More Related Content

What's hot

CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Gil Fink
 
Html list
Html listHtml list
Html list
sayed fathey
 
Html ppt
Html pptHtml ppt
Html ppt
santosh lamba
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
css.ppt
css.pptcss.ppt
css.ppt
bhasula
 
Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting
eShikshak
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
Mohammed Arif
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
Andres Baravalle
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
McSoftsis
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Java script
Java scriptJava script
Java script
Abhishek Kesharwani
 

What's hot (20)

CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Html list
Html listHtml list
Html list
 
Html ppt
Html pptHtml ppt
Html ppt
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
css.ppt
css.pptcss.ppt
css.ppt
 
Html text and formatting
Html text and formattingHtml text and formatting
Html text and formatting
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Java script
Java scriptJava script
Java script
 

Viewers also liked

Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
mohamed ashraf
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
Aashish Ghale
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
CSS ppt
CSS pptCSS ppt
CSS ppt
Sanmuga Nathan
 
Cookies!
Cookies!Cookies!
Cookies!
kellimccabe
 

Viewers also liked (6)

Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Cookies!
Cookies!Cookies!
Cookies!
 

Similar to CSS Basics

CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
Shawn Calvert
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
 
CSS
CSSCSS
CSS
Md. Sirajus Salayhin
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
Css introduction
Css introductionCss introduction
Css introduction
vishnu murthy
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Tom Hapgood
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Senthil Kumar
 
David Weliver
David WeliverDavid Weliver
David Weliver
Philip Taylor
 
Html advance
Html advanceHtml advance
Html advance
PumoTechnovation
 
HTML-Advance.pptx
HTML-Advance.pptxHTML-Advance.pptx
HTML-Advance.pptx
Pandiya Rajan
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
Tesfaye Yenealem
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 

Similar to CSS Basics (20)

CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
CSS
CSSCSS
CSS
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
 
Css introduction
Css introductionCss introduction
Css introduction
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
Html advance
Html advanceHtml advance
Html advance
 
HTML-Advance.pptx
HTML-Advance.pptxHTML-Advance.pptx
HTML-Advance.pptx
 
Css ppt
Css pptCss ppt
Css ppt
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 

Recently uploaded

Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling in real worldImplementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 

Recently uploaded (20)

Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling in real worldImplementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling in real world
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 

CSS Basics

  • 1. The Basics of Cascading Style Sheets (CSS) Irina McGuire Graphic Designer | Front-End Web Developer www.irinamcguire.com December 3, 2010
  • 2. Introduction What do you know about CSS? What do you hope to do with CSS? How familiar are you with HTML? Examples of beautiful CSS Web sites: www.csszengarden.com One content, many layouts .
  • 3. Presentation Summary What is CSS? CSS & HTML The Box Model Style Sheet Implementation CSS Rule Structure HTML & DIVs Common CSS properties CSS Cascade and Inheritance Resources
  • 4. What is CSS? CSS stands for Cascading Style Sheet . Typical CSS file is a text file with an extention .css and contains a series of commands or rules. These rules tell the HTML how to display. *To create a style sheet, create a file using Notepad (PC) or Text Edit (Mac), save it as a .css document and start writing the CSS code (see right). /* Styles for sitename.com*/ body { font-family:Arial; background: #000; } #container { text-align:left; width:1020px; } #header { height:232px; } #footer { width: 100%; padding: 0 10px; margin-bottom: 10px; } And so on…. Style.css
  • 5. CSS Benefits Separates structure from presentation Provides advanced control of presentation Easy maintenance of multiple pages Faster page loading Better accessibility for disabled users Easy to learn
  • 6. HTML Without CSS “ HTML without CSS is like a piece of candy without a pretty wrapper.” Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default. With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.
  • 7. HTML & CSS HTML and CSS work together to produce beautiful and functional Web sites HTML = structure CSS = style
  • 8. The Box Model CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float. Header Navigation Content Footer
  • 9. Attaching a Style Sheet Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;css/styles.css&quot; /> 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red” >Some Text</p>
  • 10. CSS Rule Structure A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value. selector { property: value; } declaration
  • 11. Selectors body { property : value ; } h1 { property : value ; } em { property : value ; } p { property : value ; } A selector, here in green , is often an element of HTML.
  • 12. Properties and Values body { background: purple; } h1 { color: green; } h2 { font-size: large; } p { color: #ff0000;} /*hexadecimal for red*/ body { background: purple; color: green; } Properties and values tell an HTML element how to display. *CSS code can be written in a linear format (above) or in a block format (below).
  • 13. Grouping Selectors h1 {color: black;} h1 {font-weight: bold;} h1 {background: white;} h1 { color: black; font-weight: bold; background: white; } Group the same selector with different declarations together on one line. Example of grouping selectors (both are correct):
  • 14. Grouping Selectors Group different selectors with the same declaration on one line. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h1, h2, h3 { color: yellow; } Example of grouping selectors (both are correct):
  • 15. Comments in CSS Explain the purpose of the coding Help others read and understand the code Serve as a reminder to you for what it all means Starts with /*and ends with*/ p { color: #ff0000;} /*Company Branding*/
  • 16. Typical Web Page (Browser) header footer main menu Container
  • 17. Typical Web Page (HTML) <div id=“ container ”> <div id=“ header ”>Insert Title</div> <div id=“ main &quot;>content <div id=“ menu ”>content</div> </div> <div id=“ footer ”>content</div> </div> Typical HTML Web page is made up of containers (boxes) or DIVs. Each DIV is assigned an ID or a Class.
  • 18. Typical Web Page (CSS) # container {property: value;} # menu {property: value;} # main {property: value;} # footer {property: value;} The CSS file uses the same DIV/ID/Class names as the HTML and uses them to style the elements.
  • 19. IDs and Classes IDs (#) are unique and can only be used once on the page Classes (.) can be used as many times as needed HTML Code: <h1 id=“ mainHeading ”>Names</h1> <p class=“ name ”>Joe</p> CSS Code: # mainHeading {color: green} . name {color: red}
  • 20. CSS Box Properties Background-color Width Padding Margin Border-width Border-color Border-style
  • 21. HTML CSS div id=“header” div id=“footer” div id=“content” # content { background-color: #ccc; margin-bottom: 10px; border: 1px dashed blue; color: #fff; width: auto; }
  • 22. Common CSS Layout Properties Width Height Float Clear Border Padding Margin width height padding margin border
  • 23. Width & Height div id=“box” #box {width=“50px”} #box {width=“50em”} #box {width=“100%”} #box {width=“auto”} Width and height define the width and height of an element. #box {height=“auto”} *Width and height can be specified in pixels, ems, percentages or set to auto
  • 24. Float: (left, right) Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping. div id=“box” Here is some text which wraps around the box floated to the left. #box {float:left; margin-right: 10px;}
  • 25. Clear: (left, right, both) #box3 { background-color: white; border: 1px solid #000; clear: both;} When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line. div id=“box1” div id=“box2” div id=“box3”
  • 26. Border (top, right, bottom, left) #box { border-color: red; border-style: dotted; border-width: 2px; div id=“box” #box { border: red dotted 1px; #box { border-top: red dotted 1px; border-bottom: red dotted 1px; border-left: red dotted 1px; border-right: red dotted 1px; } You can define the entire border or only the top, bottom, left, or right. You can also define the border using one declaration. The code could be any of the following:
  • 27. Padding (top, right, bottom, left) Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately. The code could be any of the following: padding: 10px; Padding: 10px 10px; padding: 10px 10px 10px 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 10px; div id=“box” padding
  • 28. Margin (top, right, bottom, left) Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately. The code could be any of the following: margin: 10px; or margin: 10px 10px; or margin: 10px 10px 10px 10px; or margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; margin div id=“box”
  • 29. Text Properties .mainHeading { color: red; letter-spacing: 5px; text-transform: uppercase; word-spacing: 15px; text-align: left; font-family: Times; text-decoration: underline; font-size: 12px; font-style: italic; font-weight: bold; } MAIN HEADING Gravida lacinia velit. Vivamus tortor enim, tincidunt at, pellentesque ut, iaculis eu, quam. To style the main heading in the paragraph above, we assigned a class the HTML tag. <h3 class=“mainHeading”>Main Heading</h3>
  • 30. CSS Colors White Black Blue Fuchsia Gray Green Lime Aqua #ffffff #fff #cccf0f3 Standard Hexadecimal
  • 31. Styling Links a:link {color: red; text-decoration: none;border-bottom: 1px dashed red; background: white;} a:visited {color: yellow;} a:active {color: green;} a:hover {color: orange;} The links property defines how inactive, hovered, active, and visited link states appear to the user.
  • 32. Including Images Properties for working with images include: Background-image Background-repeat Background-position Background-attachment
  • 33. Layering Background colors and images are layered like sheets of paper one on top of the other. #bg { background:url(leaves.jpg) no-repeat top left} #main {background-color: red} #box {background-color: yellow} div id=“bg” div id=“main” div id=“box”
  • 34. Background-Image li { background-image:url(flower.jpg); padding-left: 10px; } Background images and colors are layered. If not transparent, the last one listed in the CSS file is visible. The background-image property sets an image in the background of an element.
  • 35. Background-Repeat li { background-image:url(flower.jpg); background-repeat:no-repeat; } Possible Values > The background-repeat property sets an image in the background of an element and tiles, or repeats, it. Tiling is the default. repeat repeat-x (horizontal) repeat-y (vertical) no-repeat
  • 36. Image Positioning The background-position property positions the image using either combined keywords (top, bottom, left, right, and center); length values; or percentage values. The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll . background-position: right top; /*can also use number values*/ background-attachment: fixed; /*can also use ‘scroll’*/ left top center top left bottom center bottom right bottom
  • 37. The Power of Cascade When multiple styles or style sheets are used, they start to cascade and sometimes compete with one another due to CSS’s inheritance feature. Any tag on the page could potentially be affected by any of the tags surrounded by it. So, which one wins? Nearest Ancestor Wins. Inline style or directly applied style The last style sheet declared in the <header> section
  • 38. Saving Time with Inheritance In a nutshell, inheritance (not the money you get from your grandma) is the process by which CSS properties applied to one tag are passed on to nested tags. For example, the paragraph tag will inherit the same styling as the body tag because <p> is always located inside <body>. <body style=“font-family: Arial”> <p>This text will be Arial as well</p> </body> So, instead of styling each paragraph separately, you can define the font color in the <body>, and everything inside will have that color.
  • 39. Resources http://www.w3schools.com/css/css_reference.asp (list of all CSS properties) http://www.w3schools.com/css/ http://www.glish.com/css/ http://www.html.net/tutorials/css/ http://blog.html.it/layoutgala/ Great Book “ CSS: The Missing Manual” - by David Sawyer McFarland CSS Galleries http://www.cssbeauty.com/gallery/ www.cssdrive.com http://www.css-website.com
  • 40. Thank You I hope you enjoyed this presentation and learned some basic CSS. Good luck with creating beautiful and functional Web sites.

Editor's Notes

  1. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  2. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  3. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  4. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  5. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  6. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  7. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  8. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  9. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  10. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  11. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  12. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  13. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  14. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  15. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  16. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  17. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  18. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  19. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  20. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  21. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  22. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  23. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  24. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  25. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  26. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  27. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  28. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  29. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  30. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  31. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  32. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  33. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  34. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  35. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  36. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  37. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  38. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  39. Cascading Style Sheets: Pixel-Level Control with HTML Ease
  40. Cascading Style Sheets: Pixel-Level Control with HTML Ease