Introduction to CSS
Download as pptx, pdf2 likes354 views
This document provides an overview of CSS concepts and best practices in 11 slides. It discusses CSS selectors and properties, the document object model, common selector types like classes and IDs, block versus inline elements, tools for debugging CSS, and helpful online resources. Common CSS concepts like the cascade, resets, positioning, and floats are briefly explained.
1 of 12
Downloaded 12 times
Ad
Recommended
Tle html code january 18 2013
Tle html code january 18 2013Mark Valmores
油
This document contains JavaScript code that defines variables for a name and section. It uses document.write to output the section variable twice separated by a line break, and then outputs a heading and paragraph. The heading is centered in red text and the paragraph is underlined and centered text.Web Information Systems Html and css
Web Information Systems Html and cssArtificial Intelligence Institute at UofSC
油
HTML and CSS document that discusses:
1) HTML is the markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements.
2) The document covers HTML basics like tags for headings, paragraphs, and tables. It also discusses how to attach CSS styles using internal and external style sheets.
3) The document provides an overview of HTML5, the latest version, and CSS3, which introduces new selectors, properties, and multimedia capabilities.Neoito How modern browsers work
Neoito How modern browsers workNeoito
油
The document provides an overview of how modern browsers function, detailing their components including the user interface, browser engine, rendering engine, networking, JavaScript interpreter, and data storage. It explains the processes involved in retrieving and displaying web content, the role of various rendering engines used by different browsers, and performance insights for optimizing browser rendering. Additionally, it describes parsing, layout calculations, and the different JavaScript engines across browsers.悽惶 惠悸 惠惶 惶忰悋惠 悋惡 - 悋忰惆悸 悋惓悋惓悸 (悋悴慍悄 悋惓悋惓)
悽惶 惠悸 惠惶 惶忰悋惠 悋惡 - 悋忰惆悸 悋惓悋惓悸 (悋悴慍悄 悋惓悋惓) 悴悋惺悸 悋惆愕 悋惠忰悸
油
The document provides an overview of CSS (Cascading Style Sheets), discussing various styling rules and properties for HTML elements such as headings and paragraphs. It includes examples of CSS syntax, selectors, and how to link external style sheets to an HTML document. The text also touches on inline styles and the impact of different font properties.Web Information Systems XML
Web Information Systems XMLArtificial Intelligence Institute at UofSC
油
XML is a standard for storing and transporting data. It allows data to be self-describing and easy to exchange between systems. XML documents must be well-formed, following rules like having matching tags and attributes in quotes. XML uses elements to represent data and attributes to represent metadata. Namespaces allow distinguishing between identically named elements from different domains. XML is processed by parsers like SAX, DOM, and StAX. XSLT uses XPath to transform XML documents into other formats like HTML.Working with External CSS
Working with External CSSdavereece
油
This document provides an example of using an external cascading style sheet (CSS) to style elements on an HTML webpage. It includes the HTML code to link to an external CSS file, as well as the CSS code that styles the body text, bold text, and links. When the HTML and CSS files are linked, the CSS styles the bold text to be larger, a different color and font, and modifies the colors of links and visited links.The Ulta-Handy HTML Guide
The Ulta-Handy HTML Guidejsved
油
The document provides an overview of basic HTML elements and concepts. It defines HTML as using markup tags to structure web pages. It explains the basic format of an HTML document with <head> and <body> sections, and introduces common tags like <p> for paragraphs, <a> for links, <h1> for headings, and <img> for images. It also defines key concepts like URLs, HTTP, and FTP for transferring files to web servers to host HTML pages online.Tod night spectacular flier english
Tod night spectacular flier englishweiss2001
油
This one-page document appears to be a program or schedule for an event taking place at night in Tel Aviv, Israel in February 2012. It lists several musical performances and speakers that will occur. The document provides details about a nighttime event planned for a specific time and location in Tel Aviv.Firefox Extension Development | By JIIT OSDC
Firefox Extension Development | By JIIT OSDCVaidik Kapoor
油
The document provides information about starting extension development and covers topics like HTML, XML, CSS, and JavaScript. It explains that OSDC at JIIT promotes open source software usage among students and provides basic overviews of markup languages like HTML and XML as well as styling with CSS. Examples are given for each topic to illustrate common tags and structures.Html1
Html1Emily McWorthy
油
This document provides an introduction and crash course on basic HTML guidelines and tags. It explains the basic page format and structure using opening and closing tags like <html>, <head>, <title>, <body>. It describes how to add text, headings, links, images, tables, lists, and style to an HTML page. The goal is to learn the basic language of web design to be able to create simple HTML pages.Mongo db onepage
Mongo db onepageMilind Zodge
油
MongoDB is a NoSQL document-style database that stores data as documents rather than in tables. It uses a query engine to view stored data. Documents are made up of fields similar to columns in a relational database, and collections are equivalent to tables. MongoDB supports features like indexing, geospatial queries, and embedded documents to provide fast performance for document-style data without rigid schemas.Quan Head Tag Presentation
Quan Head Tag PresentationQuanslides
油
The <head> tag is used to provide metadata and page information to browsers and search engines. It must contain a <title> element and can include other tags like <style>, <script>, <meta>, and <link> to define styles, scripts, and other metadata. Common elements in the <head> include the <title> for the page title and <meta> tags for attributes. The <head> tag goes inside the <html> tag but before the <body> tag and provides important information about the page that is not part of the visible content.Google better with google, Updated 2014 01 05
Google better with google, Updated 2014 01 05Wouter Gerritsma
油
This document provides tips for advanced searching on Google. It discusses using the "ncr" option to avoid country redirects, customizing search settings, and using the Google toolbar. It then demonstrates how to search with phrases, search specific domains like .edu, search for title words or PDFs, exclude certain terms, use date ranges, and combine searches with operators like OR. The overall tips are aimed at getting more precise and scholarly results from Google searches.Css, CaseCading Style Sheet
Css, CaseCading Style SheetIshaq Shinwari
油
This document discusses various CSS properties for styling text, backgrounds, borders and more. It provides examples of how to set colors, fonts, sizes, spacing and other styles for HTML elements using both internal and external CSS. Key CSS properties covered include color, background-color, font-family, font-size, border, text-align and others. Examples are given of applying styles to text, headings, paragraphs and other page elements.Intro to HTML
Intro to HTMLGerson Abesamis
油
HTML is the standard markup language used to define the structure and layout of web pages. HTML documents consist of HTML elements that are delimited by tags like <p> for paragraphs and <img> for images. The basic structure of an HTML document includes <html>, <head>, and <body> tags. Common elements include headings, paragraphs, links, images, line breaks, and text formatting elements for bold, italics, etc. Elements can have attributes to specify properties like the image source or link destination. HTML also supports tables, lists, and other structured documents.03 Getting Started
03 Getting StartedMakoto Ohnami
油
This document provides an introduction and overview of CouchDB including getting started, creating your first database and document, running queries using map and reduce views, and triggering replication between databases. Key points covered are using the Futon interface, HTTP API, document structure including _id and _rev fields, and performance considerations for large datasets.Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830Wen Liu
油
HTML is the structure and definition of a web page. The root HTML element contains head and body elements. The head contains metadata like the title while the body contains the visible page content. HTML uses tags like <html>, <head>, <body> to define sections and elements like <p> for paragraphs. It can also include attributes for language and direction. Overall, HTML provides the basic framework and building blocks for web pages.Css siva
Css sivach samaram
油
The document discusses Cascading Style Sheets (CSS). It defines CSS as a language used to style and lay out web pages, allowing users to add formatting and visual effects to HTML and XML documents. It describes the different types of stylesheets including internal, external, and inline stylesheets. It also covers various CSS concepts such as selectors, the box model, color properties, positioning, typography, and links/pseudo-classes.Css siva
Css sivach samaram
油
The document discusses Cascading Style Sheets (CSS). It defines CSS as a language used to style and lay out web pages, allowing users to add formatting and visual effects to HTML and XML documents. It describes the different types of stylesheets including internal, external, and inline stylesheets. It also covers various CSS concepts such as selectors, the box model, color properties, positioning, typography, and links/pseudo-classes.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
油
The document provides a comprehensive guide on CSS, emphasizing the separation of structure (HTML) and presentation (CSS). It covers various CSS properties, selectors, syntax, and examples of how to style HTML elements effectively. Additionally, it discusses the use of IDs and classes for unique and reusable styles, respectively.Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
油
The document provides an overview of CSS (Cascading Style Sheets) and different methods for applying CSS styles to HTML documents, including inline styles, embedded styles, and external style sheets. It also covers various CSS selectors such as type, class, ID, descendant, and child selectors that allow targeting specific elements to which styles can be applied. Common CSS mistakes like redundant units, repetition, excessive whitespace, improper grouping, and confusion between margins and padding are also discussed.CSS Overview
CSS OverviewDoncho Minkov
油
1) The document introduces CSS (Cascading Style Sheets) and discusses how it is used to separate HTML content from presentation through external style sheets, embedded styles, and inline styles.
2) It covers basic CSS syntax including selectors, declarations, properties, and values. Common text-related properties like font, color, size, and alignment are described.
3) The "cascade" of CSS is explained, with browser, user, and author styles having different levels of precedence based on specificity and importance. This determines which styles will apply when conflicts occur.Hardcore CSS
Hardcore CSSPDX Web & Design
油
This document provides a summary of CSS history and concepts. It begins with a brief history of CSS from its inception in 1990 when style sheets were separated from documents. It discusses the proposal and adoption of cascading style sheets in 1994-1996. It then covers CSS levels 1-3 and selectors such as elements, classes, IDs, and pseudo-classes. It also discusses specificity, the box model, attribute matching, and advanced CSS3 concepts like fonts, shadows, gradients and transforms. Finally, it covers media types, best practices like reset CSS and prefixes, and common layout techniques.CSS CASCADING STYLE SHEET - MY_PPT.pptx
CSS CASCADING STYLE SHEET - MY_PPT.pptxIorlahaSamuel1
油
The document provides an overview of Cascading Style Sheets (CSS), detailing its function in web design and features various types such as inline, internal, and external CSS along with examples. It describes CSS selectors, which are used to apply styles to HTML elements, and includes information on CSS colors, backgrounds, and properties like borders. The document also illustrates CSS syntax and examples, showcasing how styles can be applied to webpages.Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)shabab shihan
油
This document presents an introductory workshop on Cascading Style Sheets (CSS), detailing its importance in separating content from presentation in web design. It covers various aspects of CSS, including its basic structure, selectors, styling techniques, and web page layout types. Additionally, it emphasizes the use of external, internal, and inline styles, and provides guidance on creating modular CSS for larger projects.Artdm171 Week5 Css
Artdm171 Week5 CssGilbert Guerrero
油
This document summarizes a class on CSS basics:
1. The instructor reminds students to turn in last week's homework of creating a web page and saving files in a folder with their last name and initial.
2. The document covers different parts of a CSS stylesheet including selectors, declarations, properties, and values. It also discusses different CSS selectors like tags, IDs, classes, and pseudo-classes.
3. Examples are provided of using different CSS properties like fonts, font sizes, colors, and positioning to style HTML elements. Embedded, inline, and linked styling methods are also covered. Homework is assigned and group projects are due the following week.CSS.pptx
CSS.pptxVijayKumarLokanadam
油
This document provides an introduction to Cascading Style Sheets (CSS) including:
- CSS is used to describe the presentation of documents including sizes, spacing, fonts, colors, and layout.
- CSS separates content from presentation by defining styles in a separate CSS file rather than within HTML tags.
- CSS rules consist of selectors, declarations separated by semicolons, and properties and values separated by colons to style specific elements.CSS Basic and Common Errors
CSS Basic and Common ErrorsHock Leng PUAH
油
The document discusses common CSS mistakes to avoid, including:
1) Not distinguishing between IDs and classes when selecting elements. IDs are unique and classes can be reused.
2) Including unnecessary units like "px" when a value is zero.
3) Repeating CSS properties that can be combined, like setting each border side individually.
4) Including excessive whitespace which increases file size without benefit.
5) Not grouping identical styles for multiple elements to make updates easier.
6) Confusing the difference between margins, which are outside borders, and padding, which is inside borders.CSS - Basics
CSS - BasicsShubham_Saurabh
油
The document provides an overview of CSS (Cascading Style Sheets) including what CSS is, its syntax, how to apply CSS, commonly used CSS properties, grouping and nesting selectors, floats for page layout, at-rules like @import and @media, and answers some questions. The agenda covers topics like syntax, applying CSS inline, internally, and externally, selectors, properties and values, units, colors including gradients, text styling, backgrounds, shadows, margins and padding, borders, class and ID selectors, grouping selectors, nesting properties, pseudo-classes, floats for layouts, and different at-rules.Ch. 3 HTML5, CIS 110 13F
Ch. 3 HTML5, CIS 110 13Fmh-108
油
This document provides an overview of Cascading Style Sheets (CSS) for web development. It discusses the types of CSS including inline, embedded and external stylesheets. Key concepts covered include CSS syntax using selectors and declarations to style elements, CSS properties for formatting text, using CSS classes, IDs and contextual selectors, and linking external CSS files. The document also mentions tools for validating CSS code.More Related Content
What's hot (9)
Firefox Extension Development | By JIIT OSDC
Firefox Extension Development | By JIIT OSDCVaidik Kapoor
油
The document provides information about starting extension development and covers topics like HTML, XML, CSS, and JavaScript. It explains that OSDC at JIIT promotes open source software usage among students and provides basic overviews of markup languages like HTML and XML as well as styling with CSS. Examples are given for each topic to illustrate common tags and structures.Html1
Html1Emily McWorthy
油
This document provides an introduction and crash course on basic HTML guidelines and tags. It explains the basic page format and structure using opening and closing tags like <html>, <head>, <title>, <body>. It describes how to add text, headings, links, images, tables, lists, and style to an HTML page. The goal is to learn the basic language of web design to be able to create simple HTML pages.Mongo db onepage
Mongo db onepageMilind Zodge
油
MongoDB is a NoSQL document-style database that stores data as documents rather than in tables. It uses a query engine to view stored data. Documents are made up of fields similar to columns in a relational database, and collections are equivalent to tables. MongoDB supports features like indexing, geospatial queries, and embedded documents to provide fast performance for document-style data without rigid schemas.Quan Head Tag Presentation
Quan Head Tag PresentationQuanslides
油
The <head> tag is used to provide metadata and page information to browsers and search engines. It must contain a <title> element and can include other tags like <style>, <script>, <meta>, and <link> to define styles, scripts, and other metadata. Common elements in the <head> include the <title> for the page title and <meta> tags for attributes. The <head> tag goes inside the <html> tag but before the <body> tag and provides important information about the page that is not part of the visible content.Google better with google, Updated 2014 01 05
Google better with google, Updated 2014 01 05Wouter Gerritsma
油
This document provides tips for advanced searching on Google. It discusses using the "ncr" option to avoid country redirects, customizing search settings, and using the Google toolbar. It then demonstrates how to search with phrases, search specific domains like .edu, search for title words or PDFs, exclude certain terms, use date ranges, and combine searches with operators like OR. The overall tips are aimed at getting more precise and scholarly results from Google searches.Css, CaseCading Style Sheet
Css, CaseCading Style SheetIshaq Shinwari
油
This document discusses various CSS properties for styling text, backgrounds, borders and more. It provides examples of how to set colors, fonts, sizes, spacing and other styles for HTML elements using both internal and external CSS. Key CSS properties covered include color, background-color, font-family, font-size, border, text-align and others. Examples are given of applying styles to text, headings, paragraphs and other page elements.Intro to HTML
Intro to HTMLGerson Abesamis
油
HTML is the standard markup language used to define the structure and layout of web pages. HTML documents consist of HTML elements that are delimited by tags like <p> for paragraphs and <img> for images. The basic structure of an HTML document includes <html>, <head>, and <body> tags. Common elements include headings, paragraphs, links, images, line breaks, and text formatting elements for bold, italics, etc. Elements can have attributes to specify properties like the image source or link destination. HTML also supports tables, lists, and other structured documents.03 Getting Started
03 Getting StartedMakoto Ohnami
油
This document provides an introduction and overview of CouchDB including getting started, creating your first database and document, running queries using map and reduce views, and triggering replication between databases. Key points covered are using the Futon interface, HTTP API, document structure including _id and _rev fields, and performance considerations for large datasets.Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830Wen Liu
油
HTML is the structure and definition of a web page. The root HTML element contains head and body elements. The head contains metadata like the title while the body contains the visible page content. HTML uses tags like <html>, <head>, <body> to define sections and elements like <p> for paragraphs. It can also include attributes for language and direction. Overall, HTML provides the basic framework and building blocks for web pages.Similar to Introduction to CSS (20)
Css siva
Css sivach samaram
油
The document discusses Cascading Style Sheets (CSS). It defines CSS as a language used to style and lay out web pages, allowing users to add formatting and visual effects to HTML and XML documents. It describes the different types of stylesheets including internal, external, and inline stylesheets. It also covers various CSS concepts such as selectors, the box model, color properties, positioning, typography, and links/pseudo-classes.Css siva
Css sivach samaram
油
The document discusses Cascading Style Sheets (CSS). It defines CSS as a language used to style and lay out web pages, allowing users to add formatting and visual effects to HTML and XML documents. It describes the different types of stylesheets including internal, external, and inline stylesheets. It also covers various CSS concepts such as selectors, the box model, color properties, positioning, typography, and links/pseudo-classes.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
油
The document provides a comprehensive guide on CSS, emphasizing the separation of structure (HTML) and presentation (CSS). It covers various CSS properties, selectors, syntax, and examples of how to style HTML elements effectively. Additionally, it discusses the use of IDs and classes for unique and reusable styles, respectively.Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
油
The document provides an overview of CSS (Cascading Style Sheets) and different methods for applying CSS styles to HTML documents, including inline styles, embedded styles, and external style sheets. It also covers various CSS selectors such as type, class, ID, descendant, and child selectors that allow targeting specific elements to which styles can be applied. Common CSS mistakes like redundant units, repetition, excessive whitespace, improper grouping, and confusion between margins and padding are also discussed.CSS Overview
CSS OverviewDoncho Minkov
油
1) The document introduces CSS (Cascading Style Sheets) and discusses how it is used to separate HTML content from presentation through external style sheets, embedded styles, and inline styles.
2) It covers basic CSS syntax including selectors, declarations, properties, and values. Common text-related properties like font, color, size, and alignment are described.
3) The "cascade" of CSS is explained, with browser, user, and author styles having different levels of precedence based on specificity and importance. This determines which styles will apply when conflicts occur.Hardcore CSS
Hardcore CSSPDX Web & Design
油
This document provides a summary of CSS history and concepts. It begins with a brief history of CSS from its inception in 1990 when style sheets were separated from documents. It discusses the proposal and adoption of cascading style sheets in 1994-1996. It then covers CSS levels 1-3 and selectors such as elements, classes, IDs, and pseudo-classes. It also discusses specificity, the box model, attribute matching, and advanced CSS3 concepts like fonts, shadows, gradients and transforms. Finally, it covers media types, best practices like reset CSS and prefixes, and common layout techniques.CSS CASCADING STYLE SHEET - MY_PPT.pptx
CSS CASCADING STYLE SHEET - MY_PPT.pptxIorlahaSamuel1
油
The document provides an overview of Cascading Style Sheets (CSS), detailing its function in web design and features various types such as inline, internal, and external CSS along with examples. It describes CSS selectors, which are used to apply styles to HTML elements, and includes information on CSS colors, backgrounds, and properties like borders. The document also illustrates CSS syntax and examples, showcasing how styles can be applied to webpages.Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)shabab shihan
油
This document presents an introductory workshop on Cascading Style Sheets (CSS), detailing its importance in separating content from presentation in web design. It covers various aspects of CSS, including its basic structure, selectors, styling techniques, and web page layout types. Additionally, it emphasizes the use of external, internal, and inline styles, and provides guidance on creating modular CSS for larger projects.Artdm171 Week5 Css
Artdm171 Week5 CssGilbert Guerrero
油
This document summarizes a class on CSS basics:
1. The instructor reminds students to turn in last week's homework of creating a web page and saving files in a folder with their last name and initial.
2. The document covers different parts of a CSS stylesheet including selectors, declarations, properties, and values. It also discusses different CSS selectors like tags, IDs, classes, and pseudo-classes.
3. Examples are provided of using different CSS properties like fonts, font sizes, colors, and positioning to style HTML elements. Embedded, inline, and linked styling methods are also covered. Homework is assigned and group projects are due the following week.CSS.pptx
CSS.pptxVijayKumarLokanadam
油
This document provides an introduction to Cascading Style Sheets (CSS) including:
- CSS is used to describe the presentation of documents including sizes, spacing, fonts, colors, and layout.
- CSS separates content from presentation by defining styles in a separate CSS file rather than within HTML tags.
- CSS rules consist of selectors, declarations separated by semicolons, and properties and values separated by colons to style specific elements.CSS Basic and Common Errors
CSS Basic and Common ErrorsHock Leng PUAH
油
The document discusses common CSS mistakes to avoid, including:
1) Not distinguishing between IDs and classes when selecting elements. IDs are unique and classes can be reused.
2) Including unnecessary units like "px" when a value is zero.
3) Repeating CSS properties that can be combined, like setting each border side individually.
4) Including excessive whitespace which increases file size without benefit.
5) Not grouping identical styles for multiple elements to make updates easier.
6) Confusing the difference between margins, which are outside borders, and padding, which is inside borders.CSS - Basics
CSS - BasicsShubham_Saurabh
油
The document provides an overview of CSS (Cascading Style Sheets) including what CSS is, its syntax, how to apply CSS, commonly used CSS properties, grouping and nesting selectors, floats for page layout, at-rules like @import and @media, and answers some questions. The agenda covers topics like syntax, applying CSS inline, internally, and externally, selectors, properties and values, units, colors including gradients, text styling, backgrounds, shadows, margins and padding, borders, class and ID selectors, grouping selectors, nesting properties, pseudo-classes, floats for layouts, and different at-rules.Ch. 3 HTML5, CIS 110 13F
Ch. 3 HTML5, CIS 110 13Fmh-108
油
This document provides an overview of Cascading Style Sheets (CSS) for web development. It discusses the types of CSS including inline, embedded and external stylesheets. Key concepts covered include CSS syntax using selectors and declarations to style elements, CSS properties for formatting text, using CSS classes, IDs and contextual selectors, and linking external CSS files. The document also mentions tools for validating CSS code.LIS3353 SP12 Week 13
LIS3353 SP12 Week 13Amanda Case
油
The document provides an overview and review of CSS (Cascading Style Sheets) and discusses different methods for applying CSS styles, including internal/embedded styles, external stylesheets, inline styles, and using multiple style sheets. It covers CSS selectors like classes, IDs, divs, and spans. It also lists some common CSS properties that can be changed, such as backgrounds, fonts, text properties, and margins. The document emphasizes that when multiple styles conflict, more specific or later declared styles will override earlier, less specific styles.Big Design Conference: CSS3
Big Design Conference: CSS3 Wynn Netherland
油
CSS frameworks allow for nested rules, variables, mixins, extends and imports to simplify stylesheet maintenance. Preprocessors like Sass compile CSS with additional features like nested selectors, variables, functions and mixins. Popular frameworks include Blueprint and Compass which provide tools and patterns for common tasks. Preprocessors increase abstraction and reduce duplication, improving organization and simplifying code.Fwd week2 tw-20120903
Fwd week2 tw-20120903TerryWeber
油
The document summarizes Week 2 of a fundamentals of web design course. It outlines assignments due, including posts on content management systems and creating an HTML/CSS document. It then covers content management systems, HTML tags and structure, CSS rules and selectors for styling pages, and color theory and typography for design.CSS_tutorial_2
CSS_tutorial_2tutorialsruby
油
This document discusses class and ID selectors in CSS. [1] Classes can be applied multiple times and are defined with a period (.) in CSS. IDs can only be applied once and are defined with a hash (#). Classes are better when the same selector is used multiple times, but IDs have more specificity. [2] The document provides steps to create a basic HTML page and link an external CSS stylesheet to style paragraphs, classes, and IDs. [3] Rules are defined for a paragraph, class, and ID to demonstrate how each works.CSS_tutorial_2
CSS_tutorial_2tutorialsruby
油
This document discusses class and ID selectors in CSS. [1] Classes can be applied multiple times and are defined with a period (.) in CSS. IDs can only be applied once and are defined with a hash (#). Classes are better when the same selector is used multiple times, but IDs have more specificity. [2] The document provides steps to create a basic HTML page and link an external CSS stylesheet to style paragraphs, classes, and IDs. [3] Rules are defined for a paragraph, class, and ID to demonstrate how each works and the hierarchy when selectors overlap.Web Development - Lecture 5
Web Development - Lecture 5Syed Shahzaib Sohail
油
This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS, explains why it is used, and describes the different ways to implement CSS styles including inline, internal, and external stylesheets. It also covers important CSS concepts like the syntax, selectors, grouping selectors, and comments. CSS is used to control the presentation and layout of HTML elements, separate styling from content, and allow styling to be applied across multiple pages from one stylesheet file.Cascading Style Sheets for web browser.pptx
Cascading Style Sheets for web browser.pptxalvindalejoyosa1
油
CSS (Cascading Style Sheets) allows control over how HTML elements are displayed on different media. CSS saves work by allowing global control of layout and styles across multiple web pages from a single stylesheet. It provides advantages like faster page loads, easy maintenance through global changes, superior styling capabilities, and compatibility across devices. CSS is created and maintained by the W3C consortium and browser vendors implement CSS specifications. Styles are applied using selectors that target elements by name, id, class, and other attributes. Styles can be defined internally, in external style sheets, or inline in elements.Ad
Introduction to CSS
- 1. CSS in 11 slides.
- 2. Good Type of WaterfallCSS uses the DOM<div id=site> <h2>Big Header</h2> <div class=post> <h2>Title</h2> <p>Text text text</p> </div><div class=post> <h2>Title</h2> <p>Text text text</p> </div> <div class=post></div></div>h2{ font-weight: normal; color: green; }.post h2{ color: blue; }.site p { color: red; }div > p:first-child { color: purple; }
- 3. Cascading Style SheetsReset CSS *{}Document-wide Style (DRY): body { font-size: 12px }Most common type youll see/writeClose second; hardest to track down.BAD.
- 4. .class vs. #idSame syntax (selectors, pseudo-classes, properties)a#fb { background: url(/slideshow/introduction-to-css/6785662/img/18px_sprites.png) no-repeat -17px left; margin-right: 7px; }.carouselImage{ z-index:0; left:40px; position:relative; color:blue;}#id{}s are unique to a page; singletons.classes come in groups (or at least can.)Why care?$(#fb).fadeOut();
- 6. Helpful HintsOpen Source is Your FriendFirebug or Cmd+alt+IMargin vs. Padding(both increase the size of the box!!)Negative margin is bad.
- 8. Block ModelBlock vis--vis in-line elementsBlock: <div>, <h#>, <table>, <form>, <(o|u)l>In-line: <img>, <a>, <i>, <b>, <u>, etc.You can redeclare as .{ display: block; } :table-cell, etc.
- 9. Always Float: Leftor :right, but never bothElements are floated horizontally; this means that an element can only be floated left or right, not up or down.A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.--W3C Schools
- 10. The Internet Wants to Help(sort of)http://css-tricks.com/http://net.tutsplus.com/http://stackoverflow.com/http://smashingmagazine.com/http://unmatchedstyle.com/http://www.w3schools.com/Css/default.asphttp://lmgtfy.com/?q=background+image+css
- 11. One more thing
Editor's Notes
- #4: IF YOU HAVE ONE TAKE-AWAY