Scribd
Upload
42 views

Intro To CSS

This document provides an introduction to CSS, covering how CSS works with selectors and rules to style HTML elements, the different methods of adding CSS like external and internal stylesheets, the CSS box model, and different types of selectors including type, class, ID, pseudo-class and universal selectors.

Uploaded by

gasdasd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Intro To CSS

This document provides an introduction to CSS, covering how CSS works with selectors and rules to style HTML elements, the different methods of adding CSS like external and internal stylesheets, the CSS box model, and different types of selectors including type, class, ID, pseudo-class and universal selectors.

Uploaded by

gasdasd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Introduction to CSS

How CSS works


https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works

• CSS (Cascading Style Sheets) allows you to create great looking web
pages,
• A CSS rule is formed from:
• A set of properties, which have values set to update how the HTML content is
displayed, for example I want my element's width to be 50% of its parent
element, and its background to be red.
• A selector, which selects the element(s) you want to apply the updated
property values to. For example, I want to apply my CSS rule to all the
paragraphs in my HTML document.
External stylesheet
Internal stylesheet

Internal stylesheet
CSS declarations
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax
Selectors
Simple selectors
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors
Type selector aka element selector
Class selector

• The class selector consists of a dot, '.', followed by a class name.


• A class name is any value, without spaces, placed within an HTML
class attribute.
• It is up to you to choose a name for the class.
• Multiple elements in a document can have the same class value,
• A single element can have multiple class names separated by white space.
Example of class selector
ID selector
• The ID selector consists of a hash/pound symbol (#), followed
by the ID name of a given element.

• Any element can have a unique ID name set with the


id attribute.

• It is up to you to choose an ID name.

• It's the most efficient way to select a single element.


Example of ID selector

Need to know more about font-family? Refer:


https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Universal selector
• Universal selector allows selecting all elements in a page.
Pseudo-class selectors
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
Pseudo-
Pseudo-classes
• A pseudo-selector do not select elements, but rather
certain parts of elements, or elements only in certain contexts.

• A CSS pseudo-class is a keyword, preceded by a colon (:),


added to the end of selectors to specify you want to style
the selected elements, and only when they are in certain state.

• For example, you might want to style an element only when it is


being hovered over by the mouse pointer
Example of pseudo class
The box model
The box model
• The CSS box model is the
foundation of layout on the
Web
• Each element is represented
as a rectangular box, with the
box's content, padding,
border, and margin built up
around one another like the
layers of an onion.
Try it yourself! Playing with boxes
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
Try it yourself!
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

Box backgrounds are made up of colors and


images, stacked on top of each other

They are applied to a box and drawn under that box.


By default, backgrounds extend to the outer edge of
the border.

This is often fine, but in some cases it can be


annoying (what if you have a tiled background
image that you want to only extend to the edge of
the content?)

This behaviour can be adjusted by setting


the background-clip property on the box
Fundamental CSS assessment
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension
Thank you.

You might also like