Box model
- When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.
- CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. *Every box is composed of four parts defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
-
Content area
- The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
- Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.
-
Padding area
- The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.
- The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
-
Border area
- The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.
- The border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.
-
Margin area
- The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
- The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.
Inline vs Block elements
- In HTML elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout.
Example for inline
<div>
The following span is an <span class="highlight">inline element</span>; its
background has been colored to display both the beginning and end of the
inline element's influence.
</div>
In this example, the
block-level element contains some text. Within that text is a element, which is an inline element. Because the element is inline, the paragraph correctly renders as a single, unbroken text flow.Example for block element
<div style="border: 1px solid black;"> About Us </div>
Positioning: absolute/relative
- Absolute
- This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
- You use the positioning attributes top, left, bottom, and right to set the location.
- Absolute positioned elements are removed from the normal flow, and can overlap elements.
Syntax
position: absolute;
- Relative
- The relative positioning property is used to set the element relative to its normal position.
- Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Syntax
position: relative;
Common CSS structural classes
- Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements.
- We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.
The following is the list of structural classes.
- :first-child - it represents the element that is prior to its siblings in a tree structure.
- :nth-child(n) - it applies CSS properties to those elements that appear at the position evaluated by the resultant of an expression.
- :last-child - it represents the element that is at the end of its siblings in a tree structure.
- :nth-last-child(n) - :nth-last-child(Expression) is the same as :nth-child(Expression) but the positioning of elements start from the end.
- :only-child - it represents the element that is a sole child of the parent element and there is no other sibling.
- :first-of-type - It selects the first element of the one type of sibling.
- :nth-of-type(n) - it represents those elements of the same type at the position evaluated by the Expression.
- :last-of-type - it represents the last element in the list of same type of siblings.
- :nth-last-of-type(n) - It is the same as :nth-of-type(n) but it starts counting of position from the end instead of start.
Common CSS styling classes
.container : This class is used to create a container that holds the content of a web page or sometimes container which will hold other elements.
.header : This class is used to style the header section of a web page, which typically contains the site logo, navigation menu, and other important information.
.nav : This class is used to style navigation menus on a web page, such as a top or side menu.
.btn : This class is used to style buttons on a web page. It's often used to add a background color, border, and padding to create a clickable button.
.card : This class is used to create a card-style layout for content, such as a blog post or product listing. It often includes a background color, border, and padding to create a contained section for the content.
.footer : This class is used to style the footer section of a web page, which typically contains copyright information, social media links.
CSS specificity
Specificity Hierarchy :Every element selector has a position in the Hierarchy.
- Inline style: Inline style has highest priority.
- Identifiers(ID): ID have the second highest priority.
- Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
- Elements and pseudo-elements: Elements and pseudo-elements have lowest priority.
- Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.
Example
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
The specificity of A is 1 (one element selector)
The specificity of B is 101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)
Flex box / Grid
Flex container:The flex container specifies the properties of the parent. It is declared by setting the display property of an element to either flex or inline-flex.
Flex items:The flex items specify properties of the children. There may be one or more flex items inside a flex container.
- it is used to specify the direction of the flexible items inside a flex container.
- It is used to align the flex items horizontally when the items do not use all available space on the main-axis.
- It is used to align the flex items vertically when the items do not use all available space on the cross-axis.
The flex container properties are:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
The flex item properties are:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
CSS Responsive queries
- The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
- 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
Syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}
Value and description:
- all - Used for all media type devices
- print - Used for printers
- screen - used for computer screens, tablets, smart-phones etc.
- speech - Used for screenreaders that "reads" the page out loud
Example
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Common header meta tags
- The tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
- You can add metadata to your web pages by placing tags inside the header of the document which is represented by and tags.
Attributes and descriptions
- Name
- Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
- content
- Specifies the property's value.
- scheme
- Specifies a scheme to interpret the property's value (as declared in the content attribute).
- http-equiv
- Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
# output: Hello HTML5!
Top comments (0)