- CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.
- CSS is a Fundamental Technology of the World Wide Web, along with HTML and JavaScript.
CSS Introduction:
CSS, or Cascading Style Sheets, is a styling language used to describe the presentation of a document written in a markup language. It is used to control the layout and design of web pages, and can be applied to HTML, XML, and other markup languages.
Here are some of the key concepts and features of CSS:
Selectors: Used to select elements in a document to which styles will be applied. Selectors can be based on element type, class, ID, or attribute.
Properties: Used to specify the values of styles that will be applied to selected elements. Properties include things like color, font, margin, and padding.
Values: Used to specify the actual value of a property. Values can be in the form of numbers, colors, or strings.
Specificity: The order in which styles are applied to an element, based on the selector’s specificity.
Inheritance: The ability of child elements to inherit styles from their parent elements.
Box model: The layout of elements on a page, including the size and position of the content, padding, borders, and margins.
Flexbox and Grid: two CSS layout modules that are used to create flexible, responsive, and grid-based layouts.
Transitions and animations: Used to create smooth transitions between styles, and to animate elements on a page.
Media queries: Used to apply different styles based on the device or screen size.
Preprocessors: A scripting language that extends the capabilities of CSS like Sass, Less and Stylus.
Frameworks: libraries of pre-prepared libraries, that are meant to be used as a base starting point for starting a particular type of project like Bootstrap, Foundation.
Why to Learn CSS?
It is used to style your web pages, including design, layout, and display variations for different devices and screen sizes.
I will list some of the main benefits of learning CSS:
Create Stunning Web site
Become a web designer
Control web
Learn other languages
CSS Saves a Lot of Work!
CSS save file- extension “.css”.
With an External Stylesheet File, you can change the look of an entire website by changing just one file!
CSS Properties :
The CSS background property is used to set background effects on the element.
There are 5 CSS background properties that affect HTML elements:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS Advanced :
- The CSS Animation property is used to create animations on the web page.
- It can be used as a replacement for animations created by Flash and JavaScript.
How CSS animation works :
When the animation is created in the keyframe value it must be bound with selector; otherwise the animation will have no effect.
The Animation could be bound to the Selector by specifying at least these two properties:
- The name of the animation
- The duration of the animation
CSS Design :
The CSS Grid Layout module provides a grid-based layout system, with rows and columns, that makes it easier to design web pages without having to use floats and positioning.
