2. CSS is used to define styles for web pages, including the design, layout and variations in
display for different devices and screen sizes.
Syntax:
Selector: {property: value;}
Ex: a {color : green;}
3. Comments:
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
5. Selectors:
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)
6. Box Model
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
7. Font-face
With @font-face rule, we can use our own fonts instead of default “web-fonts”.
Syntax:
@font-face{ font-properties}
Ex:
@font-face {
font-family: ’font-name’;
src: url(‘font-location/font-name.ttf’);
font-weight: bold;
}
selector{font-family: ‘font-name’;}
8. Display
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.
Block-level Elements
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
Inline Elements
• <span>
• <a>
• <img>
Different Values
• inherit
• none
• block
• inline
• inline-block
• table
9. Position
The position CSS property sets how an element is positioned in a document.
The top , right , bottom , and left properties determine the final location of positioned elements.
1. Static: Default value. Elements render in order, as they appear in the document flow
2. Relative: The element is positioned relative to its normal position
3. Absolute: The element is positioned relative to its first positioned (not static) ancestor element
4. Fixed: The element is positioned relative to the browser window
5. Sticky: The element is positioned based on the user's scroll position
Syntax:
Position: static | absolute |fixed |relative | sticky;
10. Media Queries
The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to
desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen
readers (mediatype: print, screen, or speech).
11. Syntax:
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
Ex:
@media screen and (max-width: 600px) {
selector {
display: none;
}
}
We can also have different stylesheets for different media, like this:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
MediaQueries
• All
• Print
• Screen
• speech
/* When the width is between 600px and 900px OR above 1100px -
change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-
width: 1100px) {
………………………..
}
}
