CSS

Created by

Ken Henryx

Cards (43)

CSS
Cascading Style Sheet
CSS Early Days
1994 - 1996
Hakon Wium Lie and Bert Bos 
Working at the Norwegian Company, "Opera Software", independently developed ideas for a separate language to style web pages.
First Version (1996) 
CSS1 was released, introducing basic styling features like text formatting, font properties, and layout control
Growth and Evolution (1998 - 2000s) 
CSS2 and CSSS3 were released, adding more sophisticated features like positioning, visual effects, and support for different media types (like print and screen)
Modern CSS
2010s - Present
Flexbox and Grid 
Modern CSS Feature that makes it easier to create complex layouts
Animations and Transitions 
Modern CSS feature that adds dynamic effects to web pages
Preprocessor 
Modern CSS feature like Sass and Less, which offer more advanced features and organization
Colors 
Setting background and text colors
Fonts 
Choosing font families, sizes, and styles (bold, italic)
Layout 
Arranging elements on a page (using things like floats, grids, and flexbox)
Spacing 
Adding margins, padding, and borders
Effects 
Applying animations, transitions, and other visual effects.
Styles 
Control the look and feel of a website
CSS Selectors 
are used to target specific HTML elements and apply styles to them
Simple Selectors 
Category of CSS Selectors: select elements based on name, id, class
Combinator Selectors 
Category of CSS Selectors: select elements based on a specific relationship between them
Pseudo-class selectors 
Category of CSS Selectors: select elements based on a certain state
Pseudo-elements selectors 
Category of CSS Selectors: select and style a part of an element
Attribute Selectors 
Category of CSS Selectors: select elements based on an attribute or attribute value
ID Selectors 
p {
text-align: center;
color: red;
}
Class Selectors 
<h1 class="center"> Red and center-aligned heading </h1>
<p class="center"> Red and center-aligned paragraph. </p>
</body>
</html>
Elements Selector 
<p> every paragraph will be affected by the style. </p>
<p id="para1"> Me too! </p>
<p> and me! </p>
</body>
</html>
Groupings Selectors 
}
</style>
</head>
<body>
<h1> Hello World! </h1>
<h2> Smaller Heading! </h2>
<p> this is a paragraph. </p>

</body>
</html>
Universal Selectors 
<!DOCTYPE html>
<html>
<head>
<style>

* {
text-align: center;
color: blue;
}

</style>
</head>
<body>

<h1> Hello World! </h1>
Website Layout 
Division of content within a webpage; uses several layout techniques such as flexbox or CSS grid; controls element size and spacing
The Box Model 
:
Static 
Positioning: Default, elements flow naturally
Relative 
Positioning: Allows slight adjustments but still takes up the original space
Absolute 
Positioning: positions relative to its nearest positioned parent
Fixed 
Positioning: stays in one place even when scrolling
Sticky 
Positioning: a mix of relative and fixed - it "sticks" to the screen as you scroll
Header 
Section of the webpage usually found at the top, containing the website name and logo
Navigation Menu 
collection of useful links (usually below the header) that helps users navigate the website
Content Sections 
sections where content is displayed, the layout can be modified to suit the display on the user's device
Footer 
usually found at the bottom of the page, may act as an extension of the navigation bar but always contains contact information and copyright
CSS Responsive Design 
ensures websites adapt to various screen sizes and devices for an optimized user experience
mobile-first approach 
mobile sites tend to be more complex, making them easier to expand into larger screen sizes
Viewport Meta Tag 
adjusts layout for different devices.
example:
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0">