The document discusses HTML and CSS. It provides an overview of HTML tags and attributes used to structure a basic HTML page. It then discusses CSS and how it is used to style and lay out HTML elements. CSS syntax and different selectors like id, class, and pseudo-class selectors are explained. The CSS box model is also summarized. Finally, it briefly mentions JavaScript and where JavaScript code runs.
CSS (Cascading Style Sheets) is a language used to style and lay out web pages. It allows separation of document content from document presentation through external style sheets. There are three main ways to insert CSS - external, internal, and inline. CSS rules are made up of selectors and declarations, where declarations include properties and values separated by a colon. Common selectors include element, id, class, universal, and group selectors. External style sheets can change the look of an entire website by editing just one CSS file linked across pages.
LyX is a document processor based on WYSIWYM (What You See Is What You Mean) rather than WYSIWYG like traditional word processors. It acts as a front end for LaTeX, allowing users to focus on content over formatting. LyX handles formatting tasks like page numbering, footnotes, and cross-references automatically after content is written. It excels at features for academic writing like mathematics, lists, tables, and cross-referencing. The document provides instructions on how to get started using LyX and resources for learning more.
The document discusses HTML and CSS. It provides information on basic HTML tags and page structure. It also defines CSS and describes the different ways to insert CSS code into an HTML document, including internal, external, and inline stylesheets. The document further explains CSS syntax, selectors like id and class, and properties of the box model. It provides an example of CSS code to style a signup form.
CSS is a stylesheet language that describes the presentation of HTML and XML documents. It allows you to control the style and formatting of elements on web pages, including colors, layout, fonts, and more. CSS syntax is composed of selectors that specify the target element and declarations with properties and values to style those elements. Different selector types like element, id, class, and grouping selectors target elements. CSS uses punctuation like semicolons, colons, and brackets to define properties, values, and declarations.
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.
CSS is used to style web documents and has advantages like saving time and improving page load speeds. A style rule has a selector, property, and value. There are three types of CSS: inline CSS within HTML tags, internal CSS within <style> tags in the HTML head, and external CSS in a separate .css file linked via <link>. CSS selectors target elements by type, class, ID, and other attributes. Properties control colors, backgrounds, fonts, text, and borders.
The document provides information about CSS (Cascading Style Sheets), including what CSS is, why it's used, how it solved problems with HTML, and some key CSS concepts. CSS is used to define styles and layout for web pages. It allows separation of document content from document presentation and saves work by controlling multiple page styles in one file. CSS removes formatting tags from HTML and solves issues that arose when tags like <font> were added to HTML for formatting.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
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.
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.
1. The document provides an introduction to HTML, CSS, and Git for setting up a development environment and submitting assignments. It includes explanations of common HTML tags, exercises to practice using HTML tags, and introductions to CSS box model properties and flexbox layout.
2. The second section focuses on CSS, explaining how to link CSS to HTML, add IDs and classes, and basic CSS syntax. It includes exercises to select elements using IDs and classes and use box model properties to layout elements.
3. The third section covers the CSS box model in more detail and introduces flexbox for layout. It includes exercises to use padding, borders, and flexbox properties to layout elements on a page. Additional flexbox resources are
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742
🚀 3-Day Web Development Workshop (5th-7th, 6:00-8:00 PM)
🔍 Day 1: HTML 🧱 + CSS 🎨 (Mayuresh & Tanuja)
💻 Day 2: JavaScript ⚙ + DOM 🛠 (Ved & Srushti)
🌐 Day 3: MERN Stack 🌱 (Mohit)
✨ Why Join? Hands-on learning, expert mentors, portfolio-ready project, and completion certificate!
🎯 For beginners, students, and web dev enthusiasts.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
basic programming language AND HTML CSS JAVApdfelayelily
The document provides information about cascading style sheets (CSS). It begins with an introduction to CSS and how it can be used to control formatting and positioning of elements without using HTML tags. It then discusses the different CSS syntax rules including selectors, declarations, and properties. It provides examples of how to specify styles for different HTML elements as well as how CSS handles multiple style rules. The document also covers various CSS properties for formatting text, backgrounds, fonts and more. It aims to explain the basics of how CSS works and can be used to control styling and layout of HTML documents.
This document provides an introduction to CSS (Cascading Style Sheets) including its history, basic structure, different ways to write CSS code, common CSS properties like color, background, and border, and the box model concept. CSS is the language used to style and lay out web pages. It allows separation of HTML structure and presentation. The document outlines CSS concepts like selectors, properties, values, and different CSS editing tools.
The document provides an introduction to CSS (Cascading Style Sheets), explaining what CSS is, how it works, and some basic syntax and concepts. CSS allows separation of document content from document presentation by defining styles that are applied to HTML elements. Styles can be defined internally, in an external CSS file, or inline. The CSS box model is also explained, with the content, padding, border, and margin areas of elements illustrated. Common CSS properties for text formatting are also listed.
This document provides an overview of HTML, CSS, and JavaScript for building a website. It discusses key topics like:
- HTML tags and syntax used to structure content
- Viewing HTML source code to understand how websites are built
- CSS properties that control styling and layout
- Making websites responsive for different devices using CSS media queries
- Common JavaScript concepts like variables, functions, and DOM manipulation
- A hackathon challenge to build a portfolio website using only HTML, CSS, and JS by a deadline.
It consists of Cascading Style Sheets (CSS) levels presentation where it explain each one separately and give a clear picture of how each levels work and what they're known as and how we can use them in a real life projects...........................................................................................................................................................
Web development involves designing, building, and maintaining websites and web applications. It includes front-end development (user interfaces and visuals using HTML, CSS, JavaScript), back-end development (server-side logic, databases, and APIs), and full-stack development (both front-end and back-end). Web developers focus on creating user-friendly, accessible, and responsive designs. Modern tools and frameworks like React, Angular, and Django simplify the development process.
1. The document provides an overview of CSS (Cascading Style Sheets) and how it can be used to style web pages by applying styles to HTML elements.
2. Styles can be applied inline, via embedded style blocks, or through external style sheets. External style sheets allow controlling styles across entire websites.
3. CSS properties like font, color, size, and other attributes can be set for elements using selectors like element names, classes, IDs to format text. Additional properties control layout aspects like margins, padding, borders.
This presentation exemplifies the various ways to create a box model in a web page. Therefore, students and learners were ablt to adapt the different learning from this lesson from the 2nd Quarter. Thus, a more effective and clear explanation of the topic may enhance the learners' understanding and comprehension.
Style guides in drupal development workflowsKalin Chernev
This document discusses style guides and their role in Drupal development workflows. It covers the benefits of style guides, including standardization, reusability of components, and serving as living documentation. The document then outlines three main focus areas in development: tools, methodologies, and environment. It also provides an overview of Drupal building blocks like blocks, fields, and entities. Finally, it presents a three-step plan for implementing web components in Drupal through define, view, and render steps.
The document discusses building and using RESTful APIs with Drupal. It provides an overview of REST and its benefits, how data can be managed by Drupal as a REST server or client, considerations for building REST APIs, and modules and tools for working with REST in Drupal. The presentation agenda includes explaining REST, reasons to use RESTful APIs, data management paradigms in Drupal, and a demo of managing data both inside and outside of Drupal via REST.
More Related Content
Similar to Introduction to Frontend Development - Session 2 - CSS Fundamentals (20)
The document provides information about CSS (Cascading Style Sheets), including what CSS is, why it's used, how it solved problems with HTML, and some key CSS concepts. CSS is used to define styles and layout for web pages. It allows separation of document content from document presentation and saves work by controlling multiple page styles in one file. CSS removes formatting tags from HTML and solves issues that arose when tags like <font> were added to HTML for formatting.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
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.
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.
1. The document provides an introduction to HTML, CSS, and Git for setting up a development environment and submitting assignments. It includes explanations of common HTML tags, exercises to practice using HTML tags, and introductions to CSS box model properties and flexbox layout.
2. The second section focuses on CSS, explaining how to link CSS to HTML, add IDs and classes, and basic CSS syntax. It includes exercises to select elements using IDs and classes and use box model properties to layout elements.
3. The third section covers the CSS box model in more detail and introduces flexbox for layout. It includes exercises to use padding, borders, and flexbox properties to layout elements on a page. Additional flexbox resources are
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSSudaymore742
🚀 3-Day Web Development Workshop (5th-7th, 6:00-8:00 PM)
🔍 Day 1: HTML 🧱 + CSS 🎨 (Mayuresh & Tanuja)
💻 Day 2: JavaScript ⚙ + DOM 🛠 (Ved & Srushti)
🌐 Day 3: MERN Stack 🌱 (Mohit)
✨ Why Join? Hands-on learning, expert mentors, portfolio-ready project, and completion certificate!
🎯 For beginners, students, and web dev enthusiasts.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
basic programming language AND HTML CSS JAVApdfelayelily
The document provides information about cascading style sheets (CSS). It begins with an introduction to CSS and how it can be used to control formatting and positioning of elements without using HTML tags. It then discusses the different CSS syntax rules including selectors, declarations, and properties. It provides examples of how to specify styles for different HTML elements as well as how CSS handles multiple style rules. The document also covers various CSS properties for formatting text, backgrounds, fonts and more. It aims to explain the basics of how CSS works and can be used to control styling and layout of HTML documents.
This document provides an introduction to CSS (Cascading Style Sheets) including its history, basic structure, different ways to write CSS code, common CSS properties like color, background, and border, and the box model concept. CSS is the language used to style and lay out web pages. It allows separation of HTML structure and presentation. The document outlines CSS concepts like selectors, properties, values, and different CSS editing tools.
The document provides an introduction to CSS (Cascading Style Sheets), explaining what CSS is, how it works, and some basic syntax and concepts. CSS allows separation of document content from document presentation by defining styles that are applied to HTML elements. Styles can be defined internally, in an external CSS file, or inline. The CSS box model is also explained, with the content, padding, border, and margin areas of elements illustrated. Common CSS properties for text formatting are also listed.
This document provides an overview of HTML, CSS, and JavaScript for building a website. It discusses key topics like:
- HTML tags and syntax used to structure content
- Viewing HTML source code to understand how websites are built
- CSS properties that control styling and layout
- Making websites responsive for different devices using CSS media queries
- Common JavaScript concepts like variables, functions, and DOM manipulation
- A hackathon challenge to build a portfolio website using only HTML, CSS, and JS by a deadline.
It consists of Cascading Style Sheets (CSS) levels presentation where it explain each one separately and give a clear picture of how each levels work and what they're known as and how we can use them in a real life projects...........................................................................................................................................................
Web development involves designing, building, and maintaining websites and web applications. It includes front-end development (user interfaces and visuals using HTML, CSS, JavaScript), back-end development (server-side logic, databases, and APIs), and full-stack development (both front-end and back-end). Web developers focus on creating user-friendly, accessible, and responsive designs. Modern tools and frameworks like React, Angular, and Django simplify the development process.
1. The document provides an overview of CSS (Cascading Style Sheets) and how it can be used to style web pages by applying styles to HTML elements.
2. Styles can be applied inline, via embedded style blocks, or through external style sheets. External style sheets allow controlling styles across entire websites.
3. CSS properties like font, color, size, and other attributes can be set for elements using selectors like element names, classes, IDs to format text. Additional properties control layout aspects like margins, padding, borders.
This presentation exemplifies the various ways to create a box model in a web page. Therefore, students and learners were ablt to adapt the different learning from this lesson from the 2nd Quarter. Thus, a more effective and clear explanation of the topic may enhance the learners' understanding and comprehension.
Style guides in drupal development workflowsKalin Chernev
This document discusses style guides and their role in Drupal development workflows. It covers the benefits of style guides, including standardization, reusability of components, and serving as living documentation. The document then outlines three main focus areas in development: tools, methodologies, and environment. It also provides an overview of Drupal building blocks like blocks, fields, and entities. Finally, it presents a three-step plan for implementing web components in Drupal through define, view, and render steps.
The document discusses building and using RESTful APIs with Drupal. It provides an overview of REST and its benefits, how data can be managed by Drupal as a REST server or client, considerations for building REST APIs, and modules and tools for working with REST in Drupal. The presentation agenda includes explaining REST, reasons to use RESTful APIs, data management paradigms in Drupal, and a demo of managing data both inside and outside of Drupal via REST.
Trainings and education at hackerspacesKalin Chernev
The document discusses the importance of training and education for keeping skills relevant in the modern information age, and proposes that hackerspaces provide an ideal environment for both online and in-person learning through workshops, collaboration with others, and opportunities to develop teaching skills and potentially start education businesses. Trainings at hackerspaces allow participants to acquire practical skills, network with people of similar interests, and gain experience that could lead to jobs or projects.
Introduction to Frontend Development - Session 1 - HTML FundamentalsKalin Chernev
This document provides an overview and agenda for a front-end development course. The course will cover HTML, CSS, and JavaScript and be held at init Lab, a hackerspace in Bulgaria. Students will learn HTML fundamentals like tags, paragraphs, headings, and attributes. Choosing a text editor like Sublime Text is also discussed. Homework includes starting a basic HTML document with headings and paragraphs using proper formatting.
This is the second lecture presentation of the SEO Fundamentals Outline course carried out at initLab hackerspace http://initlab.org/events/seo-fundamentals-onpage-optimization/
This document outlines an agenda for a Drupal SEO course. It discusses using the SEO Checklist module to optimize a Drupal site for search engine optimization. Some best practices covered include optimizing page titles, URLs, meta tags, and submitting the site to search engines. The presentation recommends focusing optimization efforts on Google and describes various modules that can be used to track visitors and improve content.
Introduction to Drupal 7 - Performance optimizationKalin Chernev
This document discusses optimizing Drupal performance through caching and modules. It introduces Drupal caching in core and recommends enabling caching in production. It also mentions modules that can help with caching, bandwidth optimization, logging, and optimizing specific components like Views. The document recommends cleaning cache regularly and monitoring logs and statistics to identify issues.
Introduction to Drupal 7 Users and roles managementKalin Chernev
This document discusses managing users and roles in Drupal 7. It covers defining roles and permissions for different types of users, including anonymous and authenticated users. The document recommends setting user account registration to "Administrators only" for control. It also provides instructions for creating new roles and user accounts, and assigning permissions and roles to users. The goal is to control who has access to perform certain actions like creating, editing, and deleting content.
This document provides an introduction to the Panels module in Drupal. It discusses when Panels should be used, how to create a home page using Panels, and how to save Panels configurations as features. The document walks through setting up a three column layout for a home page with Panels, adding content to each region, and exporting the home page panels configuration as a feature for reuse on other sites.
Introduction to Drupal 7 - Homework - webforms on webformsKalin Chernev
This document provides instructions for creating a webform in Drupal 7 to allow site visitors to submit an inquiry. The webform should include fields for names, phone number, email, and comments. It should be displayed in a block on all pages except the home page and contact page. Contact information is provided for getting help with completing the homework assignment.
Introduction to Drupal 7 - Making a slideshow with Views 3Kalin Chernev
This document discusses how to create a slideshow in Drupal 7 using Views. It describes setting up an image style for fixed slide dimensions, creating a content type for slideshow images with fields for title, image, URL and ordering number. It also covers installing required modules, building a Views slideshow block to display the images and creating a feature to package the slideshow functionality.
Introduction to Drupal 7 - Homework - making team sectionKalin Chernev
The document discusses using Drupal Views to create a dynamic employee directory. It outlines requirements such as displaying employee pictures and names in a consistent size, linking to individual profile pages, allowing office assistants to upload new employee profiles, and paginating listings of more than 12 employees. As an example, it links to the staff directory on the Lullabot website. The goal is to build an employee directory in Drupal that meets these requirements.
Available for Weekend June 6th. Uploaded Wed Evening June 4th.
Topics are unlimited and done weekly. Make sure to catch mini updates as well. TY for being here. More upcoming this summer.
A 8th FREE WORKSHOP
Reiki - Yoga
“Intuition” (Part 1)
For Personal/Professional Inner Tuning in. Also useful for future Reiki Training prerequisites. The Attunement Process. It’s all about turning on your healing skills. See More inside.
Your Attendance is valued.
Any Reiki Masters are Welcomed
More About:
The ‘Attunement’ Process.
It’s all about turning on your healing skills. Skills do vary as well. Usually our skills are Universal. They can serve reiki and any relatable Branches of Wellness.
(Remote is popular.)
Now for Intuition. It’s silent by design. We can train our intuition to be bold or louder. Intuition is instinct and the Senses. Coded in our Workshops too.
Intuition can include Psychic Science, Metaphysics, & Spiritual Practices to aid anything. It takes confidence and faith, in oneself.
Thank you for attending our workshops.
If you are new, do welcome.
Grad Students: I am planning a Reiki-Yoga Master Course. I’m Fusing both together.
This will include the foundation of each practice. Both are challenging independently. The Free Workshops do matter. They can also be downloaded or Re-Read for review.
My Reiki-Yoga Level 1, will be updated Soon/for Summer. The cost will be affordable.
As a Guest Student,
You are now upgraded to Grad Level.
See, LDMMIA Uploads for “Student Checkin”
Again, Do Welcome or Welcome Back.
I would like to focus on the next level. More advanced topics for practical, daily, regular Reiki Practice. This can be both personal or Professional use.
Our Focus will be using our Intuition. It’s good to master our inner voice/wisdom/inner being. Our era is shifting dramatically. As our Astral/Matrix/Lower Realms are crashing; They are out of date vs 5D Life.
We will catch trickster
energies detouring us.
(See Presentation for all sections, THX AGAIN.)
How to Create Time Off Request in Odoo 18 Time OffCeline George
Odoo 18 provides an efficient way to manage employee leave through the Time Off module. Employees can easily submit requests, and managers can approve or reject them based on company policies.
RE-LIVE THE EUPHORIA!!!!
The Quiz club of PSGCAS brings to you a fun-filled breezy general quiz set from numismatics to sports to pop culture.
Re-live the Euphoria!!!
QM: Eiraiezhil R K,
BA Economics (2022-25),
The Quiz club of PSGCAS
This presentation was provided by Jennifer Gibson of the Dryad, during the first session of our 2025 NISO training series "Secrets to Changing Behavior in Scholarly Communications." Session One was held June 5, 2025.
Smart Borrowing: Everything You Need to Know About Short Term Loans in Indiafincrifcontent
Short term loans in India are becoming a go-to financial solution for individuals needing quick access to funds without long-term commitments. With fast approval, minimal documentation, and flexible tenures, these loans are ideal for handling emergencies, unexpected bills, or short-term goals. Understanding key aspects like short term loan features, eligibility, required documentation, and how to apply for a short term loan can help borrowers make informed decisions. Whether you're salaried or self-employed, short term loans offer convenience and speed. This guide walks you through the essentials so you can secure the right loan at the right time.
How to Manage Maintenance Request in Odoo 18Celine George
Efficient maintenance management is crucial for keeping equipment and work centers running smoothly in any business. Odoo 18 provides a Maintenance module that helps track, schedule, and manage maintenance requests efficiently.
This presentation was provided by Nicole 'Nici" Pfeiffer of the Center for Open Science (COS), during the first session of our 2025 NISO training series "Secrets to Changing Behavior in Scholarly Communications." Session One was held June 5, 2025.
Rose Cultivation Practices by Kushal Lamichhane.pdfkushallamichhame
This includes the overall cultivation practices of Rose prepared by:
Kushal Lamichhane (AKL)
Instructor
Shree Gandhi Adarsha Secondary School
Kageshowri Manohara-09, Kathmandu, Nepal
Strengthened Senior High School - Landas Tool Kit.pptxSteffMusniQuiballo
Landas Tool Kit is a very helpful guide in guiding the Senior High School students on their SHS academic journey. It will pave the way on what curriculum exits will they choose and fit in.
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptxArshad Shaikh
Diptera, commonly known as flies, is a large and diverse order of insects that includes mosquitoes, midges, gnats, and horseflies. Characterized by a single pair of wings (hindwings are modified into balancing organs called halteres), Diptera are found in almost every environment and play important roles in ecosystems as pollinators, decomposers, and food sources. Some species, however, are significant pests and disease vectors, transmitting diseases like malaria, dengue, and Zika virus.
"Hymenoptera: A Diverse and Fascinating Order".pptxArshad Shaikh
Hymenoptera is a diverse order of insects that includes bees, wasps, ants, and sawflies. Characterized by their narrow waists and often social behavior, Hymenoptera play crucial roles in ecosystems as pollinators, predators, and decomposers, with many species exhibiting complex social structures and communication systems.
POS Reporting in Odoo 18 - Odoo 18 SlidesCeline George
To view all the available reports in Point of Sale, navigate to Point of Sale > Reporting. In this section, you will find detailed reports such as the Orders Report, Sales Details Report, and Session Report, as shown below.
How to Create Quotation Templates Sequence in Odoo 18 SalesCeline George
In this slide, we’ll discuss on how to create quotation templates sequence in Odoo 18 Sales. Odoo 18 Sales offers a variety of quotation templates that can be used to create different types of sales documents.
How to Create a Stage or a Pipeline in Odoo 18 CRMCeline George
In Odoo, the CRM (Customer Relationship Management) module’s pipeline is a visual representation of a company's sales process that helps sales teams track and manage their interactions with potential customers.
How to Create a Stage or a Pipeline in Odoo 18 CRMCeline George
Ad
Introduction to Frontend Development - Session 2 - CSS Fundamentals
1. Front-end development
Novice to professional
Practical HTML, CSS and JavaScript
Session 2: CSS Fundamentals
2. Agenda
● What do we have so far
● What is CSS
● Including CSS in your documents
● Block-level elements properties
● Setting up the layout of the document
● CSS properties and selectors to learn today
● Class and home exercises
3. What do we have so far
● Documents
○ index.html
● HTML tags in practice
○ paragraphs, spaces and breaks
○ links, images
● CSS we have
○ none so far
● JavaScript we have
○ none so far
4. What is CSS
● CSS stands for Cascading Style Sheets
● Styles define how to display HTML elements
● External style sheets save a lot of work
● External style sheets are stored in CSS files
6. Methods of including CSS
● Inline styles
Placed inside the HTML document, style information on a single element,
specified using the style attribute
● Embedded style
Blocks of CSS information inside the HTML itself
● External style sheets - highly recommended
Separate CSS file is referenced.
● Import
Importing CSS file from another CSS file when many files are to be edit
7. Rule of thumb
When styling a HTML element, the closer the CSS rule is to
the given element, it overrides any preceding CSS rules
before that.
By importance: Link > Import > Embedded > Inline
Note: Override any rule with the !important property.
8. Practice
Doing: Try the 4 methods of including CSS
At the end: separate file style.css in css folder
9. Block-level elements
● May appear only within a <body> element
● Typically formatted with line breaks
● May contain both inline and other block-level elements
● Contain "larger" structures
11. Inline elements
● May contain only data and other inline elements
● By default, do not begin with a new line
List of inline elements:
● b, big, i, small, tt
● abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
● a, bdo, br, img, map, object, q, script, span, sub, sup
● button, input, label, select, textarea
Source: MDN
14. Practice
Doing: Setup the header, content and footer regions.
At the end: an index.html file with HTML markup for
header, content and footer div containers, together with a
CSS file (empty)
15. Display property
● Sets the way to display a HTML element
● Most popular values
○ none - not displayed at all
○ block - displayed as a block-level element
○ inline - default value, displayed as an inline element
○ table - displayed as a table
16. Width and height properties
● height property sets the height of the
element
● width property sets the height of the element
Both could take dimensions in px, pt, etc., or
percentage metrics.
Values can also be auto or inherit.
17. Float properties
● Property to specify whether or not an
element should float.
● Property options
○ left
○ right
○ none - default value
18. Clear properties
● Property to specify which sides of an
element do not allow other floating elements
● Property options
○ left/right
○ both - most common use
○ none
19. Position property
● Specifies the type of positioning method used for an element
● Property options
○ static - elements render in the same order they are in the document
○ absolute - relative to the first positioned (not static) ancestor element
○ fixed - relative to the browser window
○ relative - relative to its normal position
20. Border property
● Sets properties for the outline of the element
● Shorthand for setting all properties at once
● Property options
○ border-width
○ border-style
○ border-color
21. Padding and margin properties
● Padding - space between content of an
element and its border. Negative values are
not allowed.
● Margin - space between element border and
elements next to it. Negative values are
allowed.
23. Practice
Doing: Write the CSS to visualize the layout
At the end: an index.html file with HTML markup for
header, content and footer div containers, together with a
CSS file with selectors and properties to visualize the
markup well enough so one can "see" the divisions.
24. Summary: HTML study
● Block-level and inline elements in HTML
● HTML tags:
○ html, head, body
○ header, content, sidebar and footer
○ navigation
25. Summary: CSS study
● Theory: Including CSS to HTML documents
● Techniques: CSS reset
● Properties:
display block, inline, none position relative, absolute
width size metric border size, color and place
height size metric padding b/n content and border
float left, right margin b/n border and outer element
clear both
26. Practice at class
● CSS reset
● Layout setup for
○ header
○ group
○ content
○ main
○ footer
● Set fixed sizes on block elements
● Color the borders to see the layout
If you're ready, start your homework at class :)
27. Practice at home
● Read and learn about:
○ fonts in CSS
○ text CSS properties
○ background properties
● Repeat class exercises if necessary
● Make sure you understand how to make layouts