Upload File

css - girls can code · 2019. 8. 16. · styling html elements css. css style sheet rules h2...

  • Home
  • Documents
  • CSS - Girls Can Code · 2019. 8. 16. · Styling HTML Elements CSS. CSS Style Sheet Rules h2 {color: purple;} Selector. CSS Style Sheet Rules h2 {color: purple;} Opening Curly Brace
49
SECTION 4 CSS Adding Style to Your HTML

Upload: others

Post on 13-Feb-2021

8 views

Category:

Documents


0 download

Report

TRANSCRIPT

  • S E C T I O N 4

    CSSAdding Style to Your HTML

  • What is CSS

    CSS

    Cascading Style Sheet

  • Cascading Style Sheet

    CSS

  • How to Become an Astronaut

    Women in Space

    Styling HTML Elements

    CSS

  • CSS

    Style Sheet Rules

    h2 {color: purple;

    }

    Selector

  • CSS

    Style Sheet Rules

    h2 {color: purple;

    }

    Opening Curly Brace

    Closing Curly Brace

  • CSS

    Style Sheet Rules

    h2 { font-size: 22px;}

    Property Value

  • CSS

    Style Sheet Rules

    h2 { font-size: 22px;}

  • CSS

    Style Sheet Rules

    h2 { font-size: 22px;}

  • CSS

    Style Sheet Rules

    h2 { font-size: 22px;}

  • S C R E E N C A S T

    Setting Style Sheet Rules

  • CSS

    Style Sheet Rulesh2 { font-size: 22px;color: deeppink;

    font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • CSS

    Style Sheet Rulesh2 { font-size: 22px; color: deeppink; font-family: Bungee; text-transform: uppercase; margin-bottom: 26px;}

  • S C R E E N C A S T

    Finishing Up Our Styles

  • CSS Cheat Sheetbit.ly/gcc-css

    CSS

    http://bit.ly/gcc-css

  • CSS

    Class Selectors

    National Aeronautics and Space Administration (NASA)

    Class Attribute Value

    HTML

  • CSS

    Class Selectors

    .caption { font-size: 13px;}

    Class Selector

  • S C R E E N C A S T

    Adding a Class

  • CSS

    Class Selectors

    National Aeronautics and Space Administration (NASA)

    Read more about NASA

  • CSS

    Class Selectors

    National Aeronautics and Space Administration (NASA)

    Read more about NASA

  • S C R E E N C A S T

    Adding a Class to the Anchor Tag

  • CSS

    ID Selectors

    HTML CSS

    How to become an astronaut

    #site-content { padding: 40px; background-color: whitesmoke;}

    ID Attribute ID Selector

  • CSS

    ID Selectors

    HTML CSS

    How to become an astronaut

    #site-content { padding: 40px; background-color: whitesmoke;}

    ID Attribute ID Selector

  • CSS

    ID Selectors

    HTML CSS

    How to become an astronaut

    #site-content { padding: 40px; background-color: whitesmoke;}

    ID Attribute ID Selector

  • CSS

    ID Selectors

    HTML CSS

    How to become an astronaut

    #site-content { padding: 40px; background-color: whitesmoke;}

    ID Attribute ID Selector

  • CSS

    ID Selectors

    HTML CSS

    How to become an astronaut

    #site-content { padding: 40px; background-color: whitesmoke;}

    ID Attribute ID Selector

  • CSS

    ID Selectors

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

    GoodBad

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

  • CSS

    ID Selectors

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

    GoodBad

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

  • CSS

    ID Selectors

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

    GoodBad

    How to become an astronaut

    How to become an astronaut

    How to become an astronaut

  • S C R E E N C A S T

    Adding an id to the Header Element

  • CSS

    Selector Examples

    Classes

    .captions.astronauts.widget

    Elements

    h1imgp

    IDs

    #site-header#main-nav#sidebar

  • Cascading Style Sheets

    CSS

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

    Parent

    Parent

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

    Parent

    Parent

    Child

  • CSS

    Cascading Style Sheets

    Women in Space

    #site-footer { background-color: black;color: white;

    }

    HTML CSS

  • S C R E E N C A S T

    Style the Footer

  • CSS

    Selecting Named Colors

    bit.ly/gcc-colors

    http://bit.ly/gcc-colors

  • CSS

    Adding Custom Fonts

    bit.ly/gcc-fonts

    http://bit.ly/gcc-fonts

  • S C R E E N C A S T

    Adding Custom Fonts

  • What is CSS

    CSS

    Cascading Style Sheet

  • THANKS!


CSS Styling Introduction - ucg.ac.me › skladiste › blog_4051 › objava...CSS Styling Introduction About the Course CSS Styling 1. CSS Overview 2. CSS Presentation 3. CSS Display

CSS: Cascading Style Sheets - elite.polito.it · Summary •Introduction •CSS syntax •CSS selectors •CSS cascading •CSS box model •CSS positioning schemes •Page layout

CSS Hadas Kahsay. Overview What is CSS Basic syntax of CSS Rules How to link CSS style to html documents Browsers and CSS Advantages of CSS

CSS-100, CSS-135, CSS-160 CSS-50R CSS-B CSS-HCSS-100, CSS-135, CSS-160 and CSS-270 Pre-cut cable straps ranging from 10” to 27” long with locking head installed. CSS-50R 50 ft

