This document provides an introduction to CSS (Cascading Style Sheets) including what CSS is, where it can be used, CSS syntax, and key concepts like inheritance and the cascade. CSS is used to style and lay out HTML elements on a page. It allows customizing elements with properties like color, font, size and more. CSS can be included inline with HTML, embedded in the HTML <head> with <style> tags, or linked externally in a .css file. The cascade determines which styles take precedence when multiple selectors apply to the same element. Inheritance applies styles to descendant elements.
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS saves lots of work as formatting elements only need to be applied to one CSS file rather than individually formatting every HTML page. CSS rules consist of selectors that point to the HTML element to style paired with a declaration block containing CSS properties and values to determine how that element will look. Common CSS properties include those to control text formatting, background effects, borders, lists, links and positioning.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
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
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS saves lots of work as formatting elements only need to be applied to one CSS file rather than individually formatting every HTML page. CSS rules consist of selectors that point to the HTML element to style paired with a declaration block containing CSS properties and values to determine how that element will look. Common CSS properties include those to control text formatting, background effects, borders, lists, links and positioning.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
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
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.
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.
HTML is a markup language used to describe and structure web pages. It uses tags to define headings, paragraphs, links, images, and other content. An HTML file contains a head and body section. The head contains meta information about the page like the title. The body contains the visible page content. Common tags include headings, paragraphs, links, images, and divs to group content. Attributes provide extra information about elements.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
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.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
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.
HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.
This document discusses HTML forms, including:
- HTML forms allow users to enter and submit data through text boxes, buttons, checkboxes, radio buttons, and other controls.
- Forms are defined using <form> tags which specify an action and method for submitting data.
- Common form controls include text fields, passwords, checkboxes, radio buttons, buttons, textareas, and select menus.
- Accessible forms should use <label> tags, <fieldset> and <legend> elements to organize groups of controls.
- CSS can style forms and individual controls using properties like :focus and outline.
- Form layout can be controlled through <br>, tables, or CSS float and clear properties.
Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
Dokumen tersebut membahas tentang pewarisan (inheritance) CSS dimana beberapa nilai properti elemen parent akan diwariskan ke anak-anak elemennya. Properti yang diwariskan antara lain color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform dan visibility. Namun, elemen <a> tidak akan mewarisi nilai properti color dari elemennya.
Bootstrap is a popular front-end framework for building responsive mobile-first websites and web apps. It was created in 2011 by developers at Twitter and contains pre-built UI components and CSS styles for common patterns like navigation bars, dropdowns, and progress bars. Bootstrap uses a responsive 12-column grid system and has gone through several major releases to support new features and a mobile-first approach. It is free to use, well-documented, customizable, and has a large community of developers.
The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
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.
This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more.
- CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms.
- There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags.
- The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to
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.
Cascading Style Sheets (CSS) allow separation of document content from document presentation, including elements like fonts, colors, and layout. CSS rules include selectors that point to specific HTML elements and declarations that define properties like color and font for those elements. Common CSS properties include font properties, color properties, box properties like width, padding, and margin, and background properties. CSS provides benefits like easier maintenance of web page styling across multiple pages.
The document provides an introduction to Cascading Style Sheets (CSS), covering basic CSS syntax, selectors, properties for styling text, links, padding, margins, fonts, borders, positioning elements, and using layers. CSS allows separation of document structure and presentation, and provides control over color, layout, and other visual aspects of web pages without needing HTML tags.
The document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses some key CSS concepts like the basic CSS syntax of selector, property, and value. It also covers CSS comments, different types of CSS selectors like element, class, and ID selectors. The document further explains CSS properties related to text formatting, colors and backgrounds, and linking external CSS stylesheets.
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.
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.
HTML is a markup language used to describe and structure web pages. It uses tags to define headings, paragraphs, links, images, and other content. An HTML file contains a head and body section. The head contains meta information about the page like the title. The body contains the visible page content. Common tags include headings, paragraphs, links, images, and divs to group content. Attributes provide extra information about elements.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
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.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
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.
HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.
This document discusses HTML forms, including:
- HTML forms allow users to enter and submit data through text boxes, buttons, checkboxes, radio buttons, and other controls.
- Forms are defined using <form> tags which specify an action and method for submitting data.
- Common form controls include text fields, passwords, checkboxes, radio buttons, buttons, textareas, and select menus.
- Accessible forms should use <label> tags, <fieldset> and <legend> elements to organize groups of controls.
- CSS can style forms and individual controls using properties like :focus and outline.
- Form layout can be controlled through <br>, tables, or CSS float and clear properties.
Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
Dokumen tersebut membahas tentang pewarisan (inheritance) CSS dimana beberapa nilai properti elemen parent akan diwariskan ke anak-anak elemennya. Properti yang diwariskan antara lain color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform dan visibility. Namun, elemen <a> tidak akan mewarisi nilai properti color dari elemennya.
Bootstrap is a popular front-end framework for building responsive mobile-first websites and web apps. It was created in 2011 by developers at Twitter and contains pre-built UI components and CSS styles for common patterns like navigation bars, dropdowns, and progress bars. Bootstrap uses a responsive 12-column grid system and has gone through several major releases to support new features and a mobile-first approach. It is free to use, well-documented, customizable, and has a large community of developers.
The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
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.
This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more.
- CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms.
- There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags.
- The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to
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.
Cascading Style Sheets (CSS) allow separation of document content from document presentation, including elements like fonts, colors, and layout. CSS rules include selectors that point to specific HTML elements and declarations that define properties like color and font for those elements. Common CSS properties include font properties, color properties, box properties like width, padding, and margin, and background properties. CSS provides benefits like easier maintenance of web page styling across multiple pages.
The document provides an introduction to Cascading Style Sheets (CSS), covering basic CSS syntax, selectors, properties for styling text, links, padding, margins, fonts, borders, positioning elements, and using layers. CSS allows separation of document structure and presentation, and provides control over color, layout, and other visual aspects of web pages without needing HTML tags.
The document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses some key CSS concepts like the basic CSS syntax of selector, property, and value. It also covers CSS comments, different types of CSS selectors like element, class, and ID selectors. The document further explains CSS properties related to text formatting, colors and backgrounds, and linking external CSS stylesheets.
This document provides an introduction to cascading style sheets (CSS) and discusses different CSS types including pseudo classes and pseudo elements. It reviews three methods for applying CSS stylesheets - inline, embedded and separate files. It also covers the order of precedence for different CSS styles and defines class and ID selector styles for formatting HTML elements. Finally, it demonstrates how to use pseudoclasses to style anchor links at different states like unvisited, visited, hover and active.
The document discusses various methods for adding dynamic and interactive content to web pages, including:
- Embedding Flash presentations, videos, and maps from SlideShare, YouTube, and Google Maps using code snippets.
- Using HTML, CSS, and JavaScript to structure pages and control styling and layout, and including dynamic elements like menus and forms.
- Integrating content management through Blackboard WebDAV and editing pages in real-time.
The document provides code examples and instructions for implementing these features to create engaging web pages with multimedia elements and collaborative functionality.
This document provides an introduction to various web technologies including HTML, CSS, JavaScript, and PHP. It discusses the basic structures and components of HTML documents, how CSS can be used to style HTML content, and how JavaScript and PHP can add interactivity and run server-side code. The document also gives examples of common tags and syntax used in these languages. It concludes by noting that most web pages combine these core technologies and that learning them now provides a foundation for newer technologies.
CSS (Cascading Style Sheets) allows you to define styles for HTML elements, including how to display and layout elements on a page. Styles can be defined internally, within HTML files, or externally in separate CSS files. CSS rules contain selectors that specify the element to style and declarations that define properties and values to apply to the element. Comments can be added to CSS to explain the code. CSS can control font properties, colors, backgrounds, positioning, and layout of elements. External style sheets enable changing the appearance of all pages on a website by editing just one CSS file.
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
The document provides an overview of an intermediate HTML and CSS class. It begins with introductions and setting ground rules. It then reviews key terms like web design, development, front end and back end. It reviews common tools like browsers, development toolkits, and text editors. It reviews the anatomy of a website, HTML elements, and CSS syntax. It covers techniques like resets, standard widths, wrappers, pseudo-selectors, linking pages, and using custom fonts. Finally, it provides a brief introduction to HTML5 and highlights new semantic elements.
This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, the different levels at which CSS can be defined, CSS syntax, using colors in CSS, and examples of how to style text, lists, padding, margins, and tables using CSS. It recommends defining styles in external CSS files and linking to them via HTML for maintenance purposes. It also provides resources for learning more about CSS properties and values.
The document provides an introduction to Cascading Style Sheets (CSS) including CSS syntax, linking CSS to HTML, inheritance and cascading order, the box model, and properties for fonts, text, color, and content positioning. CSS allows separation of document structure (HTML) from presentation (CSS), and uses selectors, rules, and properties to style elements. Stylesheets can be linked to HTML via inline, embedded, external and import methods. The box model and inheritance/cascading determine how CSS rules are applied.
The document discusses CSS best practices for web development. It recommends using a CSS reset to eliminate browser inconsistencies, organizing stylesheets in a logical structure, writing readable CSS code with proper formatting and indentation, keeping CSS consistent through naming conventions, combining similar CSS elements, using multiple classes, using CSS shorthand where possible, commenting CSS code, and avoiding inline styles. It also recommends validating CSS code to quickly spot errors.
The document discusses CSS best practices for web development. It recommends using a CSS reset to eliminate browser inconsistencies, organizing stylesheets in a logical structure, writing readable CSS code with proper formatting and indentation, keeping CSS consistent through standardized naming conventions, combining similar CSS elements, using multiple classes when applicable, using CSS shorthand when possible, commenting CSS code, and validating CSS to check for errors.
The document discusses HTML, XHTML, CSS, and Microsoft Expression Web. It provides information on tags, attributes, and how to use stylesheets to control formatting and layout. Expression Web allows creating interactive buttons and using layers and templates for dynamic web design.
Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Tom Hapgood
A presentation by Tom Hapgood for WordCamp Fayetteville, in Fayetteville, AR, dealing with basic Cascading Style Sheets (CSS) in web design. CSS is likened to the "mullet," being the party in the back, with HTML as the "business in the front."
This document discusses Oracle Application Express themes and templates. It provides an overview of Apex 4.0 improvements to themes, describes how to manage themes and customise templates, and explains common substitution variables used in templates. Template types and classes are defined. The document also discusses alternative approaches to styling and references data dictionary views related to themes and templates.
The document summarizes Workshop #2 on web development hosted by Sohail Asghar and Saad Mustafa. It covers the basics of HTML, CSS, and JavaScript. For HTML, it discusses basic tags like headings, paragraphs, links, images and lists. For CSS, it explains concepts like selectors, colors, backgrounds, borders, fonts, padding, and margins. For JavaScript, it provides introductions to variables, output, data types, and more.
This document provides an introduction to Cascading Style Sheets (CSS). It explains that CSS is used to separate a document's content from its presentation or style. CSS defines elements like fonts, colors, spacing and layout. Styles can be applied inline, embedded in <style> tags, or linked via an external CSS file. The document outlines CSS syntax, selectors, and precedence of different styling methods. CSS provides control over text formatting, colors, spacing, and positioning of HTML elements.
CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. Styles describe how elements should be displayed and are stored in either internal or external style sheets. External style sheets enable global changes by editing one CSS file. CSS syntax uses selectors to target elements and properties to set attributes like color, font, size and more.
The document provides an introduction to Cascading Style Sheets (CSS), covering topics such as what CSS is, basic CSS syntax, CSS selectors including element, class and ID selectors, CSS properties for colors/backgrounds, text formatting, links, padding/margins, and layout. It also discusses CSS validation and the role of the World Wide Web Consortium (W3C) in maintaining web standards.
This document provides an introduction and overview of topics to be covered in an online course on web design, including learning HTML, CSS, creating site maps and storyboards, developing websites, displaying images, and tips on common tags, colors, and style sheets. Live tutorials will be held on Wednesdays at 6:30-7:30pm to provide further instruction.
The document discusses the CSS box model which describes how elements are laid out in blocks and boxes on a page. It explains the different properties that make up the box model including margins, borders, padding, and content. It provides examples of how to specify sizes and styles for each of these properties using CSS code. The box model is fundamental to understanding CSS layout and positioning of elements.
This document discusses CSS floats and clearing floats. It explains that floated elements behave like blocks but stay within the content flow, allowing other elements to wrap around them. Inline elements reflow to fit available space when the window resizes, while block elements expand/contract. The document also covers clearing floats using clear: left, right, or both to position elements below any floated elements. Next week's topic will be CSS positioning and grid systems.
The document discusses various HTML elements for tables, forms, block quotes, and preformatted text. It provides examples of how to structure tables using <table>, <tr>, <td>, <th>, rowspan and colspan. It also discusses how to semantically mark up forms using elements like <form>, <fieldset>, <label>, <input>, <textarea>, <select> and <option>. The document demonstrates using <blockquote> to quote a passage and <pre> to preserve whitespace in preformatted text. It provides additional references for learning more about HTML tags and CSS properties.
1. The document discusses CSS styling for text and backgrounds, including topics like web typography, styling different text elements, controlling font properties, text alignment, and styling links and backgrounds.
2. It provides examples of CSS code for setting font styles, colors, sizes, emphasis, alignment, backgrounds images, and link styling. Pseudo-classes like :hover and :visited are demonstrated for customizing how links appear in different states.
3. The summary concludes that next week the topic will be a CSS workshop to build on these text and background styling techniques.
This document provides an overview of various HTML elements including text elements, headings, paragraphs, lists, links, and images. It describes the purpose and syntax of common elements such as <h1>-<h6> for headings, <p> for paragraphs, <em> and <strong> for emphasis, <ul> and <ol> for unordered and ordered lists, <a> for links, and <img> for images. It also discusses attributes for these elements, such as href for links and src and alt for images. The document is intended to teach basic HTML elements and semantics.
The document discusses the CSS box model which describes how elements are laid out in blocks and boxes on a page. It explains the different parts of the box model including margins, borders, padding, and content and how they can be styled with CSS properties like width, height, colors and styles. Examples are provided of how to set properties for individual sides of elements or all sides together using shorthand properties. The box model is fundamental for controlling layout and positioning of elements on a page with CSS.
The document discusses various HTML elements for tables, forms, block quotes, and preformatted text. It provides examples of how to implement these elements using markup. For tables, it covers the <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> elements as well as rowspan and colspan attributes. For forms, it discusses the <form>, <fieldset>, <legend>, <label>, <input>, <textarea>, <select> elements. It also provides references for further reading on HTML and CSS.
1. The document discusses CSS styling for text and backgrounds, including topics like web typography, styling different text elements, controlling font properties, emphasis and transformation of text, alignment and justification, using backgrounds with images and colors, positioning backgrounds, and styling links and links states like hover and visited.
2. It provides examples of CSS code for setting font families, colors, sizes, weights, text decoration, transforms, alignments and more. It also shows how to set background colors, images, repetition, position and padding.
3. The document concludes with discussing how to style the different states of links like regular, visited, hovered and active using CSS pseudo-classes.
This document provides an overview of various HTML elements including text elements, headings, paragraphs, lists, links, and images. It describes the purpose and syntax of common inline elements such as <em> and <strong>. It also covers the use of different types of lists such as unordered and ordered lists. Links are created using the <a> element and its href attribute, and images are added with the <img> tag along with the src, alt, and title attributes. The document concludes by mentioning that next week's topic will cover either writing HTML or styling it with CSS.
This document provides an introduction to basic HTML concepts, including:
- HTML is the markup language that defines the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, and images.
- A valid HTML document has a base structure with <html>, <head>, and <body> tags, along with a <title>.
- Elements are defined with opening and closing tags, and can have attributes to provide more information. Common block elements make boxes, while inline elements remain in the flow of text.
- Special characters need to be written using HTML codes to be properly understood by browsers.
This document provides an introduction to web development. It discusses that the course will cover HTML and CSS over 8 weeks of modules. It also addresses assessments and getting help if students fall behind, noting they can email the instructors. The document further explains the layers of web development, including HTML for content, CSS for presentation, and JavaScript for behavior. It emphasizes separating these layers and why this approach is beneficial, such as for shared resources, faster downloads, collaboration, accessibility, and backward compatibility. Finally, it introduces the World Wide Web Consortium as the standards body for the web.
5. CSS = Cascaded Style Sheets A way to customise the presentation of your HTML. A language designed to allow us select and style the elements on our page. Like HTML, it has gone through various changes. Also like HTML, it is not a programming language. It can allow us to present our content in multiple formats for multiple devices.
34. the trail of parents leading back to the root are an element’s ancestors p, body and htmlare ancestors of img
35. all elements with the same parent are siblings h1, p, p, h2, etc are siblings
36. If we wanted all text elements to be shown in verdana font, we apply one rule to the <body> body{font-face: Verdana; }, Then all the decendant text elements inside the body tag get that style applied.
This lesson we’ll expand on the presentation layer – CSS – which is all the styling of content on the web.
Document overview:When you punch in a URL into your web browser or click on a hypertext link such as http://finda.com.au, your browser asks our servers to send back what web content it finds at that address. What the browser gets back is an (X)HTML formatted document. Document is the term that describes the full page and all it's associated bits and pieces. Everything that makes up the page you see when rendered is "marked-up" in that document.
What is CSS for:While (X)HTML is used to describe/mark up the content in a web page, it's Cascading Style Sheets (CSS) that describe how you want everything to look. The way the page looks is known as the presentation (remember the presentation layer?). CSS is the official standard way for formatting text and page elements. CSS is a separate language with its own syntax.CSS is very versatile, and it gives us the ability to control how documents will be presented in areas other than the browser on a screen. It can allow us to style the presentation of printing and on handheld devices. In advanced uses of CSS, It also has rules for defining the non-visual parts of documents, such as how they will sound when read by a screen reader.
Style sheets help us apply consistant automatic looks to our marked up documents, and there's plenty of benefits to it. Some of the main benefits could be summarised as:
Presentational (X)HTML never gets close to offering the kind of control over type, backgrounds, and layout that is possible with CSS.
You can change the appearance of an entire site by editing one style sheet. Making small tweaks or entire site redesigns with style sheets is much easier than when presentation instructions are mixed in with the markup.
Old school practices of using the old font elements and nested tables make for bloated documents. Not only that, you can apply a single style sheet document to all the pages in a site for further download savings.
When everything related to presentation is handled by CSS, you can mark up your content meaningfully (the way it's supposed to be), making it more accessible for nonvisual or mobile devices.
Nearly every browser in current use supports all of CSS Level 1 (not ie6 though) and the majority of CSS Level 2. Reliability of browser support, and differences between the use and support of CSS can often be a difficult thing to work out at times, but it's getting better.
When used to its full potential, CSS is a robust and powerful design tool.An awesome example of how powerful css is, can be seen with the CSS Zen Garden (www.csszengarden.com). All of the design there use the exact same XHTML source document and doesn’t include a single img element (all of the images are used as backgrounds). Look how different each page is! It's all done with style sheets. This demonstrates the power of separating content and presentation
A few things are required to invoke the magic of CSS as part of development.Create a document that has been marked up in XHTML.Writing out the rules for how you'd like certain elements to look.Attach the style rules to the document. Once it's attached, the browser will use that presentation when showing the XHTML document! We've started looking at markup and documents, and we'll be looking at the syntax for writing out these css rules, but how, even if we have these rules, can we tie the two together.
You can apply CSS properties and values to a single element using the style attribute in the element itself, as shown here: <h1 style="color: red;">Introduction</h1> To add multiple properties, just separate them with semicolons, like this: <h1 style="color: red; margin-top: 2em;">Introduction</h1> Inline styles apply only to the particular element in which they appear. Avoid writing inline styles as much as you can, unless it is absolutely necessary to override styles from an embedded or external style sheet. Inline styles can cause problems in that they mix presentation information into the structural markup. We like to keep the layers as separate as we can! They make it more difficult to make changes because every style attribute must be hunted down in the source markup for that page to be changed. These down points are some of the same reasons we don't like the old obsolete font element.
This is the type is placed in a document using the style element and its rules apply only to that document. The style element must be placed in the head of the document and it must contain a type attribute that identifies the content of the style element as “text/css”. Note, This example also includes a css comment in purple. <head> <title>Required document title here</title> <style type="text/css"> /* style rules go here */ </style></head>
An external style sheet is a separate, text-only file that contains a number of style rules written in CSS language. It has to be named with the .css suffix. The .css file is linked to one or more (X)HTML documents. In this way, all the files in a web site may share the same style sheet. This is the most powerful and best method for attaching style sheets to content. <head> <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" /> <title>Titles are required.</title> </head>
The two main sections of a CSS rule are the selector that identifies the element (or group of elements) to be affected, and the declaration that explains how those elements should be displayed on the screen.
The declaration has a property (such as color) and its value (green), separated by a colon and a space. Declarations are placed inside curly brackets. Everything inside the curly brackets is called the Declaration Block.In some of our earlier sessions we've demo'ed with the h1 and p elements. We could select those in css with:
This most basic type of selector is called an element type selector. The properties defined for each will apply to every h1 and p element in the document. Here we just wrote a rule that heading1 elements should be orange and paragraphs should be black in text colour. The color property in the declaration part of the css rule is the american spelling of the word, and unfortunately for us....is standard in CSS. Welcome to CSS, start spelling americanenglish. Values and property names shouldn't have spaces in them, as seen by writing “font-size” or “12px”.
The element selector
Selecting elements by ID.When an element is given an ID by using the ID attribute, we can uniquely apply a css rule to it. This is known as selecting by ID. The id attribute can be used with any (X)HTML element, and it is commonly used to give meaning to the generic div and span elements. ID Selectors are identified by the hash (#). An example of a list item with an id reference.<p id=“article">...text...</li> #Note# Do the next part on the blackboard?Now we write a style rule just for that list item using an ID selector (notice the #):p#article { color: red; } Because id values must be unique in the document, it is acceptable to omit the element name. This rule is equivalent to the last one:#article { color: red; }
Selecting elements by class.The class identifier is used to classify elements (go figure!) into a conceptual group. Where it differs from the the id attribute is that more than one element can share a class name, but also, an element may belong to more than one class. The class is also specified in our markup with it's attribute:<li class="myHappyShoes">One of several happy shoes</li><li class="myHappyShoes">Another one of these happy shoes</li> We target classes with their selector type. Class names are written with a period (.) in the selector. For example, to select all list items with class="myHappyShoes", use this selector (the period indicates the following word is a class selector):li.myHappyShoes { color: orange; } To apply a property to all elements of the same class, we can leave out the element name in the selector (leave the period there though; it’s the character that indicates a class). This target's all paragraphs and any other element that has been marked up with class="myHappyShoes"..myHappyShoes { color: green; }
Human beings inherit things from their parents, like hair colour, big toes, etc. CSS has the same inheritance at work. Parents, pass on their traits to children. XHTML elements, will pass down certain style properties to others that are on a lower level in the document. This means that elements inside of other elements, can inherit from that parent.
For example, we may have a paragraph styled with bold text. If that paragraph also contains an inline anchor (<a>...</a>) element, the contents of that one will also be bold with the rest of the text, unless we tell it not to be specifically.
This is where knowing your document’s structure comes in. We mentioned (X)HTML documents have a structure/hierarchy.Eg. A document has a html root element that contains a head and a body, and the body contains heading and paragraph elements. A few of the paragraphs, contain inline elements like images (<img />) and emphasized text (<em>...</em>). Visualize the structure as an upside-down tree, branching out from the root.The inheritance tree structure shows that all elements contained within another element are it's descendants.If an element is directly contained in another element, it's the child of that element. The containing element is the parent element.Elements higher up than that, are it's ancestors.Two elements with the same parent are siblings.
Pretty straight forward use of terminology right?With all this in mind, we can consider the idea that certain styles are passed on between levels in css. In general, properties related to the styling of text—font size, color, style, etc.—are passed down. Properties such as borders, margins, backgrounds, and so on that affect the boxed area around the element tend not to be passed down. We use inheritance to our advantage when writing CSS stylesheets - if we wanted all text elements to be shown in the verdanda font, we could set absolutely every element to be verdana - or... because we're smart... we'll write one rule and apply it to the body element. Then all the decendant text elements inside the body tag get that style applied.Example: body { font-face: Verdana; }
The Cascade in Cascading Style SheetsBecause we can write rules that cascade down our document tree and apply styling... we can create conflicts.What should the browser do if a document’s linked style sheet says that <h1> elements should be red, but itsembedded style sheet has a rule that makes <h1>'s purple? The designers of the CSS specification knew this would happen, and so they created a system that assigns different weight to the style we apply in different places and ways.
We've learned that we can apply style rules in at least 3 ways. Inline, Embedded, and External. The closer the style sheet is to the content, the more weight it is given. Eg. Embedded have more weight than external.So from our example, the h1 elements would end up purple as specified in the embedded style sheet, not red as specified in the external .css file that has less weight. Inline styles could have even more weight, because you can't get any closer to the content than style information right in the elements's opening tag! What's all this weight business?? - The more weight a rule or set of rules caries, the more likely it will be applied in the end. Heavy ends up making their mark.
But what if there's still rules that conflict in CSS?The cascade keeps going of course! - This time, it's weighting at the rule level, not CSS sources. This happens after the various sources of CSS are weighted. When two rules in a single style sheet conflict, the type of selector that was used determines the next winner. The more specific a css selector rule is to the element, the more weight it is given. That more specific rule ends up overriding the other conflicting rule.
The class selector (the one with the period) sets the colour of the text as yellow for both our list elements and the paragraph element.The class selector on the next line is the same selector! When this happens, because it's written last compared to the one it's conflicting with.... we use it instead. So now this rule sets the colour of the text as green for both our list elements and the paragraph element.The use of the element in the selector for li.myHappyShoes specifies higher (has more weight) than just the class selector for the list elements that have that class. The list elements have orange text while the one paragraph element with that class keeps it's green.The id selector of #happyShoe is very specific, as an id must be unique for only one element in the page. This means the color of red is applied for the list element that has that id of happyShoe. The other list element stays orange, and the paragraph stays green.The li#happyShoe rule is actually redundant as we've already established that there's only one possible element with that id of happyShoe... but, because it specifies that it must be for only list elements, it's even more specific... and get's more weighting... and hence makes the second list element turn from red to violet.The anchor element inside the list element has been specified here as well - the last rule shows that we've selected a child element inside of our very specific happyShoe id element. The anchor link becomes blue.The child element <a> is written with a space after the first selector, and each space after that, indicates that it is nested in the previous one.
The first official version of CSS (the CSS Level 1 Recommendation, a.k.a CSS1) was officially released in 1996, and included properties for adding font, color, and spacing instructions to page elements. Unfortunately, lack of dependable browser support prevented the widespread adoption of CSS for several years. CSS Level 2 (CSS2) was released in 1998. It most notably added properties for positioning that allowed CSS to be used for page layout. It also introduced styles for other media types (such as print, handheld, and aural) and more sophisticated methods for selecting elements for styling. CSS Level 2, Revision 1 (CSS2.1) makes some minor adjustments to CSS2. Fortunately, most good browsers support the majority of the CSS1, CSS2, and CSS2.1 specifications. Some browsers are already supporting features from CSS Level 3 (CSS3) that is still in development. It adds support for vertical text, improved handling of tables and international languages, better integration with other XML technologies, and other little perks like multiple background images in a single element and a larger list of color names.Keep up to date with the W3C’s development of CSS at www.w3.org/Style/CSS.