css Flashcards
css
- Cascading style sheets
- Css is used to apply the style in the web page which is made up of html elements
- It describes the look of the web page
- Css provides various style properties such as background colour padding margin border colour and many more to style a web page
- Each property in css have name and value pair and each property is separated by “;”
css syntax
Selector{Property1: value1; Property2: value2; ……….;}
Css style Sheets
- Inline style sheet
- Apply css in a single element
- It can apply styl uniquely to each element
- Style attribute is used
2.Internal style sheet
- Crisis properties are declared in <head> section of html doc
- <style> tag is used</style> - external style sheet
- Separate css file which contains style code using the class name id tag name etc
- We link together by using <link></link> tag
- External file which contains css is saved with extension .css
- Css file is linked to the actual file using link tag in header section
<link rel=”stylesheet” type=”text/css” href=”file.css>
selectors
- Used to select the content you want to style
- Select as of the part of css rule set
- css selector select html elements according to its id class type attribute etc
- Css elements selector(Select html ele by name)
- Css id selector-#(Select the Id attri of html ele and select sp. ele. It is always unique within page )
- Class selector- . (Selects with a specific cls attri)
- Class selector can also be applied to a single ele
–p.centre{—-} - Universal selector -*(Select all elements on pgs)
- Group selector(Used to select all ele with the same style definitions)
- This selector is used to minimise the
- commas commas are used to separate each selector in grouping
Background property
- background colour
- background image–
- URL()
- margin left:100px; - background repeat
- Repeat the background image horizontally and vertically
- Repeat X– Horizontal
- No repeatRepeat y– Vertical
- Repeat: No repeat - background attachment(specify the background images fixtures crowd with the rest of the page in the browser window)
- Background-Attachment: Fixed; - background position(User to define initial position of the background image)
- By default it is defined as top left of the Web pg
background: white url(‘good-morning.jpg’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
Css border property
Shorthand property used to set the borders on an element
- Border style (Specify type of the border you want to insert)
- Dotted
- none
- dashed
- solid
- double
- groove
- ridge
- inset
- outset - border colour- By three methods we can set the colour of the border:
-Name of the colour
- RGB(Value of the colour)
- Hex(hecx value of the colour) - Border width-px or In three predefined values thin medium thick
- border radius
- Border collapse– Border-collapse :separate;
CSS font
1.Font colour(color: red)
2. Fontfamily (Two types
generic family: seriff, San Serif, monospace
Font family: arial, New times Roman etc)
3. font size (Can be given as small medium large extra large and also in pixels)
4. font style (The type you want to display like italic normal etc)
5. font variant (how to set font variant of an element it may be normal and small caps)
6. font weight(Specifies weight of the font and how bold font isit may be normal bold bolder lighter or number(100-900))
Padding And margin
Padding is the space between the element content and element border
Four parts:
1. Padding left
2. padding right
3. padding top
4. padding bottom
padding: 40PX 50PX 50PX 30PX
Margin is the space around the elements
Four parts:
1. Top
2. bottom
3. left
4. right
margin: 100pX 50PX 50PX 100PX
Text transform properties
- capitalise
- uppercase
- lowercase
- none
- initial
- inherit
text-transform: capitalize;
Justify content
Alien items of flexible box container when items do not use all available space on main access it defines how the browser distributes space around and between the content items
1. centre
2. flex start
3. flex end
4. space around
5. Space evenly
6. space between
Text-align: Justify
Text indent
Firstline in the block of text
Specifies the amount of horizontal space that puts before lines of text
Decoration line
- Css property that decorates the content of the text
- It adds lines under above and through the text
Overline
Underline
line through
Text - decoration: line through;
css Box model
Css box model contains
1. content
2. padding
3. border
4. margin
Letters spacing
word spacing
line height
- Letter spacing 5PX;
- Line spacing: 1PX;
- Word spacing: 5PX;
- Text Indent 2PX;
- text Align: Justify
- Text decoration line: overline
Span and div tag
Span: inline container used to mark a part of text or part of document
Div:Defines division or a section in a html document
Container for html elevens which are styled with css of manipulated with javascript
