Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
31 views

CSS Presentation

Uploaded by

Namatovu Najah
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

CSS Presentation

Uploaded by

Namatovu Najah
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

CSS-Cascading

style sheets.
By group 2 Year 4 Geomatics
Group Members
• Obedmot Osman
• Okwii Christian Emmanuel
• Kasule Briako
• Kabaala Adonia
• Kaikuta Rosebery
• Mambwe Immaculate
CSS- Cascading Style Sheet
The styling and presentation language- used for styling HTML
document.
Control the presentation and layout of an HTML document.
Works by associating styling rules with HTML elements.
Uses selector to target specific element and property in order
to define how this element should appear.
Developercan create visually appealing and responsible web
pages-enhance user experiences and accessibility.
CSS- Cascading Style Sheet
It is connected to the html page using the link element.

This only apply to the External Style Sheet.


HTML
document

CSS is controlling the


color and alignment
of the header and
paragraph
Three styling ways
 Inline styling (in the style attributes)

An inline style is used to apply a unique style for a single element.


 Page specific /internal styles ( in the style element)

An internal style sheet is used for one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.
 From an External Style Sheet

With an external style sheet, the styling apply to an entire website by changing just
one file that is the .css file

Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
CSS Styling ways
• Inline styling • External styling
• <h1 style="text- • <head>
align:center;">This is a <link rel="stylesheet" hr
heading</h1> ef="mystyle.css">
</head>
• Internal styling
<html> Selector {
<head>
<style> /*declaration block*/
body {
background-color: red; }
}
Body {
</style> Background-color: yellow
</head> }
CSS Selector
• CSS selectors are used to "find" (or select) the HTML elements you
want to style.
• Selectors includes CSS element Selector, CSS id Selector, CSS class
Selector, CSS Universal Selector, CSS Grouping Selector.
CSS Styling
• CSS Background (color, image, repeat, position)
• CSS Color (Red, Orange, #ff0000, light blue)
• CSS Borders (2px, red, Solid/dotted)
• CSS Margins (top, right, bottom, left) (2px, 5px 2px 10px)
• CSS Padding (top, right, bottom, left)
• CSS Display (flex, block, inline etc)
• CSS Fonts (style, size, google font)
• CSS Texts (color, alignment, decoration, transformation, shadow)
• CSS Icons (favi icon)
• CSS Forms
• CSS Responsive
• etc
CSS Responsive
• Responsive web design makes your web page look good on all
devices.
• Responsive web design uses only HTML and CSS.
CSS Box model
• The CSS box model is a container that
contains multiple properties including
borders, margin, padding, and the content
itself.
• The CSS box model is a set of rules that help
dictate how items are displayed within your
website or web project.
• It wraps around every HTML element. It
consists of: content, padding, borders and
margins.
CSS Framework
• A CSS framework comprises several CSS stylesheets ready
for use by web developers and designers.
• The stylesheets are prepped for standard web design
functions: setting colors, layout, fonts, navbars, etc.
• With a CSS framework, the user has a completed CSS
stylesheet, and they only have to code the HTML with
accurate classes, structure, and IDs to set up a web page.
• The framework already has classes built-in for common
website elements – footer, slider, navigation bar,
hamburger menu, column-based layouts, etc.
• Includes Tailwind CSS, Bootstrap, Bulma, Daisy UI and so
on
Tailwind CSS
• A utility-first CSS framework packed with classes like flex, pt-4, text-
center and rotate-90 that can be composed to build any design,
directly in your markup.
• Width class

• Display class
Daisy UI
• The most popular component library for Tailwind CSS. daisyUI adds
component class names to Tailwind CSS so you can make beautiful
websites faster than ever.
• SAY if developer needs a Navbar- to show a navigation bar on the top
of the page.
Geo youthmapper current project

HTML only
No CSS applied
Navbar is
disorganized

With CSS applied


Navbar looks
awesome
Thank you for listening

You might also like