4. CSS Flashcards
What does CSS do?
Allows applying the same format to various elements in a web page.
What are 3 types of CSS?
- External
- Internal
- Inline CSS
CSS structure?
Selector {property:value; property:value; …property:value}
How to make paragraph text black and 10 pixels large?
P {color:black; font-size:10px;}
What does a selector do?
A selector allows choosing the specific element of interest that needs styling.
Types of selectors? (3)
- Element selector
- Id selector
- Class selector
What is an element selector?
Selecting based on element name
ex:
p {
text-align: center;
color: red;
}→css applies to all <p></p> tags
What is a Id selector?
para1 {
Selecting based on the id of the element
ex:
text-align: center;
color: red;
}→ css applies to the HTML element with id=“para1” attribute
What is a class selector?
Selecting based on the class of the element
ex:
.center {
text-align: center;
color: red;
}→ css applies to the HTML elements with class=“center” attribute
What are styles used in this course? (7)
- Font
- Background
- Border
- Margin
- Padding
- Height
- Width
What does CSS mean?
Cascading Style Sheets
What is id? (2)
- A unique identifier, therefore, each specific id can only be assigned to one element in an HMTL page
- Used to target a single element
What is class used for? (2)
- Class is used for grouping elements together.
- Several elements can have the same class name
Where are class and id defined?
Inside a tag (e.g., <p class=“class1” id=“para2”>…</p>)
CSS commment structure
/* This is a single-line comment */
HTML comment structure?
<!-- These paragraphs will be red -->
3 useful properties to define colours
- background-color
- color (text color)
- border (you can assign more than one value to each property: <h1 style="border:2px solid Tomato;">Hello World</h1>)
Basic Styles-Background properties (2)?
- background-color
- background-image
ex background-image:
body {background-image: url(“paper.gif”);}
Border styles proporties? (10)
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
Other border properties
Border-width: 5px; -> other values: medium, thick, etc.
Border-color: red;
Define margins in 4 directions
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
Basic styles height and width
- auto - This is default. The browser calculates the height and width
- length - Defines the height/width in px, cm, etc.
- % - Defines the height/width in percent of the containing block
- initial - Sets the height/width to its default value
- inherit - The height/width will be inherited from its parent value
Adding external CSS
Each HTML page must include a reference to the external style sheet file inside the <link></link> element, inside the head section.
<link></link>
Defining internal CSS
The internal style is defined inside the <style> element, inside the head section.</style>
When is inline CSS used?
To apply a unique style for a single element
How to use inline CSS?
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
What is most common way to create layouts?
Using <div> elements is the most common way of creating layouts.
What does the div element allow for?
<div> elements allow for creating blocks of content (combine parent display: flex with child float: left/right)
</div>
