https://github.com/derektypist/odin-p-css-foundations-a

Practice adding CSS to an HTML file using external CSS, internal CSS and inline CSS.
https://github.com/derektypist/odin-p-css-foundations-a

css3 external-css freecodecamp-project html5 inline-css internal-css odin-project

Last synced: 25 days ago
JSON representation

Practice adding CSS to an HTML file using external CSS, internal CSS and inline CSS.

• Host: GitHub
• URL: https://github.com/derektypist/odin-p-css-foundations-a
• Owner: derektypist
• Created: 2024-04-03T08:30:14.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-04-03T08:52:57.000Z (11 months ago)
• Last Synced: 2024-04-03T09:45:04.428Z (11 months ago)
• Topics: css3, external-css, freecodecamp-project, html5, inline-css, internal-css, odin-project
• Language: HTML
• Homepage: https://derektypist.github.io/odin-p-css-foundations-a/
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Odin Project - CSS Foundations Exercise A

Practice adding CSS to an HTML file using external CSS, internal CSS and inline CSS.

## UX

**User Stories**

1.  As a user, I should see a `div` element with a `red` background, `white` text, a font-size of `32px`, center-aligned and `bold`.

2.  As a user, I expect the CSS of the `div` element to be added externally by using a type selector.

3.  As a user, I should see the `p` element with a `green` background, `white` text, and a font-size of `18px`.

4.  The CSS of the `p` element should be added internally by using a type selector.

5.  As a user, I should see a `button` element with an `orange` background and font-size of `18px`.

6.  The CSS of the `button` element should have an inline style.

## Technologies

Uses HTML5 and CSS3.

## Testing

Make sure all user stories have been met.

## Deployment

On [GitHub Pages](https://derektypist.github.io/odin-p-css-foundations-a/) at the main branch.

## Credits

### Acknowledgements

[FreeCodeCamp](https://www.freecodecamp.org)