What css is codecademy

Styling Your Applications

In Emotion, the css prop is used to style elements. It can be used with object styles and tagged template literals.

// object styles 
 
div
 css= 
 
backgroundColor: 'rebeccapurple', 
 
>> 
 
> 
 Content to Display
 
/div> 
 
// tagged template literals 
 
div
 css=css` 
 background-color: rebeccapurple;
 
`> 
 
> 
 Content to Display
 
/div> 
 

React Styled Components

Styled components are React components that have styles attached to them.

const ContentWrapper = styled.div` 
 width: 100vw;
 height: 100vh;
 display: grid;
 
` 
 
function App()  
 
return ( 
 
ContentWrapper>Content/ContentWrapper> 
 
) 
 
>

Composition

Compositions can be used to group styles together and be used in other style blocks.

const Button = styled.button` 
 color: black;
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border: 2px solid black;
 border-radius: 3px;
 
`; 
 
// A new component based on Button, but with some override styles 
 
const CornflowerButton = styled(Button)` 
 color: cornflowerblue;
 border-color: cornflowerblue;
 
`;

Theming

In Emotion, themes are used to specify styles that are used throughout the whole application. Styles defined in the theme can be used as variables in other style blocks.

import  ThemeProvider > from '@emotion/react' 
 
import styled from '@emotion/styled' 
 
const theme =  
 
colors:  
 
primary: 'tomato' 
 
> 
 
> 
 
const AlertText = styled.div` 
 color: $props => props.theme.colors.primary>;
 
` 
 
render( 
 
ThemeProvider theme=theme>> 
 
AlertText>alert text/AlertText> 
 
/ThemeProvider> 
 
)

keyframes Helper

In Emotion, the keyframes helper can be used to define animations and returns an object that can be used in other style blocks.

import  jsx, css, keyframes > from '@emotion/react' 
 
const partyText = keyframes` 
 0% 
 background-color: red;
 >
 20% 
 background-color :yellow;
 >
 40% 
 background-color: green;
 >
 60% 
 background-color: blue;
 >
 80% 
 background-color: red;
 >
 
` 
 
render( 
 
div
 css=css` 
 animation: $partyText> 1s ease infinite;
 
`> 
 
> 
 party text! 
 
/div> 
 
)

Share Arrow Chevron Down Filled Icon

Learn More on Codecademy

Learn CSS-in-JS

Advance your CSS styling strategies with CSS-in-JS, a popular technique that allows programmers to write CSS styling in JavaScript.

Источник

What is css used for?

CSS is how we give our documents presentational rules without cluttering up the document itself. A well formed HTML document contains no presentational markup, only semantic and structural. By the same token, a well formed document contains no inline script, either. This is known as unobtrusive markup.

A raw HTML document doesn’t render that pretty, though. It’s raw and depends entirely on the default style rules of the browser which in most cases is pretty sparse, of necessity. To give our page visual value, we have the style sheet, which has a MIME type of its own, text/css . The browser recognizes this type and follows the built in specs to read and parse the selector rules in the sheet.

A document consists of all manner of nodes. The most common that we work with are, element, attribute and text nodes. With CSS selectors we can target any of these in both our static style sheet at load time, and in dynamic real time as the user interacts with the page.

Popular free courses

Learn SQL

In this SQL course, you’ll learn how to manage large datasets and analyze real data using the standard data management language.

Learn JavaScript

Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.

Learn HTML

Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.

Источник

Codecademy — CSS 1: Setup and Selectors

-Href gives the address of the style sheet. Type describes the type of document that it is and rel describes the relationship between the html doc and the css stylesheet -CSS selects HTML elements by using their same tag name. Anything you give a
style to with that tag name will receive the styling unless you decide otherwise. -As in HTML you can give HTML elements class names, you can also select the element for CSS use with its class name. Eg:

HTML 
Sole Shoe Company
 CSS .brand

-You can give an HTML element more than one class for assigning multiple CSS rules. This is useful incase you have, for example, two H1 tags but one needs to be bold and blue and the other needs to be bold and green. Eg:

• HTML elements can have multiple classes but they can also have ID attributes. You can then assign CSS rules to the ID using a hashtag. IDs override class and style tags so they should be used sparingly and only on items that will stay the same. Eg:

-Specificity is the order by which the browser decides which CSS styles will be displayed. IDs are the most specific selector in CSS, followed by classes, and finally, tags. Best practice is to style elements using the least specific method. If two IDs are used for the same styling element (e.g. colour) then the one lowest down in the stylesheet would take precedence.

-Chaining can be used in CSS to apply rules to specific elements. For example, if you gave p tags and h1 tags the class ‘special’ but wanted to style h1 special tags a particular font you can select them as below. This is called chaining selectors.

-CSS also supports selecting elements that are nested within other HTML elements. E.g. for the unordered list below, the li tags are nested within the ul tag that has the main-list class. In CSS, these can be selected by putting the class first and then the li tag. Eg below. You can target more deeply nested elements like this but it can become messy. If descendant selectors start to become more than three levels deep it might be better just to give them their own class.

-You can override all specific CSS selectors with !important as below. However this should very rarely be used. It is better to just reorganise your CSS rather than use this. In the example below, all p tags would be blue despite the more specific .main p tag styling them as red.

-Multiple selectors can be used to save repeating style attributes. Eg. example one is less efficient than example two. Note that they are separated with a comma.

Example 1: h1 < font-family: Georgia; >.menu < font-family: Georgia; >Example 2: h1, .menu

Extra attributes to remember:

-Use CSS to transform text from lowercase to uppercase:

Источник