Facilitated by Krishna Prasad Acharya Mechi Multiple Campus Bhadrapur
Facilitated by Krishna Prasad Acharya Mechi Multiple Campus Bhadrapur
Facilitated by Krishna Prasad Acharya Mechi Multiple Campus Bhadrapur
2. Embedded Styles allow you to implement any number of CSS styles by placing them
between the opening and closing style tags.
<style>......</style>
You can place Style Tag within the < head > ... < /head > section, just
Linking Style Sheets to HTML
3. External Style
An external style sheet is a plain text file that contain CSS Style formats only. The
extension of the external file should end with .css extension (e.g. pagestyle.css). This
external file is referred to as an external style sheet.
The external Style Sheet (.css file) always seperate from HTML file.
<head>
<link rel="stylesheet" type="text/css" href="styles.css " />
</head>
Alternet way
Imported CSS - @import Rule
• @import is used to import an external stylesheet in a manner similar to the <link>
element. Here is the generic syntax of @import rule.
<head>
@import url("mystyle.css“);
</head>
CSS Rules Overriding
Here is the rule to override any Style Sheet Rule.
Any inline style sheet takes highest priority. So, it will override any rule defined in
<style>...</style> tags or rules defined in any external style sheet file.
Any rule defined in <style>...</style> tags will override rules defined in any external
style sheet file.
Any rule defined in external style sheet file takes lowest priority, and rules defined in
this file will be applied only when above two rules are not applicable.
CSS Comments
/*.....this is a comment in style sheet.....*/.
CSS Selectors
1.The element Selector:
The element selector selects elements based on the element name.
2.The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select
one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
The style rule below will be applied to the HTML element with id="para1":
To select elements with a specific class, write a period (.) character, followed by the
name of the class.
In the example below, all HTML elements with class="center" will be red and center-
aligned:
<h1 class="center">Red and center-aligned heading</h1>
we can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
HTML elements can also refer to more than one class.
CSS Selectors
4. Grouping Selectors
To group selectors, separate each selector with a comma.
CSS Selectors
4. Descendant Selector
Descendant means anywhere nested within it in the tag.
CSS Selectors
Pseudo Selectors
CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or
any other script to use those effects.
selector:pseudo-class {property: value}
:link
Use this class to add special style to an unvisited link.
:visited
Use this class to add special style to a visited link.
:hover
Use this class to add special style to an element when you mouse over it.
:active
Use this class to add special style to an active element.
:active
Use this class to add special style to an active element.
:first-child
Use this class to add special style to an element that is the first child of some other element.
:first-line
Use this element to add special styles to the first line of the text in a selector.
:first-letter
Use this element to add special style to the first letter of the text in a selector.
:before
Use this element to insert some content before an element.
:after
Use this element to insert some content after an element.
CSS Font/text
property values
font-family font-family: arial, helvetica, serif
font-size font-size: 16px; [150%, larger, xx-small, small, medium]
font-weight font-weight: bold;[Normal,bold,bolder,lighter,lightest]
font-style font-style: italic;[Normal,italic,oblique]
text-decoration text-decoration:underline;[none, underline, overline, line-through, blink]
text-transform text-transform:capitalize[none, capitalize, uppercase, lowercase]
letter-spacing letter-spacing: 5px;
word-spacing word-spacing:5px;
text-indent text-indent:1cm;
color color:red
text-align text-align:right[right/left/center]
white-space white-space:pre;[normal, pre, nowrap]
direction direction:rtl;[ ltr/rtl]
text-shadow text-shadow:4px 4px 8px blue;[text-shadow: h-shadow v-shadow blur-
radius color]
CSS List
property values
property values
margin-top margin-top: 100px;
margin-right margin-right: 100px;
margin-bottom margin-bottom: 100px;
margin-left margin-left: 100px;
margin margin: 25px 50px 75px 100px;[top,right,bottom,left]
margin: 25px 50px 75px;[top,right-left,bottom]
margin: 25px 50px;[top-bottom,right-left]
margin: 25px;[all]
margin: auto auto to horizontally center the element within its container
CSS – Padding
property values
margin-top padding-top: 100px;
padding-right padding-right: 100px;
padding-bottom padding-bottom: 100px;
padding-left padding-left: 100px;
padding padding: 25px 50px 75px 100px;[top,right,bottom,left]
padding: 25px 50px 75px;[top,right-left,bottom]
padding: 25px 50px;[top-bottom,right-left]
padding: 25px;[all]
box-sizing To keep the width at 300px, no matter the amount of padding,
you can use the box-sizing property
<div> <div> element is given a width of 300px. However, the actual
rendered width of the <div> element will be 350px (300px + 25px
of left padding + 25px of right padding):
CSS box model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders,
padding, and the actual content. The image below illustrates the box model
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
CSS box model
Total element width = width + left padding + right padding + left border + right border + left
margin + right margin
Total element height = height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin
CSS incline vs block level element
An inline element does not start on a new line and only takes up as much width as necessary.
This is a paragraph. Examples of inline elements:
<span>
<a>
<img>
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
CSS Display /Visibility/overflow
The display property is the most important CSS property for controlling layout.
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.
property values
display Display:block; [inline,block,none]
The element will be hidden, and the page will be displayed as if the element is
not there
Visibility visibility:hidden;
element will still take up the same space as before. The element will be hidden,
but still affect the layout
overflow Hidden,auto,visible,scroll