the webjaoo.dk/dl/html5-london-2011/slides/MartinBeeby... · CSS3 Animations CSS3 Backgrounds and Borders CSS Color CSS FlexBox CSS Fonts CSS Grid Alignment CSS Hyphenation CSS Image

Systems Microbiology - MIT OpenCourseWare · Purple Bacteria Green Sulfur Bacteria Heliobacteria Fd ... inorganic substrates (H2, NH3, NO2-, H2S, Fe2+) Carbon source: CO 2 ... Brock

with CSS Grid + CSS Variables · CSS Grid + CSS Variables. CSS Grid (CSS Grid Layout Module Level 1) Why not just use flexbox? Intrinsic Web Design. Grid terminology. Grid display:

CSS, CSS Selectors, CSS Box Model

We Aspire . Build . Care address... · 2017-08-20 · H2 Mathematics H2 Chemistry H2 Physics H1 Economics Arts H2 Economics H2 Geography H2 Literature A ... L1R5 cut-off for JC 2017

Lecture 3,4 & 5 CSS › 2015 › 04 › lecture-345.pdf · Specifying colors p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } CSS This paragraph uses the first

For the latest prices, please check AutomationDirect.com ...Module for EBCs H2-SERIO $181.00 H2-SERIO-4 $181.00 H2-SERIO / H2-SERIO-4 Specifications H2-SERIO H2-SERIO-4 ... stranded

H2,3,4 - WMATA · H2 H2, H3 H4 H2, H3 H4 H2, H4 H3, H4 H2, H3 H4 H4 H3, H4 H2 H2 H2 Note: Passengers at Tenleytown-AU Station will be permitted on request to ride around to the stop

Hydrogen (H2) Production by Oxygenic Phototrophs · •Strategy depends on good genetics and an understanding of ... •Purple bacteria ... (H2) Production by Oxygenic Phototrophs

Chapter 8 Cascading Style Sheets (CSS). Agenda Definition of a CSS style Types of CSS Styles CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS

SCIENCE · Applicants should have a very good pass in either H2 Mathematics or H2 Further Mathematics, and a good pass in H2 Biology or H2 Chemistry or H2 Physics or H2 Computing

ALEXANDRIA WATERFRONT COMMISSION Tuesday, May 19, …...H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 ... Waterfront Implementation *** Estimated Construction

HTML Review CSS Review CSS Selectors CSS Positioning › uploads › 5 › 5 › 5 › 3 › ... · CSS Review CSS Selectors CSS Positioning. ZOOM OUT. Markup vs. Programming A markup

CSS Awesomeness: CSS for beginners

Setting up the ODROID-H2+: Installing the H2+ NIC …...Setting up the ODROID-H2+: Installing the H2+ NIC Driver July 1, 2020 The original H2 and H2 REV.B carried two 1GbE NIC whose

CONTROL SYSTEMS SOCIETYold.ieeecss.org/sites/ieeecss.org/files/CSS-Digest-May2015.pdf · A Detector-Based Approach for the H2 Control of Markov Jump Linear Systems with Partial Information

CSS HOME « W3Schools Home Next Chapter - Fadel K · CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors

HTML5 Features on Tizen...HTML5 Forms, Selectors API, Media Queries, CSS Transforms, CSS Animati ons, CSS Transitions, CSS Color, CSS Background and Borders, CSS Flexib le Box Layout,

INTERNAL CSS Casey Ames Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation

H2 GROW - Purple Plow

We Aspire . Build . Care streaming... · 2018-07-19 · H2 Mathematics H2 Chemistry H2 Physics H1 Economics Arts H2 Economics H2 Geography ... L1R5 cut-off for JC 2017 Autonomous

CSS & eCSStender [CSS Summit 2011]

CSS JS CSS JavaScript Components

FY20 Half Year Results Presentation · 102 88 76 H1 H2 H1 H2 H1 H2 H1 H2 H1 H2 H1 FY15 FY16 FY17 FY18 FY19 FY20 794 651 737 1,494 867 687 825 949 1,076 1,121 1,261 H1 H2 H1 H2 H1

INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS

H2 SO4 + Fe -> FeSO4 + H2

CSS Day: CSS Grid Layout

CSS Level 3 - ATLAS Institutecreative.colorado.edu/.../pdf/week8-tech-css-layout.pdf · 2018-10-16 · css timeline 1996 - css 1.0 recommendation 2000 - css 2.0 recommendation

CSS - Girls Can Codegirlscancode.io/assets/pdf/css.pdf · 2019-08-16 · Styling HTML Elements CSS. CSS Style Sheet Rules h2 {color: purple;} Selector. CSS Style Sheet Rules h2 {color:

Dude my dude. Another talk about CSS? What’s to know? CSS ... · content: “CSS-Tricks”;} h2:before {content: “A web design community.”;} HTML CSS. Bad for accessibility

H2:13 H27 JE2. Á2:6 H2:2 H2:4 H2:11 H2:1 H2:18 %iiiiiiíiij ... · H2:1 H2:1 Employment allocations JE2 GE3 sssl H2:14 Reserved Green Belt Land GB2 H2:22 JE2:1 LNR CBI reen Belt